1
00:00:00,000 --> 00:00:09,870

2
00:00:09,870 --> 00:00:13,360
>> ZAMYLA CHAN: Nah, di sini kita,
p-set terakhir dalam CS50.

3
00:00:13,360 --> 00:00:17,040
Ucapkan selamat diri dari memiliki
datang dari jauh sejak Hello pertama Anda

4
00:00:17,040 --> 00:00:20,090
Dunia dan Percetakan Up
Piramida untuk Mario.

5
00:00:20,090 --> 00:00:21,930
Anda membuat sebuah website pekan lalu.

6
00:00:21,930 --> 00:00:25,110
Dan kita akan membuat satu sama lain
minggu ini, salah satu yang memungkinkan Anda untuk

7
00:00:25,110 --> 00:00:28,570
berkeliling kampus Harvard, memilih
up anggota staf CS50 dan

8
00:00:28,570 --> 00:00:31,910
membawa mereka kembali ke mereka
rumah tinggal.

9
00:00:31,910 --> 00:00:35,400
>> Sekarang, minggu lalu kami bekerja di PHP,
bahasa sisi server.

10
00:00:35,400 --> 00:00:38,250
Untuk ini p-set, kita mendapatkan diperkenalkan
untuk JavaScript, yang merupakan

11
00:00:38,250 --> 00:00:40,610
bahasa sisi client.

12
00:00:40,610 --> 00:00:44,020
Jadi mari kita lihat beberapa
kode distribusi yang diberikan kepada

13
00:00:44,020 --> 00:00:46,210
Anda untuk ini p-set.

14
00:00:46,210 --> 00:00:49,700
Dalam folder JavaScript, akan ada
menjadi sekelompok file JavaScript.

15
00:00:49,700 --> 00:00:53,600
>> Ada buildings.js, yang berisi
array bangunan di sekitar Harvard

16
00:00:53,600 --> 00:00:57,340
kampus dengan informasi mereka
dan posisi.

17
00:00:57,340 --> 00:01:01,630
Houses.js adalah array dari Harvard
rumah tinggal dengan mereka

18
00:01:01,630 --> 00:01:04,030
lintang dan bujur.

19
00:01:04,030 --> 00:01:08,600
Passengers.js berisi array
penumpang, anggota staf CS50

20
00:01:08,600 --> 00:01:11,640
bahwa Anda akan membawa kembali ke
rumah tinggal mereka.

21
00:01:11,640 --> 00:01:16,450
>> Math3D.js, yang berisi banyak
fungsi yang harus dilakukan dengan gerakan.

22
00:01:16,450 --> 00:01:19,500
Jika Anda berpikiran matematis, maka
Saya menyambut Anda untuk melihat.

23
00:01:19,500 --> 00:01:23,530
Tapi Anda tidak perlu memahami
segala sesuatu di sana.

24
00:01:23,530 --> 00:01:26,710
Shuttle.js, yang berhubungan dengan
gerakan Shuttle itu.

25
00:01:26,710 --> 00:01:31,450
Dan index.html adalah halaman rumah di mana
segala sesuatu terjadi, benar-benar, di mana

26
00:01:31,450 --> 00:01:33,610
pengguna berinteraksi dengan situs.

27
00:01:33,610 --> 00:01:39,110
>> Service.css adalah style sheet CSS,
yang di samping Twitter

28
00:01:39,110 --> 00:01:43,960
Perpustakaan Bootstrap, kontrol
bagaimana index.html terlihat.

29
00:01:43,960 --> 00:01:48,190
Dan kemudian kami juga memiliki service.js, yang
berisi fungsi layanan untuk

30
00:01:48,190 --> 00:01:49,010
yang Shuttle.

31
00:01:49,010 --> 00:01:53,010
Dan inilah di mana Anda akan menjadi
mengisi di beberapa to-do.

32
00:01:53,010 --> 00:01:56,600
>> Sekarang mari kita lihat benda-benda dan
array asosiatif di JavaScript,

33
00:01:56,600 --> 00:01:59,360
yang, untuk semua maksud dan tujuan,
yang dipertukarkan.

34
00:01:59,360 --> 00:02:03,030
Jika saya ingin membuat sebuah objek variabel
disebut tongkat sihir, saya akan

