1 00:00:00,000 --> 00:00:00,988 2 00:00:00,988 --> 00:00:09,880 >> [MUZIK Bermain] 3 00:00:09,880 --> 00:00:13,360 >> SPEAKER 1 Well, di sini kita, set P lepas di CS50. 4 00:00:13,360 --> 00:00:17,040 Ucapkan tahniah kepada diri kamu daripada mempunyai datang setakat ini sejak hello pertama anda 5 00:00:17,040 --> 00:00:20,090 dunia dan mencetak piramid untuk Mario. 6 00:00:20,090 --> 00:00:21,930 Anda membuat laman web minggu lepas. 7 00:00:21,930 --> 00:00:25,110 Dan kita akan membuat satu sama lain minggu ini, salah satu yang membolehkan anda untuk 8 00:00:25,110 --> 00:00:28,570 memandu di sekitar kampus Harvard, mengambil sehingga kakitangan CS50, dan 9 00:00:28,570 --> 00:00:31,910 membawa mereka kembali kepada mereka rumah-rumah kediaman. 10 00:00:31,910 --> 00:00:35,400 >> Sekarang minggu lepas kami bekerja dalam PHP, bahasa sebelah pelayan. 11 00:00:35,400 --> 00:00:38,250 Untuk set P ini, kita mendapat diperkenalkan untuk JavaScript, yang merupakan 12 00:00:38,250 --> 00:00:40,600 pelanggan bahasa sampingan. 13 00:00:40,600 --> 00:00:44,010 Jadi mari kita lihat beberapa daripada kod pengedaran yang yang diberikan kepada 14 00:00:44,010 --> 00:00:46,210 anda untuk set P ini. 15 00:00:46,210 --> 00:00:49,700 >> Dalam folder JavaScript, ada akan menjadi sekumpulan fail JavaScript. 16 00:00:49,700 --> 00:00:53,600 Ada buildings.js, yang mengandungi bangunan-bangunan di sekitar Harvard 17 00:00:53,600 --> 00:00:57,340 kampus, dengan maklumat mereka dan kedudukan. 18 00:00:57,340 --> 00:01:01,630 Houses.js adalah pelbagai Harvard rumah-rumah kediaman, dengan mereka 19 00:01:01,630 --> 00:01:04,030 latitud dan longitud. 20 00:01:04,030 --> 00:01:07,020 Passengers.js mengandungi pelbagai penumpang - 21 00:01:07,020 --> 00:01:08,600 ahli-ahli kakitangan CS50 - 22 00:01:08,600 --> 00:01:11,640 bahawa anda akan membawa kembali kepada rumah-rumah kediaman mereka. 23 00:01:11,640 --> 00:01:16,450 >> Math3D.js, yang mengandungi banyak fungsi kaitan dengan pergerakan itu. 24 00:01:16,450 --> 00:01:19,500 Jika anda berfikiran matematik, maka saya mengalu-alukan anda melihat. 25 00:01:19,500 --> 00:01:23,530 Tetapi anda tidak perlu memahami segala-galanya di sana. 26 00:01:23,530 --> 00:01:26,710 Shuttle.js, yang memperkatakan pergerakan pesawat itu. 27 00:01:26,710 --> 00:01:31,450 Dan index.html adalah halaman rumah di mana semua yang berlaku, benar-benar, di mana 28 00:01:31,450 --> 00:01:33,610 pengguna berinteraksi dengan laman web ini. 29 00:01:33,610 --> 00:01:39,110 >> Service.css adalah lembaran gaya CSS, yang, sebagai tambahan kepada Twitter 30 00:01:39,110 --> 00:01:43,960 Perpustakaan Bootstrap, kawalan bagaimana kelihatan index.html. 31 00:01:43,960 --> 00:01:48,190 Dan kemudian kita juga mempunyai service.js, yang mengandungi fungsi-fungsi perkhidmatan untuk 32 00:01:48,190 --> 00:01:49,010 ulang-alik. 33 00:01:49,010 --> 00:01:53,010 Dan di sini di mana anda akan menjadi mengisi beberapa untuk dos. 34 00:01:53,010 --> 00:01:56,600 >> Sekarang mari kita lihat pada objek dan array bersekutu dalam JavaScript, 35 00:01:56,600 --> 00:01:59,360 yang bagi semua maksud dan tujuan boleh ditukar. 36 00:01:59,360 --> 00:02:03,030 Jika saya mahu membuat objek pembolehubah dipanggil tongkat, saya akan 37 00:02:03,030 --> 00:02:04,290 mengisytiharkan ia. 38 00:02:04,290 --> 00:02:08,789 Dan di dalam orang-orang pendakap kerinting saya akan menentukan teras adalah Unicorn. 39 00:02:08,789 --> 00:02:10,220 Kayu ceri. 40 00:02:10,220 --> 00:02:12,710 Dan panjang ialah 13. 41 00:02:12,710 --> 00:02:16,370 >> Sekarang saya juga boleh mengakses nilai-nilai objek menggunakan 42 00:02:16,370 --> 00:02:18,270 notasi array bersekutu. 43 00:02:18,270 --> 00:02:22,610 Jadi tongkat teras indeks, saya boleh menetapkan yang sama dengan Unicorn, atau 44 00:02:22,610 --> 00:02:24,710 pastikan, jika saya perlukan. 45 00:02:24,710 --> 00:02:26,510 Atau saya boleh menggunakan operator titik. 46 00:02:26,510 --> 00:02:30,280 Kayu tongkat dot sama ceri, dan sebagainya, dan sebagainya. 47 00:02:30,280 --> 00:02:33,930 Jadi anda lihat bahawa array bersekutu dan objek dalam JavaScript akan menjadi 48 00:02:33,930 --> 00:02:37,720 ditukar, dan kehendak datang dalam agak berguna. 49 00:02:37,720 --> 00:02:41,570 >> Kemudian kami melihat bangunan-bangunan dalam buildings.js. 50 00:02:41,570 --> 00:02:43,870 Sekali lagi, pelbagai objek. 51 00:02:43,870 --> 00:02:48,500 Jika saya mahu membuat pelbagai terbaik bangunan di kampus Harvard, maka 52 00:02:48,500 --> 00:02:49,710 Saya akan membuat ia seperti berikut. 53 00:02:49,710 --> 00:02:55,250 Menggunakan notasi objek ini, di mana Saya menyimpan akar, nama, alamat, 54 00:02:55,250 --> 00:03:00,260 latitud, longitud dan bagi tiap-tiap objek bangunan. 55 00:03:00,260 --> 00:03:02,930 >> Mari cepat bercakap tentang pembolehubah dalam JavaScript. 56 00:03:02,930 --> 00:03:07,760 Seperti PHP, JavaScript pembolehubah adalah lemah atau longgar ditaip. 57 00:03:07,760 --> 00:03:14,120 Untuk membuat pembolehubah tempatan, anda awalan nama pembolehubah dengan V-A-R, var. 58 00:03:14,120 --> 00:03:17,010 >> Sekarang dalam JavaScript, fungsi akan menghadkan skop pembolehubah. 59 00:03:17,010 --> 00:03:20,600 Jadi jika anda mempunyai pembolehubah tempatan dalam fungsi, maka fungsi-fungsi lain 60 00:03:20,600 --> 00:03:22,060 tidak boleh mengaksesnya. 61 00:03:22,060 --> 00:03:26,090 Tetapi tidak seperti C, gelung dan syarat yang tidak melakukan menghadkan skop pembolehubah. 62 00:03:26,090 --> 00:03:30,600 >> Jadi, walaupun anda mengisytiharkan ia di dalam sebuah keadaan, seluruh fungsi akan 63 00:03:30,600 --> 00:03:32,810 mempunyai akses kepadanya. 64 00:03:32,810 --> 00:03:35,820 Sekarang tanpa var, pembolehubah akan global. 65 00:03:35,820 --> 00:03:39,170 Jadi jika anda hanya mengisytiharkan nama dan menetapkan nilai, maka pemboleh ubah yang 66 00:03:39,170 --> 00:03:41,900 akan berubah-ubah global dalam JavaScript. 67 00:03:41,900 --> 00:03:48,480 >> Kini di rumah, kami mempunyai sebuah bersekutu pelbagai objek jenis rumah, di mana 68 00:03:48,480 --> 00:03:52,100 setiap rumah hanya latitud yang dan longitud yang. 69 00:03:52,100 --> 00:03:55,140 Kemudian kita mempunyai penumpang pelbagai, yang merupakan satu pameran 70 00:03:55,140 --> 00:03:57,370 jenis objek penumpang. 71 00:03:57,370 --> 00:04:01,620 Jadi setiap penumpang mempunyai nama pengguna, nama, dan sebuah rumah. 72 00:04:01,620 --> 00:04:04,840 Perhatikan bahawa saya melihat jenis penumpang, yang benar-benar hanya bermakna 73 00:04:04,840 --> 00:04:08,150 bahawa setiap objek mempunyai sama pasangan nilai utama. 74 00:04:08,150 --> 00:04:12,830 Jadi setiap objek jenis penumpang mempunyai nama pengguna, nama, dan sebuah rumah. 75 00:04:12,830 --> 00:04:14,850 >> Jadi, apa yang kita perlu lakukan untuk P set? 76 00:04:14,850 --> 00:04:20,779 Nah, kita perlu untuk membolehkan pengguna untuk memilih sehingga ahli-ahli kakitangan, untuk memaparkan semua 77 00:04:20,779 --> 00:04:25,090 ahli-ahli kakitangan yang kini ulang-alik kami, dan untuk menggugurkan mereka di luar. 78 00:04:25,090 --> 00:04:29,280 Dan maka kita juga akan bercakap mengenai tambahan ciri-ciri yang boleh dilaksanakan untuk 79 00:04:29,280 --> 00:04:30,980 pesawat P set. 80 00:04:30,980 --> 00:04:33,610 >> Tetapi mari kita bercakap tentang pikap pertama. 81 00:04:33,610 --> 00:04:37,480 Wajah-wajah kakitangan CS50 telah ditanam di seluruh kampus, di mana setiap 82 00:04:37,480 --> 00:04:41,750 muka dilaksanakan sebagai tanda tempat di bumi 3D, dan sebagai 83 00:04:41,750 --> 00:04:44,030 penanda di peta 2D. 84 00:04:44,030 --> 00:04:47,880 Oleh itu, apabila pengguna klik pikap butang, kita mahu menambah berdekatan 85 00:04:47,880 --> 00:04:49,590 penumpang untuk ulang-alik. 86 00:04:49,590 --> 00:04:53,650 Dan kita juga mahu mengeluarkan tempat mereka menandakan dari dunia, dan mengeluarkan mereka 87 00:04:53,650 --> 00:04:58,060 penanda dari peta, yang menunjukkan bahawa mereka dalam kapal kita sekarang. 88 00:04:58,060 --> 00:05:02,520 >> Jadi bagaimana kita mengesan jika penumpang berada dalam liputan perkhidmatan ulang-alik kita? 89 00:05:02,520 --> 00:05:04,610 Nah, jarak fungsi - 90 00:05:04,610 --> 00:05:08,770 jadi ulang-alik jarak dot, lulus dalam latitud dan longitud, akan 91 00:05:08,770 --> 00:05:12,030 mengira jarak dari semasa kedudukan ulang-alik ke 92 00:05:12,030 --> 00:05:15,850 menunjukkan yang anda nyatakan dengan diberikan latitud dan longitud. 93 00:05:15,850 --> 00:05:19,180 Jadi, anda boleh menggunakan ini untuk mengira jarak dari ulang-alik ke 94 00:05:19,180 --> 00:05:20,310 penumpang. 95 00:05:20,310 --> 00:05:24,040 >> Tetapi bagaimana anda tahu di mana penumpang adalah? 96 00:05:24,040 --> 00:05:27,510 Nah, itu di mana kami akan perlu mengedit fungsi mengisi. 97 00:05:27,510 --> 00:05:32,500 Mengisi tempat semua anggota kakitangan dan penumpang ke dunia, 98 00:05:32,500 --> 00:05:36,300 dan ke dalam peta, tetapi tidak menyimpan lokasi mereka. 99 00:05:36,300 --> 00:05:39,850 Jadi mungkin anda boleh menyimpan mereka meletakkan tanda dan penanda 100 00:05:39,850 --> 00:05:41,570 di beberapa pelbagai global. 101 00:05:41,570 --> 00:05:45,780 >> Sekarang ada sudah adalah pelbagai global menyimpan maklumat daripada penumpang. 102 00:05:45,780 --> 00:05:49,960 Kedai-kedai pelbagai penumpang setiap nama penumpang dan rumah mereka. 103 00:05:49,960 --> 00:05:54,985 Jadi mungkin anda boleh menambah beberapa parameter ada kepada objek penumpang. 104 00:05:54,985 --> 00:05:59,290 >> Untuk membantu kami mengesan semua penumpang dalam jarak ulang-alik kita, mari kita 105 00:05:59,290 --> 00:06:02,500 gelung melalui semua penumpang dalam pelbagai penumpang. 106 00:06:02,500 --> 00:06:07,790 A untuk gelung dalam JavaScript mungkin kelihatan sesuatu seperti ini, hampir sama dengan 107 00:06:07,790 --> 00:06:12,910 mereka untuk gelung dalam C. Atau kita boleh menggunakan alternatif untuk struktur gelung. 108 00:06:12,910 --> 00:06:17,130 >> Untuk var i dalam array, di mana saya masih indeks. 109 00:06:17,130 --> 00:06:20,740 Tetapi anda tidak perlu untuk menentukan panjang pelbagai dot 110 00:06:20,740 --> 00:06:23,310 keadaan, dan saya plus plus. 111 00:06:23,310 --> 00:06:26,140 Lokasi setiap penumpang adalah diberikan oleh tanda tempat mereka. 112 00:06:26,140 --> 00:06:29,800 >> Tetapi tanda tempat itu tidak di latitud dan longitud. 113 00:06:29,800 --> 00:06:34,575 Kita perlu mengakses mereka parameter oleh mendapatkan geometri, menggunakan get 114 00:06:34,575 --> 00:06:35,900 geometri pada tanda tempat itu. 115 00:06:35,900 --> 00:06:39,630 Dan kemudian sebaik sahaja kami mempunyai geometri, mendapatkan sama ada latitud atau 116 00:06:39,630 --> 00:06:42,600 longitud, dengan menggunakan fungsi-fungsi itu. 117 00:06:42,600 --> 00:06:45,680 >> Jadi sekarang kita tahu bagaimana untuk mengesan sama ada penumpang berada dalam 118 00:06:45,680 --> 00:06:47,920 pelbagai perkhidmatan ulang-alik kami. 119 00:06:47,920 --> 00:06:52,050 Apabila kita mempunyai orang-orang penumpang, kita akan mahu menambah mana-mana penumpang yang 120 00:06:52,050 --> 00:06:53,140 dalam julat itu. 121 00:06:53,140 --> 00:06:57,580 Kami mahu membenarkan mereka untuk naik, dan mengambil tempat duduk pada kapal kita, tetapi hanya 122 00:06:57,580 --> 00:06:59,640 jika kita mempunyai ruang yang cukup untuk mereka. 123 00:06:59,640 --> 00:07:04,120 >> Tempat duduk ulang-alik dot array akan menunjukkan sama ada tempat duduk kosong, atau 124 00:07:04,120 --> 00:07:05,890 yang dalam tempat itu. 125 00:07:05,890 --> 00:07:11,170 Jadi, jika kerusi yang kosong, maka tempat duduk yang akan batal. 126 00:07:11,170 --> 00:07:15,930 Jadi melelar lebih pelbagai tempat duduk, memeriksa tempat duduk kosong, menyimpan 127 00:07:15,930 --> 00:07:20,020 penumpang ke kerusi-kerusi sehingga anda tidak mempunyai apa-apa kerusi lebih kosong. 128 00:07:20,020 --> 00:07:23,330 Dan malangnya, mana-mana penumpang lain perlu menunggu 129 00:07:23,330 --> 00:07:26,000 lain kali ulang-alik datang sekitar. 130 00:07:26,000 --> 00:07:30,280 >> Sebaik sahaja mereka mendapatkan di ulang-alik, kita akan mahu untuk membuang tanda tempat mereka, yang 131 00:07:30,280 --> 00:07:32,540 adalah gambar mereka di dunia 3D. 132 00:07:32,540 --> 00:07:38,030 Jika saya mahu membuang tanda tempat p, maka saya akan mendapat semua ciri-ciri 133 00:07:38,030 --> 00:07:42,790 dari bumi saya, dari Google Earth, dan kemudian keluarkan bahawa tempat tertentu 134 00:07:42,790 --> 00:07:45,910 menandakan menggunakan fungsi removeChild itu. 135 00:07:45,910 --> 00:07:51,360 Kemudian akhir sekali, mari kita membuang penanda, ikon pada peta 2D bagi apa-apa 136 00:07:51,360 --> 00:07:53,650 penumpang bahawa kita meningkat. 137 00:07:53,650 --> 00:07:59,790 Untuk mengeluarkan penanda, m, maka saya akan hanya melaksanakan m dot setMap null. 138 00:07:59,790 --> 00:08:02,920 Adakah ini untuk mana-mana penumpang dalam liputan, dan anda selesai pikap. 139 00:08:02,920 --> 00:08:05,056