>> ZAMYLA CHAN: Nah, di sini kita, p-set terakhir dalam CS50.
Ucapkan selamat diri dari memiliki datang dari jauh sejak Hello pertama Anda
Dunia dan Percetakan Up Piramida untuk Mario.
Anda membuat sebuah website pekan lalu.
Dan kita akan membuat satu sama lain minggu ini, salah satu yang memungkinkan Anda untuk
berkeliling kampus Harvard, memilih up anggota staf CS50 dan
membawa mereka kembali ke mereka rumah tinggal.
>> Sekarang, minggu lalu kami bekerja di PHP, bahasa sisi server.
Untuk ini p-set, kita mendapatkan diperkenalkan untuk JavaScript, yang merupakan
bahasa sisi client.
Jadi mari kita lihat beberapa kode distribusi yang diberikan kepada
Anda untuk ini p-set.
Dalam folder JavaScript, akan ada menjadi sekelompok file JavaScript.
>> Ada buildings.js, yang berisi array bangunan di sekitar Harvard
kampus dengan informasi mereka dan posisi.
Houses.js adalah array dari Harvard rumah tinggal dengan mereka
lintang dan bujur.
Passengers.js berisi array penumpang, anggota staf CS50
bahwa Anda akan membawa kembali ke rumah tinggal mereka.
>> Math3D.js, yang berisi banyak fungsi yang harus dilakukan dengan gerakan.
Jika Anda berpikiran matematis, maka Saya menyambut Anda untuk melihat.
Tapi Anda tidak perlu memahami segala sesuatu di sana.
Shuttle.js, yang berhubungan dengan gerakan Shuttle itu.
Dan index.html adalah halaman rumah di mana segala sesuatu terjadi, benar-benar, di mana
pengguna berinteraksi dengan situs.
>> Service.css adalah style sheet CSS, yang di samping Twitter
Perpustakaan Bootstrap, kontrol bagaimana index.html terlihat.
Dan kemudian kami juga memiliki service.js, yang berisi fungsi layanan untuk
yang Shuttle.
Dan inilah di mana Anda akan menjadi mengisi di beberapa to-do.
>> Sekarang mari kita lihat benda-benda dan array asosiatif di JavaScript,
yang, untuk semua maksud dan tujuan, yang dipertukarkan.
Jika saya ingin membuat sebuah objek variabel disebut tongkat sihir, saya akan
mendeklarasikan.
Dan di dalam kurung kurawal tersebut, saya akan tentukan, inti adalah unicorn, kayu
adalah cherry, dan panjangnya 13.
>> Sekarang, saya juga dapat mengakses nilai-nilai obyek menggunakan
notasi array asosiatif.
Inti indeks Jadi tongkat, saya dapat mengatur yang sama dengan unicorn, atau
memeriksa bahwa jika saya perlu.
Atau aku bisa menggunakan operator dot wand.wood sama cherry, dan
seterusnya dan sebagainya.
Jadi, Anda melihat bahwa array asosiatif dan objek dalam JavaScript akan menjadi
dipertukarkan, dan akan datang sangat berguna.
>> Kemudian kita melihat berbagai bangunan di buildings.js,
lagi, array obyek.
Jika saya ingin membuat sebuah array dari yang terbaik bangunan di kampus Harvard, kemudian
Aku akan membuatnya sebagai berikut.
Menggunakan notasi objek ini, di mana Saya menyimpan akar, nama, alamat,
lintang, bujur dan untuk setiap satu objek bangunan.
>> Mari kita cepat berbicara tentang variabel dalam JavaScript.
Seperti PHP, variabel JavaScript yang lemah atau longgar diketik.
Untuk membuat variabel lokal, Anda awalan nama variabel dengan V-A-R, var.
Sekarang, dalam JavaScript, fungsi akan membatasi ruang lingkup variabel.
Jadi jika Anda memiliki sebuah variabel lokal dalam fungsi, maka fungsi lainnya
tidak bisa mengaksesnya.
>> Tapi tidak seperti C, loop dan kondisi tidak membatasi ruang lingkup variabel.
Jadi bahkan jika Anda menyatakan hal itu dalam sebuah kondisi, seluruh fungsi akan
memiliki akses ke sana.
Sekarang, tanpa var, variabel akan global.
Jadi, jika Anda hanya menyatakan nama dan menetapkan nilai, maka variabel yang
akan menjadi variabel global dalam JavaScript.
>> Sekarang, di rumah-rumah, kita memiliki asosiatif array objek jenis host, di mana
setiap rumah hanya garis lintang dan bujur a.
Kemudian kita memiliki penumpang array, yang merupakan array
jenis objek penumpang.
Jadi setiap penumpang memiliki user nama, nama, dan rumah.
>> Perhatikan bahwa saya katakan jenis penumpang, yang benar-benar hanya berarti
bahwa setiap benda memiliki pasangan nilai kunci yang sama.
Jadi setiap objek dari tipe penumpang memiliki nama pengguna, nama, dan rumah.
Jadi apa yang kita butuhkan untuk lakukan untuk p-set?
Nah, kita perlu untuk memungkinkan pengguna untuk memilih up anggota staf, untuk menampilkan semua
anggota staf yang sedang dalam pesawat kami, dan untuk menjatuhkan mereka.
Dan kemudian kami juga akan berbicara tentang ekstra fitur yang dapat diterapkan untuk
yang Shuttle p-set.
>> Tapi mari kita bicara tentang pickup pertama.
Wajah-wajah staf CS50 telah ditanam di seluruh kampus, di mana masing-masing
wajah diimplementasikan sebagai tanda tempat pada Earth 3D, dan sebagai
penanda di peta 2D.
Jadi ketika pengguna mengklik Pickup tombol, kita ingin menambahkan sekitar
penumpang untuk pesawat ulang-alik.
Dan kami juga ingin menghapus tempat mereka menandai dari dunia dan menghapus mereka
penanda dari peta, menunjukkan bahwa mereka berada di pesawat kami sekarang.
>> Jadi bagaimana kita mendeteksi jika penumpang berada dalam jangkauan pesawat kami?
Nah, jarak fungsi, sehingga shuttle.distance, lewat di
lintang dan bujur, akan menghitung jarak dari posisi saat ini
dari pesawat ulang-alik ke titik yang Anda tentukan dengan yang diberikan
lintang dan bujur.
Jadi, Anda dapat menggunakan ini untuk menghitung jarak dari pesawat ulang-alik ke
penumpang.
>> Tapi bagaimana Anda tahu di mana para penumpang?
Nah, di situlah kita harus mengedit fungsi populate.
Mengisi tempat semua anggota staf penumpang ke dunia
dan ke dalam peta, tetapi tidak menyimpan lokasi mereka.
Jadi mungkin Anda dapat menyimpan mereka menempatkan tanda dan spidol
dalam beberapa array yang global.
>> Sekarang, sudah ada adalah array global menyimpan informasi dari penumpang.
Toko penumpang Array masing-masing nama penumpang dan rumah mereka.
Jadi mungkin Anda dapat menambahkan beberapa parameter ada ke objek penumpang.
>> Untuk membantu kita mendeteksi semua penumpang dalam jangkauan kami
shuttle, lingkaran mari kita melalui semua penumpang di penumpang array.
A untuk loop dalam JavaScript mungkin terlihat sesuatu seperti ini, sangat mirip dengan
mereka untuk loop di C. Atau kita bisa menggunakan alternatif untuk struktur loop, untuk
var i di array, di mana saya akan tetap indeks, tetapi Anda tidak perlu
tentukan array.length yang kondisi dan i + +.
>> Lokasi setiap penumpang adalah diberikan oleh tempat tanda mereka.
Tapi tempat mark tidak lintang dan bujur.
Kita harus mengakses parameter dengan mendapatkan geometri, menggunakan get
geometri pada tempat yang ditandai, dan kemudian setelah kita memiliki geometri, mendapatkan
baik lintang atau bujur menggunakan fungsi-fungsi.
>> Jadi sekarang kita tahu bagaimana untuk mendeteksi apakah penumpang berada dalam
berbagai pesawat kami.
Setelah kita memiliki orang-orang penumpang, kita akan ingin menambahkan penumpang yang
dalam kisaran tersebut.
Kami ingin memungkinkan mereka untuk naik dan mengambil kursi di pesawat kami, tetapi hanya
jika kita memiliki cukup ruang untuk mereka.
>> The shuttle.seats array akan menunjukkan apakah kursi kosong, atau
siapa di kursi itu.
Jadi, jika kursi kosong, maka kursi yang akan null.
Jadi iterate atas kursi array, memeriksa kursi kosong, menyimpan
penumpang ke kursi tersebut sampai Anda tidak memiliki kursi lebih kosong.
Dan sayangnya, setiap penumpang lain akan harus menunggu untuk
kali pesawat ulang-alik turun.
>> Setelah mereka mendapatkan pada pesawat ulang-alik, kita akan ingin untuk menghapus tanda tempat mereka, yang
adalah foto mereka di dunia 3D.
Jika saya ingin menghapus tempat mark p, maka saya akan mendapatkan semua fitur
dari Bumi saya, dari Google Earth, dan kemudian menghapus tempat tertentu
menandai menggunakan fungsi removeChild.
Kemudian yang terakhir, mari kita menghapus penanda, ikon pada peta 2D, untuk setiap
penumpang bahwa kita mengambil.
>> Untuk menghapus penanda m, maka aku akan hanya menjalankan m.setMap null.
Lakukan ini untuk setiap penumpang dalam jangkauan, dan Anda selesai pickup.
Fungsi grafik harus menampilkan semua penumpang yang ada di Anda
shuttle, dan kursi kosong jika kosong.
Jadi grafik harus iterate atas shuttle.seats, menampilkan
informasi penumpang untuk setiap indeks, dan kursi kosong jika indeks yang null.
>> Sekarang jika teks HTML diletakkan dalam sebuah JavaScript variabel, maka dengan menggunakan
document.getElementById, grafik dapat mengedit HTML batin yang diberikan
elemen dengan menempatkan Teks HTML ke
document.getElementById variabel HTML batin.
Ketika pengguna mengklik tombol drop Off di index.html, itu akan memanggil
fungsi penurunan.
Dan itu tugas kita untuk melaksanakan itu.
>> Dalam dropoff, kita akan ingin menghapus penumpang dari pesawat ulang-alik hanya jika
kita berada dalam jangkauan tujuan mereka, rumah tempat tinggal mereka.
Jadi dropoff harus memeriksa apakah pesawat ulang-alik adalah dalam kisaran dari salah satu
rumah, dan menghapus dibutuhkan penumpang dari pesawat ulang-alik.
Jadi bagaimana kita memeriksanya jika kita di berbagai rumah apapun?
Nah, sekali lagi, kami akan memanfaatkan shuttle.distance fungsi, lewat di
garis lintang dan bujur dari titik bahwa kita sedang memeriksa melawan.
>> Tapi apa adalah titik?
Nah, rumah-rumah array, jika Anda ingat di houses.js, menyimpan
lintang dan bujur masing-masing rumah di array asosiatif, di mana setiap
Indeks adalah nama dari rumah itu.
Kemudian untuk menghapus penumpang -
baik, hanya jika kita berada dalam jangkauan mereka rumah yang mereka ingin pergi ke.
Jadi sekali lagi, ingat bahwa penumpang menyimpan rumah bahwa setiap penumpang
ingin pergi ke.
Jika mereka berada dalam jangkauan mereka rumah, maka kami akan menghapus bahwa
penumpang dari shuttle.seats dan set posisi mereka dalam array ke null.
>> Sekarang mari kita bicara tentang beberapa fitur tambahan yang dapat diterapkan di
yang CS50 Shuttle p-set.
Ada sistem poin dimana Anda melacak berapa banyak
menunjukkan pengguna memiliki.
Untuk mengantar penumpang berhasil, mereka bisa mendapatkan poin.
Tapi untuk mencoba untuk menurunkan penumpang di mana tidak ada rumah pun di dekatnya,
baik, mereka bisa mendapatkan sanksi untuk itu.
Jadi mungkin Anda ingin melacak poin dalam variabel global.
>> Anda dapat menerapkan mungkin timer, di mana pengguna memiliki sejumlah
waktu untuk mengambil dan drop off sejumlah penumpang.
Mungkin bahkan mengintegrasikan ini dengan sistem poin.
Atau Anda dapat Mengedit Bagan sehingga penumpang diurutkan menurut rumah.
Sehingga mungkin akan menjadi semacam sebuah berfungsi untuk shuttle.seats.
>> Anda dapat menerapkan fitur terbang, di mana jika pengguna memasukan Konami
kode, maka pesawat lift off tanah dan pesawat bisa terbang.
Tapi untuk drop off yang aman, terbaik untuk membuat pesawat mendarat roda terhadap
tanah pertama.
Anda juga dapat menerapkan teleportasi, di mana Anda membuat daftar drop-down
bangunan di index.html.
Dan memilih salah satu dari mereka, yang pengguna akan diangkut ke
bahwa bangunan di kampus.
OK, meskipun, untuk melakukan perjalanan melalui dinding beberapa
bangunan di jalan di sana.
>> Anda juga dapat mengubah kecepatan shuttle, yang memungkinkan pengguna untuk meningkatkan
atau mengurangi kecepatan.
Mungkin Anda ingin variabel global untuk melacak berapa banyak bahan bakar
shuttle memiliki, penurunan sebagai Anda pergi bersama.
Setelah Anda mencapai nol, meskipun, pesawat ulang-alik tidak akan bisa bergerak kecuali jika Anda sudah
mengisi bahan bakar, mungkin dengan menggunakan tombol, atau bahkan membuat pompa bensin Anda sendiri.
>> Tapi itu pasti tidak daftar lengkap.
Periksa spesifikasi untuk penuh daftar, atau mungkin mengusulkan
Anda sendiri untuk TF Anda.
Langit adalah batas.
Ini adalah terakhir CS50 p-set Anda, sehingga bersenang-senang dengan itu.
Ini adalah CS50 Shuttle.
>> Saya harus mengatakan, itu menjadi kesenangan membuat ini untuk Anda dengan
tim produksi.
Dan saya berharap bahwa Anda telah menikmatinya, juga.
Nama saya adalah Zamyla.
Dan ini adalah CS50.