35
00:02:03,030 --> 00:02:04,290
mendeklarasikan.

36
00:02:04,290 --> 00:02:09,350
Dan di dalam kurung kurawal tersebut, saya akan
tentukan, inti adalah unicorn, kayu

37
00:02:09,350 --> 00:02:12,710
adalah cherry, dan panjangnya 13.

38
00:02:12,710 --> 00:02:16,370
>> Sekarang, saya juga dapat mengakses nilai-nilai
obyek menggunakan

39
00:02:16,370 --> 00:02:18,270
notasi array asosiatif.

40
00:02:18,270 --> 00:02:22,610
Inti indeks Jadi tongkat, saya dapat mengatur
yang sama dengan unicorn, atau

41
00:02:22,610 --> 00:02:24,710
memeriksa bahwa jika saya perlu.

42
00:02:24,710 --> 00:02:28,890
Atau aku bisa menggunakan operator dot
wand.wood sama cherry, dan

43
00:02:28,890 --> 00:02:30,280
seterusnya dan sebagainya.

44
00:02:30,280 --> 00:02:33,930
Jadi, Anda melihat bahwa array asosiatif dan
objek dalam JavaScript akan menjadi

45
00:02:33,930 --> 00:02:37,710
dipertukarkan, dan akan
datang sangat berguna.

46
00:02:37,710 --> 00:02:41,570
>> Kemudian kita melihat berbagai bangunan
di buildings.js,

47
00:02:41,570 --> 00:02:43,870
lagi, array obyek.

48
00:02:43,870 --> 00:02:48,500
Jika saya ingin membuat sebuah array dari yang terbaik
bangunan di kampus Harvard, kemudian

49
00:02:48,500 --> 00:02:49,710
Aku akan membuatnya sebagai berikut.

50
00:02:49,710 --> 00:02:55,250
Menggunakan notasi objek ini, di mana
Saya menyimpan akar, nama, alamat,

51
00:02:55,250 --> 00:03:00,260
lintang, bujur dan untuk setiap
satu objek bangunan.

52
00:03:00,260 --> 00:03:02,930
>> Mari kita cepat berbicara tentang variabel
dalam JavaScript.

53
00:03:02,930 --> 00:03:07,760
Seperti PHP, variabel JavaScript
yang lemah atau longgar diketik.

54
00:03:07,760 --> 00:03:14,120
Untuk membuat variabel lokal, Anda awalan
nama variabel dengan V-A-R, var.

55
00:03:14,120 --> 00:03:17,010
Sekarang, dalam JavaScript, fungsi akan
membatasi ruang lingkup variabel.

56
00:03:17,010 --> 00:03:20,600
Jadi jika Anda memiliki sebuah variabel lokal dalam
fungsi, maka fungsi lainnya

57
00:03:20,600 --> 00:03:22,060
tidak bisa mengaksesnya.

58
00:03:22,060 --> 00:03:26,090
>> Tapi tidak seperti C, loop dan kondisi tidak
membatasi ruang lingkup variabel.

59
00:03:26,090 --> 00:03:30,600
Jadi bahkan jika Anda menyatakan hal itu dalam sebuah
kondisi, seluruh fungsi akan

60
00:03:30,600 --> 00:03:32,810
memiliki akses ke sana.

61
00:03:32,810 --> 00:03:35,820
Sekarang, tanpa var, variabel
akan global.

62
00:03:35,820 --> 00:03:39,170
Jadi, jika Anda hanya menyatakan nama dan
menetapkan nilai, maka variabel yang

63
00:03:39,170 --> 00:03:41,900
akan menjadi variabel global
dalam JavaScript.

64
00:03:41,900 --> 00:03:48,480
>> Sekarang, di rumah-rumah, kita memiliki asosiatif
array objek jenis host, di mana

65
00:03:48,480 --> 00:03:52,100
setiap rumah hanya garis lintang
dan bujur a.

66
00:03:52,100 --> 00:03:55,140
Kemudian kita memiliki penumpang
array, yang merupakan array

67
00:03:55,140 --> 00:03:57,370
jenis objek penumpang.

68
00:03:57,370 --> 00:04:01,620
Jadi setiap penumpang memiliki user
nama, nama, dan rumah.

69
00:04:01,620 --> 00:04:04,840
>> Perhatikan bahwa saya katakan jenis
penumpang, yang benar-benar hanya berarti

70
00:04:04,840 --> 00:04:08,150
bahwa setiap benda memiliki
pasangan nilai kunci yang sama.

71
00:04:08,150 --> 00:04:12,830
Jadi setiap objek dari tipe penumpang memiliki
nama pengguna, nama, dan rumah.

72
00:04:12,830 --> 00:04:14,850
Jadi apa yang kita butuhkan untuk
lakukan untuk p-set?

73
00:04:14,850 --> 00:04:20,779
Nah, kita perlu untuk memungkinkan pengguna untuk memilih
up anggota staf, untuk menampilkan semua

74
00:04:20,779 --> 00:04:25,080
anggota staf yang sedang dalam
pesawat kami, dan untuk menjatuhkan mereka.

75
00:04:25,080 --> 00:04:29,395
Dan kemudian kami juga akan berbicara tentang ekstra
fitur yang dapat diterapkan untuk

76
00:04:29,395 --> 00:04:30,980
yang Shuttle p-set.

77
00:04:30,980 --> 00:04:33,610
>> Tapi mari kita bicara tentang pickup pertama.

78
00:04:33,610 --> 00:04:37,480
Wajah-wajah staf CS50 telah
ditanam di seluruh kampus, di mana masing-masing

79
00:04:37,480 --> 00:04:41,750
wajah diimplementasikan sebagai tanda tempat
pada Earth 3D, dan sebagai

80
00:04:41,750 --> 00:04:44,020
penanda di peta 2D.

81
00:04:44,020 --> 00:04:47,880
Jadi ketika pengguna mengklik Pickup
tombol, kita ingin menambahkan sekitar

82
00:04:47,880 --> 00:04:49,590
penumpang untuk pesawat ulang-alik.

83
00:04:49,590 --> 00:04:53,650
Dan kami juga ingin menghapus tempat mereka
menandai dari dunia dan menghapus mereka

84
00:04:53,650 --> 00:04:58,060
penanda dari peta, menunjukkan bahwa
mereka berada di pesawat kami sekarang.

85
00:04:58,060 --> 00:05:02,520
>> Jadi bagaimana kita mendeteksi jika penumpang
berada dalam jangkauan pesawat kami?

86
00:05:02,520 --> 00:05:06,670
Nah, jarak fungsi, sehingga
shuttle.distance, lewat di

87
00:05:06,670 --> 00:05:10,630
lintang dan bujur, akan menghitung
jarak dari posisi saat ini

88
00:05:10,630 --> 00:05:14,220
dari pesawat ulang-alik ke titik yang
Anda tentukan dengan yang diberikan

89
00:05:14,220 --> 00:05:15,860
lintang dan bujur.

90
00:05:15,860 --> 00:05:19,180
Jadi, Anda dapat menggunakan ini untuk menghitung
jarak dari pesawat ulang-alik ke

91
00:05:19,180 --> 00:05:20,310
penumpang.

92
00:05:20,310 --> 00:05:24,040
>> Tapi bagaimana Anda tahu di mana
para penumpang?

93
00:05:24,040 --> 00:05:27,510
Nah, di situlah kita harus
mengedit fungsi populate.

94
00:05:27,510 --> 00:05:32,500
Mengisi tempat semua anggota staf
penumpang ke dunia

95
00:05:32,500 --> 00:05:36,300
dan ke dalam peta, tetapi tidak
menyimpan lokasi mereka.

96
00:05:36,300 --> 00:05:39,850
Jadi mungkin Anda dapat menyimpan mereka
menempatkan tanda dan spidol

97
00:05:39,850 --> 00:05:41,570
dalam beberapa array yang global.

98
00:05:41,570 --> 00:05:45,780
>> Sekarang, sudah ada adalah array global
menyimpan informasi dari penumpang.

99
00:05:45,780 --> 00:05:49,960
Toko penumpang Array masing-masing
nama penumpang dan rumah mereka.

100
00:05:49,960 --> 00:05:54,985
Jadi mungkin Anda dapat menambahkan beberapa parameter
ada ke objek penumpang.

101
00:05:54,985 --> 00:05:58,150
>> Untuk membantu kita mendeteksi semua penumpang
dalam jangkauan kami

102
00:05:58,150 --> 00:06:02,485
shuttle, lingkaran mari kita melalui semua
penumpang di penumpang array.

103
00:06:02,485 --> 00:06:07,790
A untuk loop dalam JavaScript mungkin terlihat
sesuatu seperti ini, sangat mirip dengan

104
00:06:07,790 --> 00:06:13,200
mereka untuk loop di C. Atau kita bisa menggunakan
alternatif untuk struktur loop, untuk

105
00:06:13,200 --> 00:06:18,680
var i di array, di mana saya akan tetap
indeks, tetapi Anda tidak perlu

106
00:06:18,680 --> 00:06:23,310
tentukan array.length yang
kondisi dan i + +.

107
00:06:23,310 --> 00:06:26,130
>> Lokasi setiap penumpang adalah
diberikan oleh tempat tanda mereka.

108
00:06:26,130 --> 00:06:29,800
Tapi tempat mark tidak
lintang dan bujur.

109
00:06:29,800 --> 00:06:34,170
Kita harus mengakses parameter dengan
mendapatkan geometri, menggunakan get

110
00:06:34,170 --> 00:06:38,180
geometri pada tempat yang ditandai, dan kemudian
setelah kita memiliki geometri, mendapatkan

111
00:06:38,180 --> 00:06:42,580
baik lintang atau bujur
menggunakan fungsi-fungsi.

112
00:06:42,580 --> 00:06:45,680
>> Jadi sekarang kita tahu bagaimana untuk mendeteksi apakah
penumpang berada dalam

113
00:06:45,680 --> 00:06:47,920
berbagai pesawat kami.

114
00:06:47,920 --> 00:06:52,050
Setelah kita memiliki orang-orang penumpang, kita akan
ingin menambahkan penumpang yang

115
00:06:52,050 --> 00:06:53,140
dalam kisaran tersebut.

116
00:06:53,140 --> 00:06:57,580
Kami ingin memungkinkan mereka untuk naik dan mengambil
kursi di pesawat kami, tetapi hanya

117
00:06:57,580 --> 00:06:59,630
jika kita memiliki cukup ruang untuk mereka.

118
00:06:59,630 --> 00:07:04,120
>> The shuttle.seats array akan menunjukkan
apakah kursi kosong, atau

119
00:07:04,120 --> 00:07:05,890
siapa di kursi itu.

120
00:07:05,890 --> 00:07:11,160
Jadi, jika kursi kosong, maka
kursi yang akan null.

121
00:07:11,160 --> 00:07:15,930
Jadi iterate atas kursi array,
memeriksa kursi kosong, menyimpan

122
00:07:15,930 --> 00:07:20,020
penumpang ke kursi tersebut sampai Anda
tidak memiliki kursi lebih kosong.

123
00:07:20,020 --> 00:07:23,330
Dan sayangnya, setiap penumpang lain
akan harus menunggu untuk

124
00:07:23,330 --> 00:07:26,000
kali pesawat ulang-alik turun.

125
00:07:26,000 --> 00:07:30,280
>> Setelah mereka mendapatkan pada pesawat ulang-alik, kita akan ingin
untuk menghapus tanda tempat mereka, yang

126
00:07:30,280 --> 00:07:32,580
adalah foto mereka di dunia 3D.

127
00:07:32,580 --> 00:07:38,030
Jika saya ingin menghapus tempat mark p,
maka saya akan mendapatkan semua fitur

128
00:07:38,030 --> 00:07:42,820
dari Bumi saya, dari Google Earth,
dan kemudian menghapus tempat tertentu

129
00:07:42,820 --> 00:07:45,910
menandai menggunakan fungsi removeChild.

130
00:07:45,910 --> 00:07:51,360
Kemudian yang terakhir, mari kita menghapus penanda,
ikon pada peta 2D, untuk setiap

131
00:07:51,360 --> 00:07:53,650
penumpang bahwa kita mengambil.

132
00:07:53,650 --> 00:07:59,790
>> Untuk menghapus penanda m, maka aku akan
hanya menjalankan m.setMap null.

133
00:07:59,790 --> 00:08:03,670
Lakukan ini untuk setiap penumpang dalam jangkauan,
dan Anda selesai pickup.

134
00:08:03,670 --> 00:08:07,890
Fungsi grafik harus menampilkan semua
penumpang yang ada di Anda

135
00:08:07,890 --> 00:08:11,000
shuttle, dan kursi kosong jika kosong.

136
00:08:11,000 --> 00:08:14,420
Jadi grafik harus iterate atas
shuttle.seats, menampilkan

137
00:08:14,420 --> 00:08:21,350
informasi penumpang untuk setiap indeks,
dan kursi kosong jika indeks yang null.

138
00:08:21,350 --> 00:08:26,160
>> Sekarang jika teks HTML diletakkan dalam sebuah
JavaScript variabel, maka dengan menggunakan

139
00:08:26,160 --> 00:08:31,950
document.getElementById, grafik dapat
mengedit HTML batin yang diberikan

140
00:08:31,950 --> 00:08:36,140
elemen dengan menempatkan
Teks HTML ke

141
00:08:36,140 --> 00:08:40,840
document.getElementById variabel HTML batin.

142
00:08:40,840 --> 00:08:46,180
Ketika pengguna mengklik tombol drop Off
di index.html, itu akan memanggil

143
00:08:46,180 --> 00:08:47,160
fungsi penurunan.

144
00:08:47,160 --> 00:08:49,510
Dan itu tugas kita untuk melaksanakan itu.

145
00:08:49,510 --> 00:08:54,150
>> Dalam dropoff, kita akan ingin menghapus
penumpang dari pesawat ulang-alik hanya jika

146
00:08:54,150 --> 00:08:58,740
kita berada dalam jangkauan tujuan mereka,
rumah tempat tinggal mereka.

147
00:08:58,740 --> 00:09:03,300
Jadi dropoff harus memeriksa apakah
pesawat ulang-alik adalah dalam kisaran dari salah satu

148
00:09:03,300 --> 00:09:08,200
rumah, dan menghapus dibutuhkan
penumpang dari pesawat ulang-alik.

149
00:09:08,200 --> 00:09:11,020
Jadi bagaimana kita memeriksanya jika kita
di berbagai rumah apapun?

150
00:09:11,020 --> 00:09:16,630
Nah, sekali lagi, kami akan memanfaatkan
shuttle.distance fungsi, lewat di

151
00:09:16,630 --> 00:09:20,990
garis lintang dan bujur dari titik
bahwa kita sedang memeriksa melawan.

152
00:09:20,990 --> 00:09:22,730
>> Tapi apa adalah titik?

153
00:09:22,730 --> 00:09:27,210
Nah, rumah-rumah array, jika Anda ingat
di houses.js, menyimpan

154
00:09:27,210 --> 00:09:32,790
lintang dan bujur masing-masing rumah di
array asosiatif, di mana setiap

155
00:09:32,790 --> 00:09:35,980
Indeks adalah nama dari rumah itu.

156
00:09:35,980 --> 00:09:37,590
Kemudian untuk menghapus penumpang -

157
00:09:37,590 --> 00:09:41,820
baik, hanya jika kita berada dalam jangkauan mereka
rumah yang mereka ingin pergi ke.

158
00:09:41,820 --> 00:09:46,380
Jadi sekali lagi, ingat bahwa penumpang
menyimpan rumah bahwa setiap penumpang

159
00:09:46,380 --> 00:09:48,850
ingin pergi ke.

160
00:09:48,850 --> 00:09:51,670
Jika mereka berada dalam jangkauan mereka
rumah, maka kami akan menghapus bahwa

161
00:09:51,670 --> 00:09:57,200
penumpang dari shuttle.seats dan set
posisi mereka dalam array ke null.

162
00:09:57,200 --> 00:10:00,220
>> Sekarang mari kita bicara tentang beberapa fitur tambahan
yang dapat diterapkan di

163
00:10:00,220 --> 00:10:02,690
yang CS50 Shuttle p-set.

164
00:10:02,690 --> 00:10:05,850
Ada sistem poin dimana
Anda melacak berapa banyak

165
00:10:05,850 --> 00:10:07,520
menunjukkan pengguna memiliki.

166
00:10:07,520 --> 00:10:11,120
Untuk mengantar penumpang
berhasil, mereka bisa mendapatkan poin.

167
00:10:11,120 --> 00:10:15,100
Tapi untuk mencoba untuk menurunkan penumpang
di mana tidak ada rumah pun di dekatnya,

168
00:10:15,100 --> 00:10:16,980
baik, mereka bisa mendapatkan sanksi untuk itu.

169
00:10:16,980 --> 00:10:21,790
Jadi mungkin Anda ingin melacak
poin dalam variabel global.

170
00:10:21,790 --> 00:10:25,970
>> Anda dapat menerapkan mungkin timer, di mana
pengguna memiliki sejumlah

171
00:10:25,970 --> 00:10:29,800
waktu untuk mengambil dan drop off
sejumlah penumpang.

172
00:10:29,800 --> 00:10:33,280
Mungkin bahkan mengintegrasikan ini
dengan sistem poin.

173
00:10:33,280 --> 00:10:39,970
Atau Anda dapat Mengedit Bagan sehingga
penumpang diurutkan menurut rumah.

174
00:10:39,970 --> 00:10:45,250
Sehingga mungkin akan menjadi semacam sebuah
berfungsi untuk shuttle.seats.

175
00:10:45,250 --> 00:10:49,240
>> Anda dapat menerapkan fitur terbang,
di mana jika pengguna memasukan Konami

176
00:10:49,240 --> 00:10:53,460
kode, maka pesawat lift off
tanah dan pesawat bisa terbang.

177
00:10:53,460 --> 00:10:58,890
Tapi untuk drop off yang aman, terbaik untuk membuat
pesawat mendarat roda terhadap

178
00:10:58,890 --> 00:11:00,700
tanah pertama.

179
00:11:00,700 --> 00:11:05,910
Anda juga dapat menerapkan teleportasi,
di mana Anda membuat daftar drop-down

180
00:11:05,910 --> 00:11:08,380
bangunan di index.html.

181
00:11:08,380 --> 00:11:12,270
Dan memilih salah satu dari mereka, yang
pengguna akan diangkut ke

182
00:11:12,270 --> 00:11:14,220
bahwa bangunan di kampus.

183
00:11:14,220 --> 00:11:16,760
OK, meskipun, untuk melakukan perjalanan melalui
dinding beberapa

184
00:11:16,760 --> 00:11:19,290
bangunan di jalan di sana.

185
00:11:19,290 --> 00:11:22,960
>> Anda juga dapat mengubah kecepatan
shuttle, yang memungkinkan pengguna untuk meningkatkan

186
00:11:22,960 --> 00:11:25,490
atau mengurangi kecepatan.

187
00:11:25,490 --> 00:11:28,840
Mungkin Anda ingin variabel global untuk
melacak berapa banyak bahan bakar

188
00:11:28,840 --> 00:11:31,520
shuttle memiliki, penurunan
sebagai Anda pergi bersama.

189
00:11:31,520 --> 00:11:35,860
Setelah Anda mencapai nol, meskipun, pesawat ulang-alik
tidak akan bisa bergerak kecuali jika Anda sudah

190
00:11:35,860 --> 00:11:40,610
mengisi bahan bakar, mungkin dengan menggunakan tombol, atau
bahkan membuat pompa bensin Anda sendiri.

191
00:11:40,610 --> 00:11:43,240
>> Tapi itu pasti tidak
daftar lengkap.

192
00:11:43,240 --> 00:11:46,340
Periksa spesifikasi untuk penuh
daftar, atau mungkin mengusulkan

193
00:11:46,340 --> 00:11:47,840
Anda sendiri untuk TF Anda.

194
00:11:47,840 --> 00:11:48,950
Langit adalah batas.

195
00:11:48,950 --> 00:11:53,110
Ini adalah terakhir CS50 p-set Anda,
sehingga bersenang-senang dengan itu.

196
00:11:53,110 --> 00:11:56,360
Ini adalah CS50 Shuttle.

197
00:11:56,360 --> 00:11:59,230
>> Saya harus mengatakan, itu menjadi kesenangan
membuat ini untuk Anda dengan

198
00:11:59,230 --> 00:12:00,400
tim produksi.

199
00:12:00,400 --> 00:12:04,330
Dan saya berharap bahwa Anda telah
menikmatinya, juga.

200
00:12:04,330 --> 00:12:06,040
Nama saya adalah Zamyla.

201
00:12:06,040 --> 00:12:08,310
Dan ini adalah CS50.

202
00:12:08,310 --> 00:12:16,363