[Powered by Google Translate] [Minggu 9, Lanjutan] [David J. Malan - Universitas Harvard] [Ini adalah CS50. - CS50.TV] 

Ini adalah CS50. Ini adalah akhir minggu 9. Terima kasih banyak. Akhirnya. Minggu 9. Aku mendapatkannya. Hari ini kita melanjutkan pembicaraan kita tentang pemrograman web dengan mata ke arah proyek akhir, bukan karena Anda harus melakukan sesuatu berbasis web untuk proyek-proyek akhir tetapi karena baik untuk proyek akhir atau setelah CS50 ini tentu arah di mana perangkat lunak modern yang terjadi. Namun itu tidak benar-benar suatu hal yang mudah. Bahkan, salah satu hal yang paling sulit untuk dilakukan adalah aspek desain. 

Misalnya, dengan desain berarti kita benar-benar mendapatkan user interface atau pengalaman pengguna yang tepat. Saya berani bilang - dan kita tahu dari satu set masalah baru-baru ini ketika beberapa dari Anda ditayangkan keluhan Anda tentang beberapa bagian dari perangkat lunak atau perangkat keras yang membuat marah Anda, baik di kampus atau off - ada banyak situs di luar sana, ada banyak perangkat keras di luar sana, semacam itu menyebalkan. Tetapi kenyataannya adalah bahwa membuat hal-hal yang mudah digunakan namun yang tetap kuat adalah tantangan yang sangat sulit. Jadi untuk hari ini saya meminta Yusuf dan Tommy untuk bergabung dengan saya di sini sehingga kita dapat memiliki percakapan, baik mengenai desain dan apa jenis proses berpikir harus mulai akan melalui kepala Anda ketika Anda merancang proyek akhir Anda, usaha masa depan Anda. Dan kemudian dengan bantuan Tommy kita akan melihat beberapa rincian pelaksanaan. Bagaimana Anda bisa memiliki beberapa penglihatan di atas kertas atau dalam pikiran Anda yang kemudian dapat mengeksekusi pemrograman dengan menggunakan beberapa teknologi dan teknik yang baru saja kita mulai berbicara tentang, yaitu JavaScript dan sesuatu yang bahkan lebih baru, yaitu AJAX, JavaScript asynchronous. Yang memungkinkan Anda untuk membuat semua lebih dinamis dari antarmuka pengguna dengan mengambil data yang lebih banyak dan lebih progresif dari server. Jadi kita akan melihat beberapa dari mereka juga potongan hari. Sebagai samping, jika Anda tertarik untuk berkonsentrasi dalam ilmu komputer atau minoring dalam ilmu komputer, tahu bahwa Jumat ini pada siang hari di Maxwell Dworkin 221 akan ada acara pizza di mana Anda dapat mempelajari lebih banyak tentang ilmu komputer. Di jalan keluar pintu hari ini Anda akan dapat mengambil sebuah panduan tidak resmi ke CS di Harvard. Kami akan meletakkannya di tong sampah luar pada ketinggian pinggang sehingga jika Anda ingin ambil ini dan belajar sedikit lebih banyak tentang CS, yang akan berada di sana untuk Anda seperti di minggu 0. Juga jika Anda ingin bergabung dengan kami untuk makan siang CS50 Jumat ini di 1:15 pm, kepala ke cs50.net/lunch. Tanpa basa-basi lagi, saya memberikan pengajaran sesama Joseph Ong. Hi. [Tepuk tangan] Terima kasih. Pertama kali saya belajar tentang desain berada di kelas yang di sini disebut CS179. 

Profesor pada saat itu mengatakan kepada kami kisah tentang dosen lain yang telah pergi ke hotel dan menggunakan kran. Bisa ada yang bilang padaku apa yang 2 tombol di sebelah kiri dan kanan lakukan? [Mahasiswa] panas dan dingin. >> Panas dan dingin. Baik. Apa yang biasanya Anda harapkan, kan? Ini profesor setelah menggunakan keran ingin mandi, dan ia melanjutkan untuk menggunakan ini. Menurutnya kiri dan sisi kanan adalah untuk panas dan dingin, kan? Tapi bisa ada yang bilang padaku apa yang benar-benar melakukannya? Setiap tangan? [Respon siswa terdengar] >> Salah satu saran adalah? [Respon siswa terdengar] Suhu >>? Jadi salah satu dari mereka mengontrol suhu dan kontrol lainnya? >> [Mahasiswa] Tekanan air. Tekanan air. Baik. Professor ini berjalan ke dalam ini dan, berpikir mereka mengendalikan panas dan dingin, ternyata yang benar, yang menurutnya adalah untuk panas, sepanjang jalan sampai karena dia ingin mengambil mandi hangat. Nah, ini tidak benar-benar cocok, sehingga dia mendapat pengalaman ini tidak sangat menyenangkan berada di mandi air dingin, dan kita semua tahu apa yang terasa seperti. Ini adalah contoh dari sebuah cacat desain. Yang saya maksud dengan itu adalah harapannya dari keran tidak cocok dengan apa yang keluar dari kamar mandi, yang merupakan jenis disayangkan untuknya. Jadi ini adalah contoh dari sebuah cacat desain yang terjadi dalam kehidupan nyata. Tapi kita melihat segala macam yang lain juga. Kita mungkin tidak penggemar dari sistem MBTA. Ini adalah sistem kereta bawah tanah sebenarnya di London, yang mengatakan, "Tombol ini tidak digunakan." Mengapa bahkan di sana? Mengapa kita peduli? Ketika aku masih kecil, menjadi orang tech savvy di rumah, setiap kali komputer akan crash, ibuku akan datang kepada saya, menunjukkan kepada saya layar ini dan bertanya padaku apa yang terjadi. 

Bahkan aku tidak tahu apa artinya ini. [Tertawa] Apa? [Tertawa] Kadang-kadang kita merasa seperti pengembang perangkat lunak hanya trolling kita. Sebagai pengguna kita seperti, "Apa yang terjadi Seseorang memberitahu kami.?" Ini semua bermuara pada masalah desain. Desain, seperti yang kita bisa lihat, tidak murni tentang estetika, ini bukan tentang bagaimana hal-hal terlihat. Kita lihat di sini bahwa ini sedikit pop-up di sini benar-benar terlihat cukup bagus. Memiliki drop shadow di latar belakang, ia memiliki radiuses perbatasan terjadi. Ini semacam cantik. Ini tidak benar-benar dirancang dengan baik karena tidak sangat user friendly. Itu sedikit pop-up yang muncul tidak benar-benar memberikan informasi apapun tentang apa yang terjadi, ia tidak memberitahu apa-apa sebagai pengguna tentang bagaimana untuk pulih dari kesalahan itu. Kami ingin untuk berpikir tentang hal-hal yang desain tidak. Pertama, itu bukan estetika. Ini juga tidak memasukkan aplikasi Anda dengan ton fungsi yang tidak perlu. Jika Anda restoran Thailand, Anda mungkin tidak ingin menjadi seorang dokter gigi pada waktu yang sama. Dan dengan Pertanyaan Facebook, tidak banyak orang menggunakannya dan itu tidak benar-benar pada inti dari apa yang mereka sedang membangun. Dan jadi itu bagus untuk berpikir tentang tidak begitu banyak jumlah hal-hal bahwa Anda menempatkan ke aplikasi Anda, tetapi kualitas dan bagaimana Anda membuat bahwa pengalaman pengguna yang lebih baik dengan benar-benar meningkatkan pada apa yang sudah Anda miliki. 

Singkatnya, desain memberitahu kita apa yang kita harus membangun. Sebagai contoh, jika kita sedang membangun sesuatu yang mari kita mencari hal-hal, seperti Google, misalnya, kita harus melakukan hal-hal dengan cara yang mengharuskan pengguna untuk mengambil banyak klik untuk mendapatkan apa yang mereka inginkan, atau sebaiknya kita melakukannya dengan cara, misalnya, dengan Google Instan atau autocomplete yang memungkinkan kita mendapatkan hasil kita lebih cepat? Teknik melibatkan, seperti Tommy akan menunjukkan kepada Anda, sebenarnya bangunan itu. Ada banyak jenis desain. Misalnya, jika Anda sedang membangun sesuatu untuk menyebarkan sesuatu di negara Dunia Ketiga di mana tidak ada listrik banyak atau bahwa teknologi banyak, Anda harus merancang apa yang Anda sedang membangun dengan cara yang mudah memberikan akses kepada orang-orang di sana. Tapi apa macam keputusan desain lain mungkin ada atau mungkin terlibat dalam hal seperti ini? Ya. Saya melihat tangan. [Respon siswa terdengar] Kanan >>. Tepat. Aksesibilitas adalah satu hal. Banyak orang tidak berpikir tentang, "Bagaimana dengan pengguna saya?" seperti ekstrem dari spektrum baik. Saya memiliki pengguna yang mungkin memiliki cacat bahwa aku tidak berpikir tentang dan aku hanya berpikir tentang merancang untuk pengguna umum. Internet dapat diakses oleh semua orang saat ini, dan saya harus merancang untuk orang-orang juga. Apa macam keputusan desain lain mungkin Anda buat? Ya. >> [Mahasiswa] Biaya. Biaya. Sangat baik. Hal lain yang mungkin kita mendasarkan keputusan kami pada desain adalah biaya. Jika kita bisnis, Anda ingin membangun sesuatu yang tidak mengambil biaya banyak untuk menghasilkan tetapi bisa menjual dengan biaya yang sangat tinggi atau bisa mendapatkan beberapa keuntungan kita. 

Ini semua adalah jenis desain, tetapi ketika kita sedang membangun sesuatu di Internet atau ketika kita sedang membangun sesuatu yang mungkin tidak biaya yang banyak untuk membangun sekarang, seperti aplikasi internet - Anda tidak perlu membuang banyak modal ke dalamnya untuk membuat sesuatu yang benar-benar bekerja - apa yang kita lebih khawatir tentang adalah pengalaman pengguna. Kami menyebutnya desain user berpusat. Pada dasarnya apa yang pengguna desain yang berpusat melibatkan adalah menempatkan diri pada posisi pengguna Anda. Jika seseorang sign up untuk apa yang saya sedang membangun, mereka sudah jelas datang ke aplikasi tertentu saya dengan tujuan dalam pikiran, dengan tugas mereka ingin menyelesaikan. Dan pekerjaan Anda tidak hanya untuk membantu mereka menyelesaikan tugas yang tetapi untuk membantu mereka menyelesaikan tugas itu dengan cara yang efisien, intuitif, dan, seperti yang beberapa orang mengatakan di sana, dapat diakses. Apa artinya efisiensi? Efisiensi berarti seberapa cepat pengguna tidak saya menyelesaikan tugas yang diberikan antarmuka saya. Apakah itu mengambil banyak klik bagi mereka untuk mendapatkan dari satu tempat ke tempat yang lain? Apakah itu membosankan? Apakah mereka harus melakukan banyak tugas yang berulang? Kami ingin membuat proses yang seefisien mungkin sehingga mereka tidak perlu melakukan hal-macam hal. Adapun intuitif, yaitu, misalnya, jika pengguna mendongak antarmuka saya, adalah mudah bagi mereka untuk mendapatkan dari satu tempat ke tempat? Apakah mudah bagi mereka untuk mencari tahu apa yang mereka harus klik pada antarmuka saya dalam rangka bagi mereka untuk mencapai tujuan atau tugas yang ingin mereka capai? 

Dan akhirnya, sebagai salah satu orang di sana mengatakan, aksesibilitas sangat penting. [Laki speaker] Muncul dengan aksesibilitas untuk hal-hal seperti visi, seperti bagaimana saya benar-benar merancang sesuatu untuk seseorang yang buta? Oh. Bagi orang-orang yang tidak bisa melihat sama sekali, kita memiliki sesuatu yang disebut pembaca layar. Apa yang harus Anda lakukan adalah Anda harus membangun website Anda dengan cara bahwa, misalnya, teknologi tertentu apa yang kita sebut - Ada banyak hal sekarang. Saya rasa ada pembaca layar JAWS disebut. Banyak hal-hal ini bergantung pada apa yang kita sebut aturan daerah dalam rangka untuk membacakan kepada pengguna apa yang ada di halaman. Bagi orang-orang yang tidak bisa melihat, Anda perlu memastikan bahwa pembaca layar benar-benar dapat mengambil konten pada halaman dan benar-benar dapat menunjukkan pengguna Anda, jika Anda tidak dapat melihat, setidaknya Anda masih dapat memahami konten pada halaman. Ya. Oke. Cukup berbicara tentang desain yang baik. Mari kita bicara tentang desain yang buruk. Ini adalah hal-hal yang seharusnya tidak Anda lakukan. Bisa ada yang bilang padaku tentang pengalaman mereka dengan Craigslist dan apa yang mereka pikir tidak begitu besar tentang desain ini? Ya. >> [Mahasiswa] saya pikir ada kata terlalu banyak di satu area. Terlalu banyak kata, kan? Benar-benar luar biasa. Anda datang ke halaman ini dan Anda akan disambut dengan sejumlah hal di sini yang mungkin tidak penting bagi Anda. Misalnya, Anda tinggal di satu negara yang tidak dimulai dengan huruf ini. Katakanlah Anda tinggal di Texas atau sesuatu. 

Anda harus gulir semua jalan ke bawah halaman untuk sampai ke lokasi Anda berada di. Saya dari Boston, jadi biar terlihat di Massachusetts. Dimana Massachusetts? Oh, itu ada di sini. Oh, itu Boston. Oke. Mari kita lihat Boston. [Tertawa] Cukup luar biasa, kan? Canggung hal di sana. [Tertawa] Katakanlah saya sedang mencari tempat tinggal. Berapa banyak orang yang benar-benar digunakan Craigslist? Ton Anda. Ada cara yang cukup buruk untuk melihat ini, tapi mari kita lihat ini. Apa perbedaan antara img dan pic? Bisa ada yang bilang padaku? Ada sebenarnya tidak ada perbedaan. Mereka berarti hal yang persis sama, tetapi mereka memiliki label yang berbeda bagi mereka untuk beberapa alasan. Jika saya klik pada Memiliki Gambar, tidak ada yang terjadi pada halaman. Saya benar-benar harus klik Search lagi untuk sesuatu terjadi. Apa yang mungkin menjadi keputusan desain yang lebih baik yang bisa dilakukan di sana? Jika saya mengklik pada filter itu, saya mungkin ingin untuk menyaring oleh tindakan tertentu atau kategori tertentu. Jadi daripada harus tekan Cari lagi, saya bisa saja secara otomatis melakukan penyaringan semacam gaya Google di mana mereka melakukannya langsung. [Malan] Tapi jangan bentuk seperti yang kita lihat sejauh ini mereka harus secara fisik diserahkan dengan menekan Enter setidaknya atau mengklik tombol? Seperti yang Anda telah melihat mereka sejauh ini, Anda benar-benar harus klik Submit untuk melakukan hal-hal. 

Tapi seperti Tommy akan menunjukkan Anda dalam kedua, sebenarnya ada cara bagi Anda seperti bahwa ketika Anda klik pada hal yang secara otomatis dapat mengirim apa yang kita sebut permintaan AJAX dan mendapatkan data kembali dan menyaring hasil Anda secara instan. Ada ton hal-hal yang salah dengan antarmuka ini. [Malan] Dapatkah Anda mencari Cambridge? Ada sesuatu yang sedikit anomali di sini di mana Anda peduli tentang Cambridge namun Anda mendapatkan Westford, Spring Hill, West Newton dan sejenisnya. Mungkin tidak ideal. >> Mungkin tidak ideal. Bagaimana mungkin saya bisa membuat pengalaman pengguna yang lebih baik pada halaman tertentu? Ya. >> [Mahasiswa] Instruksi. Oke. Instruksi dalam apa jenis akal? [Mahasiswa] Sebagai contoh, suatu hal untuk pertama kalinya pengguna yang bahkan tidak tahu apa Craigslist adalah atau Anda tidak tahu apa yang Anda lakukan. Benar. Jadi menjelaskan apa Craigslist adalah di halaman ini adalah penting. Kami benar-benar dapat memberitahu pengguna apa halaman ini sebenarnya untuk. Jika aku hanya mengunjungi ini, saya melihat sejumlah besar lokasi. Aku bahkan tidak tahu apa yang mereka maksud. Tapi yang lebih penting lagi, hanya melihat antarmuka ini, ingat aku harus gulir ke bawah satu ton hal untuk menemukan komunitas tertentu bahwa saya benar-benar peduli tentang hal ini. Apa cara yang lebih cepat aku bisa melakukan itu? Ya. [Mahasiswa] Membagi mereka ke timur, wilayah barat. Oke >>. Saya bisa membagi mereka ke dalam kategori lagi yang bisa membantu saya lebih cepat menentukan bagaimana untuk sampai ke lokasi tertentu. [Mahasiswa] Letakkan daftar drop-down. >> Kanan. Oke. Saya bisa menggunakan menu drop-down karena kita memiliki seperangkat tetap hal-hal dan kami bisa menampilkannya pada menu drop-down. Dengan cara itu tidak memakan begitu banyak ruang pada layar. Tetapi bahkan lebih baik dari itu, apa yang bisa kita lakukan? Ya. >> [Respon siswa terdengar] >> Dapatkah Anda mengatakan itu lagi? >> [Mahasiswa] kotak pencarian. Ya, kotak pencarian. Itu bagus. Apa yang kita benar-benar dapat lakukan adalah jika kita melihat kembali kotak, pencarian slide. Autocomplete. Cara yang sangat mudah untuk mencari melalui hasil yang Anda tahu berada dalam satu set. Jika saya mulai mengetik BO, hanya menunjukkan semua hasil yang telah dalam BO dari mereka. Dengan begitu aku bisa dengan sangat mudah menemukan satu tertentu saya ingin pergi ke daripada harus menelusuri daftar ini benar-benar besar. 

Ini adalah segala macam benar-benar buah tergantung rendah bahwa seseorang yang melaksanakan Craigslist benar-benar dapat lakukan untuk membuat pengalaman di situs jauh lebih baik untuk pengguna tertentu mereka. Oke. Cukup berbicara tentang website yang buruk. Mari kita bicara tentang Facebook. Ketika Facebook keluar, dan khususnya Facebook Foto, ada banyak layanan lain pada waktu yang bisa melakukan hal yang persis sama. Mereka bisa mengatur foto Anda ke dalam album. Apa yang Anda bisa lakukan adalah Anda bisa mengatur mereka ke dalam set juga. Anda bisa mengaturnya berdasarkan tanggal. Anda bisa melakukan semua hal tertentu. Tapi apakah ada yang tahu apa yang membuat Facebook Foto meledak pada saat itu dirilis? Ya. >> [Mahasiswa] Tags. Tags >>. Tepat. Kami memiliki Milo di sini, yang merupakan maskot anjing kami dengan bandana CS50. Anda dapat melihat bahwa kita memiliki fitur tagging di tengah. Dan apa yang membuat Facebook Foto begitu menarik dari sudut pandang kegunaan adalah bahwa hal itu benar-benar memungkinkan orang melalui ini untuk melibatkan teman-teman mereka di foto mereka. Untuk Facebook, karena situs web mereka sangat sosial, ini tentang membangun semacam ini suasana sosial. Itu meningkatkan pengalaman foto lebih banyak karena mereka benar-benar bisa mulai berkata, "Ini adalah hubungan antara orang-orang, dan ini adalah foto tentang orang-orang yang benar-benar peduli. " Bagian dari itu juga narsisisme semacam. Orang-orang ingin diberi tag pada foto dan hal-hal seperti itu. Sementara itu tidak selalu berarti sifat manusia yang baik, pada saat yang sama hal ini didasarkan pada keputusan desain yang baik karena orang benar-benar peduli tentang hal-hal seperti ini. Jadi itulah Foto Facebook. 

Tapi mari kita bicara Facebook lebih umum. Saya yakin banyak orang di sini punya pendapat tentang Facebook, baik keputusan desain yang baik dan keputusan desain yang buruk. Jadi mari kita curhat atau bahagia. Ayo. Saya tahu kalian semua menggunakan Facebook. Seseorang harus memiliki sesuatu yang buruk untuk mengatakan atau sesuatu yang baik untuk mengatakan tentang hal itu. Ya. [Mahasiswa] Dalam feed berita ada banyak hal yang saya tidak benar-benar peduli. Feed berita tidak menunjukkan banyak hal yang Anda mungkin tidak peduli. Anda memiliki teman di Facebook yang Anda belum pernah bertemu selama 2 atau 3 tahun dan Anda melihat hasil berita bermunculan di feed berita Anda dan Anda tidak benar-benar peduli tentang hal itu. Facebook telah benar-benar membuat upaya untuk membuat ini lebih baik, dan mereka sudah benar-benar mencoba untuk mendorong hasil yang relevan dengan bagian atas feed berita akhir-akhir ini sehingga Anda benar-benar melihat hal-hal oleh teman-teman yang relevan dengan Anda atau teman dekat Anda. Ada lagi? Ya. [Respon siswa terdengar] >> Dapatkah Anda mengatakan itu lagi? [Mahasiswa] Iklan relatif tidak mengganggu. >> Dalam arti apa? [Respon siswa terdengar] Mereka tidak memiliki cahaya pada layar, seperti spanduk. Oke. Itu bagus. Jika Anda ingat internet dari 90 - >> [Malan] aku ada di sana. >> Dia ada di sana. [Tertawa] Anda mungkin ingat berkedip latar belakang GIF, gemerlapan hal, GeoCities gaya semacam hal. Itu benar-benar bukan contoh desain yang baik karena itu benar-benar mengganggu dari konten. Seni Yale situs yang digunakan untuk memiliki animasi GIF sebagai latar belakang mereka dan Anda tidak bisa membaca apapun pada halaman, tapi kurasa seseorang benar-benar berbicara dengan mereka dan sekarang itu sedikit berbeda. [Malan] Ini jauh lebih baik sekarang. >> Ini jauh lebih baik sekarang, seperti yang Anda lihat. >> [Malan] Oh yeah. Hanya besar, hanya - Ya. Oke. 

Bagian dari itu juga membuat halaman Anda mungkin sangat minimalis dan sangat dimengerti sehingga hal-hal pada aliran halaman dengan cara yang sangat logis dan tidak mendapatkan di jalan satu sama lain. Macam apa hal-hal lain yang baik tentang Facebook atau buruk tentang Facebook? Mari kita melakukan percakapan desain di sini. Oh. Dimana? Ya. [Mahasiswa] Sistem Timeline baru memungkinkan Anda untuk mencari profil seseorang tentang masa lalu mereka. Ooh, Timeline. Timeline adalah hal yang besar karena memungkinkan Anda tangkai teman Anda kembali ketika mereka berada di sekolah tinggi. Timeline baik karena memungkinkan Anda menyaring melalui konten jauh lebih cepat, itu memungkinkan Anda menemukan hal-hal yang telah dinyatakan diambil Anda waktu yang sangat lama untuk menemukan hanya bergulir ke atas dan ke bawah, naik, naik, naik, naik, naik, seperti mundur dalam waktu. Tapi kemudian ada juga semacam downside untuk itu dalam hal pengalaman pengguna. Apa mungkin itu? Kata besar yang dimulai dengan P-R. >> [Mahasiswa] Privasi. >> Privacy, kan? Privasi adalah masalah besar pengguna pengalaman. Ini adalah salah satu hal yang saya paling benci tentang Facebook sekarang. [Tertawa] [Malan] Seperti apakah saya sekarang. David tidak menyadari hal ini benar-benar terjadi sampai kemarin. Jadi sekarang dia tahu bahwa setiap kali saya chatting padanya aku tahu dia sudah mengabaikan saya. [Malan] Bagian canggung itu aku benar-benar mengabaikannya, dan saya tidak tahu dia tahu aku mengabaikannya. [Tertawa] Privasi adalah masalah besar. Dapatkah orang di sini memberitahu saya apa yang mungkin buruk tentang privasi Facebook selain fakta bahwa mereka melakukan hal-hal seperti ini? Apa itu sangat sulit untuk dilakukan sehubungan dengan Facebook privasi? Itu semacam adalah pertanyaan terkemuka. Ya. >> [Mahasiswa] Sembunyikan foto Anda dari orang-orang tertentu. Benar. Tepat, untuk menyembunyikan foto Anda dari orang-orang tertentu. Mereka memiliki tombol ini, kecil kecil di kanan atas yang memungkinkan Anda mengaktifkan privasi foto. Pilihan privasi mereka sangat bervariasi antara berbagai jenis menu. 

Mereka sudah mendapatkan jauh lebih baik tentang hal itu baru-baru ini, tapi dulu menjadi kasus bahwa setiap kali Anda ingin mencegah teman Anda dari foto melihat, Anda akan harus melalui proses 5-langkah yang sangat rumit menjadi seperti, biarkan aku klik link ini, sekarang biarkan aku klik lagi, biarkan aku klik lagi, biarkan aku menentukan orang tidak dapat melihat foto-foto saya. Itu tidak baik khususnya pada bagian Facebook karena begitu banyak tentang pengalaman pengguna sebenarnya memberi mereka kebebasan untuk mengontrol apa yang orang dapat melihat. Kami menyebutnya kontrol pengguna dan kebebasan. Jika Anda tidak membiarkan pengguna Anda melakukannya dengan cara yang efisien dan intuitif, maka pengalaman pengguna Anda tidak benar-benar besar sekali.  Apakah kalian ingin mengatakan apa-apa tentang Facebook? Bagaimana cara mematikan ini? [Ong] Anda tidak bisa mematikan ini, dan itu adalah kesalahan besar kegunaan pada bagian dari Facebook. Fitur ini - Saya benar-benar melihat ke dalamnya kemarin - itu baik bahwa Anda tidak bisa melakukannya atau itu dikuburkan di suatu tempat yang sangat, sangat dalam dalam relung Facebook karena saya tidak bisa mencari cara untuk menonaktifkan fungsi ini sama sekali. [Malan] Tapi kadang keputusan ini tidak jelas karena kalian telah memberikan banyak umpan balik yang berguna tentang berbagai aplikasi CS50 dan tentu saja website yang menggunakan. Kami belum menerapkan semua permintaan dan saran. 

Bagian dari itu adalah untuk mendapatkan begitu banyak permintaan bahwa itu adalah fungsi waktu, tapi kadang-kadang kita hanya membuat keputusan sadar seperti, "Terima kasih untuk saran, tapi kami tidak setuju." Jadi bagaimana Anda benar-benar memutuskan apa yang harus Anda lakukan jika pengguna Anda pikir Anda harus melakukan sesuatu bahkan jika Anda tidak selalu? Ini adalah keseimbangan yang baik antara benar-benar mendengarkan apa yang Anda katakan pengguna dan benar-benar memiliki semacam garis di mana Anda berkata, "Kami tidak akan melakukan apa yang pengguna katakan." Dan khususnya, saya pikir ada sebuah kutipan oleh Henry Ford yang meringkas ini cukup baik. "Jika saya telah meminta orang apa yang mereka inginkan, mereka akan mengatakan mereka ingin kuda lebih cepat." Can anyone semacam menggoda selain apa kutipan yang benar-benar berarti? Ini bukan hanya bahwa pengguna tahu apa yang mereka inginkan, tapi lebih bahwa - [Mahasiswa] Mereka tidak tahu apa yang mungkin. Dalam bagian mereka tidak tahu apa yang mungkin. Tease bahwa selain sedikit lebih. Apa yang Anda maksud dengan itu? [Respon siswa tidak terdengar] Itu bagus. Apa yang saya pikir kita coba katakan di sini adalah bahwa orang tahu apa yang mereka inginkan. Mereka ingin kuda lebih cepat. Apa yang mereka inginkan adalah kemampuan untuk bergerak lebih cepat, tetapi mereka tidak benar-benar tahu media yang digunakan untuk mencapai itu. Ketika Anda datang ke pengguna Anda dan pengguna Anda mengatakan sesuatu dan mereka memberitahu Anda, "Kami ingin fitur ini dan fitur ini dan fitur ini," Anda tidak ingin selalu memikirkan, "Biarkan aku pergi ke depan "Dan menerapkan apa yang mereka secara eksplisit mengatakan," tetapi apa yang Anda ingin untuk berpikir tentang adalah, "Apa macam ide yang bisa saya dapatkan dari itu?" Apa yang mereka benar-benar ingin? 

Dan dari sana apa yang dapat Anda lakukan adalah merancang sesuatu yang memenuhi permintaan tersebut tetapi tidak harus dalam cara bahwa pengguna mengharapkan untuk menjadi puas. Jadi untuk sesuatu seperti proyek akhir, dalam hal yang sangat nyata, apa heuristik berguna ketika datang untuk membuat sesuatu yang lebih baik, terutama jika desainer memiliki arogansi ini tentang dia dimana Anda semacam tahu apa yang terbaik, Anda dapat mengambil masukan dari pengguna Anda, tapi bagaimana Anda benar-benar pergi tentang mendapatkan umpan balik itu? Dalam proyek akhir, sangat konkret, apa yang menghasilkan hasil yang optimal di sini? Apa yang menghasilkan hasil yang optimal - dan saya akan pergi selama ini dalam kedua - ini proses pengembangan dan kemudian menguji dan kemudian iterasi. Yang saya maksud dengan pengujian biasanya ketika Anda merancang sesuatu Anda pikir itu cukup baik, seperti, "Saya seperti seorang desainer yang hebat. Setiap orang akan menyukai ini." Dan kemudian Anda meletakkannya di luar sana dan orang-orang tidak benar-benar menyukainya karena alasan tertentu. Apa yang harus Anda lakukan adalah Anda harus mengambil bagian dari hal-hal yang orang lakukan seperti dan merubah hal-hal yang orang tidak suka. Kedengarannya seperti proses yang sangat jelas, tapi ini proses terus iterasi di atas apa yang sudah dibangun adalah proses yang membantu Anda tidak hanya memperbaiki kemampuan Anda sendiri desain, tetapi juga membantu Anda menyempurnakan desain sehingga orang benar-benar menghargai produk Anda bahkan lebih dari yang mereka lakukan sebelumnya. 

Aku akan pergi ke contoh yang lebih konkrit dari apa yang Anda mungkin benar-benar lakukan. Sebagai semacam contoh terakhir dari produk, mari kita lihat KAYAK. KAYAK ketika keluar itu sangat, sangat populer. Adakah yang bisa menebak kenapa? Apa macam hal yang Anda sukai tentang hal ini jika Anda telah menggunakannya atau apa saja macam hal yang tidak Anda sukai? Ya. >> [Respon siswa terdengar] >> Oke. Itu bagian dari itu adalah membiarkan pengguna memiliki permintaan yang lebih luas dari yang sangat ketat seperti, "Kamu harus memilih tanggal mulai "Dan Anda harus memilih tanggal akhir Anda." Bahkan, itu memungkinkan Anda menjadi fleksibel tentang hal itu dan memberikan Anda semua penerbangan dalam kisaran tersebut. Ada lagi? [Mahasiswa] Mereka termasuk biaya dalam harga. Mereka termasuk biaya dalam harga. Pajak dan hal-hal benar-benar pergi langsung ke harga yang di kiri atas sehingga Anda tidak tertipu untuk berpikir bahwa Anda benar-benar membayar untuk penerbangan $ 240 ketika itu benar-benar $ 330. Ada lagi? Ya. [Respon siswa tidak terdengar] Saya tidak yakin apakah mereka benar-benar membiarkan Anda melakukan itu. Saya mungkin salah. Itu mungkin menjadi hal yang menarik jika Anda ingin menempatkan lebih berat pada filter tertentu sehingga mereka mendorong hasil yang terkait dengan saringan ke atas. Tapi bisa ada yang bilang padaku apa yang begitu istimewa tentang sisi kiri? Bagaimana Anda biasanya mencari penerbangan pada layanan internet sebelum ini? 

Ya. >> [Respon siswa terdengar] >> Dapatkah Anda mengatakan bahwa - [Mahasiswa] Setiap maskapai penerbangan. >> Ya. Setiap maskapai penerbangan memiliki website sendiri. Ini mengkonsolidasikan hal. Dan? [Mahasiswa] Anda tahu persis apa waktu Anda akan pergi. Anda tahu persis apa waktu Anda meninggalkan, namun terkait dengan filter pada khususnya. Biarkan saya berhenti KAYAK. Oh Tuhan, pop-up. Pengalaman pengguna yang buruk. Apa yang terjadi ketika saya memindahkan slider ini? [Mahasiswa] Pembaruan otomatis. >> [Ong] update otomatis. Itu adalah sesuatu yang sangat penting. Sebelum ini, setiap kali Anda ingin mencari penerbangan, Anda harus dimasukkan ke dalam lokasi masukan Anda, lokasi output Anda, tekan Cari, akan memproses dan menampilkan hasil pencarian. Jika Anda ingin mengubah permintaan Anda, Anda akan harus menekan kembali dua kali, masuk dalam permintaan baru dari awal, dan kemudian melakukannya lagi dan lagi. Yang menyenangkan tentang sesuatu seperti ini adalah menggunakan hal yang sangat [dimengerti] di tengah. Setiap kali Anda melakukan sesuatu seperti ini, ia tiba-tiba permintaan dan ia mengembalikan Anda semua hasil dengan segera. Ini semacam umpan balik langsung adalah sesuatu yang membuat KAYAK sangat populer karena itu benar-benar mudah bagi saya untuk hanya mengubah pertanyaan saya dan untuk mengetahui hal-hal yang ada di sekitar rentang tertentu tanpa harus bolak-balik, bolak-balik, bolak-balik. Jadi ini adalah segala macam hal yang ingin Anda pikirkan ketika Anda sedang merancang situs web Anda. Bagaimana saya bisa membuatnya sangat efisien untuk pengguna saya untuk pergi melalui apa pun yang mereka kerjakan dan untuk sampai ke tujuan akhirnya mereka secepat mungkin? [Malan] Dan titik Yusuf sebelumnya tentang pengguna tidak selalu mengetahui apa yang mereka inginkan, berdasarkan apa yang kalian ketahui tentang HTML dan Anda memiliki kotak centang, tombol radio, menu pilih, field input dan sejenisnya, bagaimana Anda akan menerapkan gagasan memilih waktu mulai untuk penerbangan? 

Mana yang mekanisme UI berbagai yang akan Anda gunakan? Jika Anda hanya tahu jumlah HTML yang diajarkan sebelumnya dan Anda tahu input tombol radio, kotak centang, drop-down, dan kotak input, apa yang akan pilihan alami Anda telah untuk memilih tanggal? [Mahasiswa] Input. >> Masukan. Atau mungkin bahkan drop-down dengan semua tanggal, kan? Jadi dengan mekanisme UI lebih kompleks seperti ini di sisi kiri yang dapat menerapkan, Anda dapat membuat proses ini lebih intuitif dengan slider karena waktu kontinu, dan orang biasanya tidak berpikir tentang hal itu dalam pengertian potongan diskrit. Baiklah. Terakhir hal. Sepuluh kegunaan heuristik. Semua hal yang kita bicarakan mungkin termasuk dalam salah satu kategori ini. Jika Anda pergi ke link ini, dimana situs akan diposting online, Anda benar-benar akan bisa, karena Anda merancang situs Anda, menjaga heuristik dalam pikiran dan ini aturan praktis. Untuk proyek Anda, apa yang saya sarankan Anda lakukan dalam rangka untuk merancang aplikasi Anda lebih baik adalah untuk melakukan prototyping kertas pertama. Ketika Anda berpikir tentang aplikasi Anda, sangat cepat sketsa apa yang Anda inginkan untuk terlihat seperti dan pastikan semua kotak tersebut diatur dalam cara yang sangat intuitif bagi pengguna untuk menggunakan dan bahkan menunjukkan prototipe kertas ini ke teman-teman Anda dan mulai kelompok fokus. Hanya mendapatkan 2 atau 3 orang bersama-sama dan meminta mereka untuk hanya tekan atas prototipe kertas, dan menunjukkan kepada mereka layar baru untuk melihat apakah mereka benar-benar memahami apa yang terjadi. 

Apa yang ingin Anda lakukan adalah memberi mereka tugas, memotivasi tugas itu, dan hanya memberi mereka aplikasi dan membiarkan mereka menggunakannya. Jangan memberi mereka petunjuk di luar itu. Anda ingin benar-benar membiarkan mereka berinteraksi dengan aplikasi Anda dengan cara yang memungkinkan Anda melihat bagaimana mereka akan menggunakannya jika Anda tidak berdiri di samping mereka. Dan itu sangat penting. Yang akan memberikan Anda banyak wawasan untuk orang-orang mendapatkan sekitar hal-hal tertentu dengan cara yang saya tidak berniat mereka? Apakah mereka menggunakan mekanisme UI khusus pada layar dengan cara yang agak Hacky? Saya tidak bermaksud bagi mereka untuk melakukannya dengan cara itu. Dan setelah Anda selesai dengan itu, apa yang Anda ingin lakukan? Batu desain Anda, kan? Apa yang ingin Anda lakukan adalah Anda ingin mengembangkan dan kemudian melakukan proses yang lagi. Jadi menunjukkan kepada teman-teman setelah Anda dikembangkan, mengujinya, mengembangkan, menguji, mengembangkan, menguji, iterate, dan terus dan maju. Desain yang sangat proses berulang-ulang dalam pengertian ini. Anda benar-benar harus membangun sesuatu dan kemudian menyadari hal-hal tentang hal itu bahwa Anda tidak menyadari sebelum dan kembali dan meningkatkan itu. Sekarang, seperti untuk bagian pengembangan, itulah Tommy akan menunjukkan kepada Anda setelah istirahat dan bagaimana Anda mungkin dapat menerapkan sesuatu seperti autocomplete dengan cara yang cukup sederhana. [Malan] Sebagai Tommy set up di sini, pertanyaan kemudian. Banyak situs awal - dan ketika Yusuf mengatakan 1990 situs gaya, itu implementasi di mana jika Anda ingin memilih waktu mulai dan waktu akhir, terus terang, kembali pada hari dan bahkan pada beberapa situs web saat ini, cara Anda melakukan ini adalah Anda memilih satu jam dari drop-down, Anda memilih menit dari drop-down, mungkin Anda memilih AM, PM, dan kemudian Anda melakukannya 3 kali lebih. Dan sebagainya dengan 6 klik dan mungkin bergulir beberapa pengguna Anda benar-benar dapat memberikan beberapa jenis tanggal dan / atau rentang waktu dalam pengertian ini. 

Jadi pasti optimal dan belum sejauh kita telah melihat tidak ada kemampuan ekspresif di salah satu bahasa yang kita telah melihat untuk melakukan sesuatu yang lebih seksi seperti ini slider waktu mulai dan waktu akhir. Tetapi jika Anda berpikir kembali ke minggu 0 ketika kita berbicara tentang Scratch, di sana juga tidak ada widgets yang hanya melakukan hal-hal tertentu. Anda benar-benar hanya memiliki fundamental seperti loop dan kondisi dan sejenisnya. Jadi jenis hanya berpikir sangat abstrak saat ini, terlepas dari ihwal HTML, apa yang sebenarnya terjadi dengan sesuatu seperti ini waktu mulai dan waktu akhir slider? Ketika saya menggerakkan mouse saya dan saya klik pada simbol wortel kecil di sebelah kiri dan mulai menyeret, pemrograman, apa itu yang Anda inginkan untuk dapat mengimplementasikan untuk membuat itu terjadi? Pertanyaan apa, apa ekspresi Boolean yang Anda ingin dapat bertanya? Apa yang sebenarnya terjadi? Sammy? [Mahasiswa] Dimana posisi kursor? >> Baik. Dimana posisi kursor? Ini adalah sesuatu yang kami butuhkan untuk mengekspresikan kembali Scratch, apakah itu berdasarkan lokasi atau bahkan warna atau sejenisnya. Anda mungkin ingat pernah begitu singkat pada hari Senin ada semua hal ini disebut peristiwa dalam dunia Web, dan jadi ada hal-hal seperti onclick dan onkeypress dan onkeyup dan onmouseover dan onmouseout. Jadi menyadari bahwa bahkan hal-hal yang kita telah mengambil begitu saja di Web dengan situs-situs seperti Facebook dan Gmail, bahkan jika Anda tidak tahu bagaimana Anda mungkin akan menerapkan bahwa karena tidak ada yang seperti itu bahkan dalam kuliah atau Masalah Set 7, menyadari bahwa dengan fundamental yang sama persis, dengan HTTP dan parameter dan GET dan POST, dengan input HTML dasar yang kami telah melihat sejauh dan di saat dengan mekanisme program yang Tommy akan memperkenalkan bisa Anda mulai untuk mengekspresikan diri seperti yang Anda lakukan di minggu 0 dengan sangat intuitif menyeret dan menjatuhkan. 

Jadi dengan mengatakan bahwa, Tommy MacWilliam dan beberapa potongan teka-teki baru bagi kita untuk Web. Baiklah. Nama saya Tommy dan aku akan berbicara tentang JavaScript. Hanya disclaimer: saya berpendapat bahwa JavaScript adalah bahasa pemrograman yang terbaik di seluruh seluruh dunia. Ada banyak orang yang tidak setuju dengan saya, tapi itu hanya menakjubkan. Setelah Anda kembali ke C, jika Anda harus menulis C untuk kelas lain atau beberapa bahasa lainnya, itu hanya benar-benar frustasi di semua tingkat rendah rincian Anda harus terjebak masuk Jadi jika Anda pernah merasa sedih tentang bagaimana menjengkelkan C adalah menulis, hanya kembali, menulis beberapa JavaScript. Ini nirwana. Anda akan merasa jauh lebih baik tentang hari buruk Anda. Banyak keajaiban JavaScript berasal dari kemampuannya untuk memanipulasi hal-hal yang sudah ada di halaman. Ketika kita menulis naskah PHP kita, mereka dieksekusi di server, dan akhirnya bahwa script PHP mungkin menampilkan beberapa HTML. Itu HTML dikirim ke klien, dan kemudian itu saja. Jika PHP ingin menambahkan tombol ke halaman, misalnya, tidak bisa benar-benar melakukan itu. Ini harus membuat sebuah file HTML sama sekali baru dan mengirim bahwa untuk browser. Dengan JavaScript kita tahu bahwa kita dapat memperbarui hal-hal sementara mereka sudah berada pada halaman, dan karena ini kita dapat memberikan umpan balik lebih cepat, yang benar-benar akan meningkatkan pengalaman pengguna di website kami. Hanya rekap cepat penyeleksi JavaScript. Kita tahu bahwa ketika kita men-download halaman HTML, yang akan diwakili dalam DOM. 

DOM ingat hanya pohon besar di mana unsur-unsur yang terkait dalam hierarki besar. Ketika kita bekerja dengan database di pset 7, salah satu hal pertama yang kita perlu tahu bagaimana melakukan itu query database. Kami memiliki tabel ini pengguna besar, dan kadang-kadang kita hanya ingin mengatakan, "Saya hanya ingin beberapa pengguna yang cocok dengan beberapa kondisi." Demikian pula, ketika kita memiliki DOM kita perlu beberapa cara untuk query itu. Kita perlu beberapa cara untuk mengatakan, "Saya ingin semua tombol yang terlihat seperti ini "Atau semua gambar pada halaman." Dan penyeleksi memungkinkan kita untuk melakukan itu. Jadi hanya rekap cepat. Ini yang pertama di sini, ini # serahkan, apa itu akan memilih? Apakah ada yang ingat? [Respon siswa terdengar] >> Ya, tepatnya. Ini akan memilih elemen pada halaman yang memiliki ID dari kirimkan. Dan sehingga tag hash mengatakan pemilih ini akan bekerja dengan ID. Bagaimana yang kedua, ini berpusat,. Apa yang akan pilih itu? Ya. >> [Mahasiswa] Kelas. >> Tepat. Ini sekarang akan memilih oleh kelas. Perbedaan antara ID dan kelas di sini umumnya ID harus unik dalam apapun ruang Anda mencari lebih. Jadi jika Anda sedang mencari lebih dari satu halaman web secara keseluruhan, Anda benar-benar hanya harus memiliki 1 elemen dengan ID tertentu, sehingga dalam hal ini klik. Dengan kelas, di sisi lain, kita dapat memiliki lebih dari 1 elemen pada halaman yang sama dengan kelas yang sama. Hal ini dapat berguna untuk mengatakan saya ingin memilih segala sesuatu yang berpusat pada halaman bukan hanya 1 hal. 

Dan akhirnya, ini yang terakhir di sini adalah sedikit lebih rumit, tapi apa ini akan memilih dari DOM? [Respon siswa terdengar] >> Apa itu? [Mahasiswa] Apa itu tag. >> Kami memiliki 2 bagian di sini. Bagian kedua akan mengatakan saya ingin memilih tag ini dengan tag input, sehingga setiap elemen yang merupakan tag input. Tapi aku tidak ingin hanya memilih semua input karena sesuatu seperti tombol kirim bisa menjadi masukan dan sesuatu seperti kotak teks bisa menjadi masukan. Jadi dengan tanda kurung siku saya katakan saya hanya ingin memilih elemen-elemen yang dari jenis teks. Di suatu tempat di tag HTML saya, saya memiliki sebuah atribut yang disebut jenis, dan nilai dari atribut yang harus berupa teks. Jadi bagaimana dengan ini bagian pertama di sini? Kata pertama dari pemilih ini adalah bentuk maka saya memiliki ruang dan kemudian ini bagian masukan. Apa artinya itu lakukan, menempatkan bentuk di depannya? Ini akan dasarnya membatasi permintaan kami. Ini bisa menjadi kasus bahwa kita memiliki beberapa masukan pada halaman yang tidak keturunan formulir. Apa ini akan lakukan adalah ini akan mengatakan saya hanya ingin tag masukan yang memiliki suatu tempat di atas mereka beberapa elemen induk dari formulir. Dan sehingga dengan cara ini kita dapat membuat pertanyaan lebih hirarkis jadi kami tidak hanya harus memilih semuanya cocok pemilih diberikan. Kita bisa jenis batas lingkup dari permintaan itu untuk sesuatu yang lain. Jadi sekarang kita tahu bagaimana untuk memilih elemen pada halaman, mari kita bicara sedikit tentang AJAX. AJAX adalah singkatan masih sangat trendi yang berdiri untuk JavaScript asinkron dan XML. Kebetulan bahwa XML adalah hanya beberapa cara untuk merepresentasikan data. 

Semacam popularitas hilang baru, sehingga X di AJAX tidak digunakan sepanjang waktu. Pada dasarnya, apa yang AJAX memungkinkan kita lakukan adalah membuat permintaan HTTP dari konteks JavaScript. Ketika kita berada di peramban web kami dan kami menavigasi di sekitar halaman dan kita klik link, apa browser kita akan lakukan adalah membuat permintaan HTTP untuk apa pun hubungan kita klik. Tapi itu tidak selalu ideal karena jika itu yang terjadi, maka sebagai Daud berkata, kita selalu harus membuat pengguna mengklik tombol Submit atau klik link untuk membuat sesuatu terjadi yang akan melibatkan permintaan HTTP. Jadi dengan AJAX kita dapat membuat permintaan atas nama JavaScript. Itu berarti setiap kali pengguna berinteraksi dengan halaman atau sesuatu terjadi, kita benar-benar dapat membuat permintaan program untuk beberapa file PHP lain di website kami atau apa pun dan mengambil data bahwa file yang meludah keluar. Mari kita lihat contoh dari AJAX. Ini adalah CS50 Keuangan halaman dengan yang mudah-mudahan beberapa dari kita yang akrab. Jika kita melihat HTML halaman ini, kita lihat di sini bahwa saya telah menambahkan beberapa hal, salah satu yang saya sudah diberikan formulir ini ID. Aku sudah mengatakan id = "bentuk-kutipan". Saya sudah melakukan ini hanya karena itu akan membuat ini sedikit lebih mudah untuk memilih dari DOM karena saya hanya bisa membuat permintaan yang sangat sederhana. Apa yang saya ingin lakukan di sini adalah saya ingin memperbaiki beberapa masalah dengan CS50 Keuangan. Jadi jika kita pergi ke finance.cs50.net, setiap kali saya ingin mendapatkan penawaran, saya harus mengklik tombol ini Penawaran Get, dan bahwa Dapatkan Tombol Kutip kemudian membawaku ke halaman lain secara keseluruhan. Dan jika saya ingin kutipan lain, saya harus menekan tombol Back dan kemudian saya ketik dalam, Saya mendapatkan penawaran, dan aku menekan tombol Kembali. Ini benar-benar bukan pengalaman pengguna yang terbaik. Yang benar-benar akan menggunakan situs jika itu yang lambat untuk mendapatkan harga saham? Jadi apa yang ingin kita lakukan dengan AJAX adalah menghapus langkah pergi ke halaman terpisah dalam rangka untuk melihat hasilnya. 

Apa yang kita benar-benar hanya meminta adalah bahwa harga yang sangat kecil, dan itu hanya jumlah yang sangat kecil dari data. Jadi tidak perlu bagi saya untuk pergi halaman lain HTML secara keseluruhan, mendownload batch baru seluruh HTML, mungkin men-download gambar lagi, beberapa CSS file lainnya hanya bagi saya untuk menjawab pertanyaan yang sangat sederhana dari berapa ini biaya persediaan. Dengan AJAX kita dapat membuat ini jauh lebih mudah. Kita melihat di sini bahwa aku menghubungkan dalam sebuah file JavaScript yang disebut quote.js. Mari kita benar-benar membuka file tersebut. Tidak ada. Semua file saya JavaScript yang akan berlokasi di HTML sehingga web browser dapat mengaksesnya. Kemudian kita memiliki direktori terpisah sini untuk JavaScript, dan sekarang di sini adalah quote.js. Pada bagian atas file ini ini mengatakan di sini bahwa saya ingin menunggu seluruh halaman yang akan dimuat sebelum saya mencoba untuk melakukan sesuatu. Mengapa itu perlu? Ternyata bahwa hal berikutnya aku akan lakukan di sini adalah mulai mencari elemen yang cocok pemilih tertentu. Jika JavaScript ini pernah dijalankan sebelum elemen ini dimuat pada halaman, maka semuanya saya coba lakukan tidak akan bekerja karena aku akan mencoba untuk memilih sesuatu yang belum ada di sana. Jadi ini line up atas bilang aku ingin kau menunggu sampai semuanya dimuat jadi kita dijamin bahwa setiap elemen yang saya cari sebenarnya pada halaman. Ini tanda dolar di sini berarti saya menggunakan perpustakaan disebut jQuery. Perpustakaan ini jQuery memungkinkan kita untuk menggunakan penyeleksi yang baru saja kita memandang. Dengan mengatakan $ kemudian lulus sebagai argumen ini # bentuk-kutipan, Saya sekarang memilih bentuk bahwa kami hanya mengambil melihat. Sekarang saya memiliki representasi yang terbentuk di memori entah bagaimana. 

Pada objek ini sekarang, ini representasi dari bentuk, Sekarang saya menggunakan fungsi dipanggil. Apa fungsi ini tidak itu akan melampirkan sebuah event handler. Acara yang kita akan mendengarkan adalah acara Submit. Jadi ketika pengguna mengklik tombol Submit atau yang menekan Enter, Acara ini akan api. Dengan mengaitkan ke ini, sekarang saya bisa menimpa perilaku default formulir. Tanpa JavaScript, formulir akan tunduk pada apapun file PHP kita digunakan dalam atribut aksi. Tapi sebaliknya, aku sekarang mengatakan, tunggu, tunggu, tunggu, saya tidak ingin Anda untuk benar-benar melakukan itu. Saya ingin ini terjadi sebelum Anda pergi dan mencoba untuk mengirimkan beberapa file PHP. Sekarang apa yang ingin saya lakukan? Pada titik ini saya ingin menggunakan AJAX entah bagaimana untuk memuat dalam apa harga saham tersebut. Hal pertama yang saya perlu tahu adalah apa saham pengguna melihat ke atas. Untuk melakukan itu saya akan menggunakan pemilih lain. Ini adalah pemilih ketiga kami melihat sebelumnya. Ini mengatakan bahwa saya ingin memulai ini bentuk elemen dengan ID dari bentuk-kutipan. Kemudian di suatu tempat dalam bentuk yang harus ada unsur masukan yang memiliki nama simbol. Jika kita melihat kembali HTML kami, kami melihat bahwa kami memiliki input [name = simbol]. Itu berarti bahwa ini akan memilih bahwa kotak teks yang pengguna mengetik ke. Itu bagus. Kami memiliki kotak teks. Sekarang kita hanya perlu tahu apa yang ada di dalamnya. Untuk melakukan itu kita dapat memanggil metode ini di sini, ini. Val, dan ini bilang aku tahu apa kotak teks yang Anda miliki. Aku ingin kau katakan padaku apa itu pengguna mengetik ke dalam kotak teks. Sekarang kita memiliki string yang disebut simbol yang sama dengan apa pun pengguna diketik masuk Itu bagus. Kita dapat menggunakan string yang sekarang untuk membuat permintaan kami. Ini adalah fungsi baru di sini, ini $, kecuali kita tidak lagi akan memilih unsur-unsur, kita akan memanggil fungsi yang berbeda yang diberikan kepada kami oleh jQuery. Fungsi AJAX adalah apa yang benar-benar akan membuat permintaan HTTP. Jadi kita harus memberitahu beberapa hal. Hal pertama yang kita harus memberitahu fungsi ini adalah di mana saya ingin permintaan untuk pergi. Di suatu tempat di proyek saya saya memiliki file ini dalam direktori HTML disebut quote.php. Saya dapat mengakses file ini, kita lihat, seperti ini, jika saya pergi ke localhost / quote.php. 

Saya ingin JavaScript saya untuk membuat permintaan ke halaman tersebut. Apa jenis permintaan sekarang? Kami melihat sebelumnya bahwa bentuk memiliki bahwa metode = "post" atribut, dan itu berarti itu akan membuat permintaan POST, sehingga tidak akan memasukkan apa pun di URL, bukan permintaan GET, yang hanya akan dipecat jika kita hanya mengakses halaman dengan browser web, misalnya. Sekarang kita sudah mengatakan saya ingin membuat permintaan HTTP POST ke halaman yang terletak di quote.php. Ketika kita mengirimkan formulir, ingat kita bisa mengakses elemen input dalam bentuk yang dengan variabel $ _POST. Sejauh ini dalam cerita kita belum benar-benar dikirim sepanjang data belum. Kami baru saja mengatakan kita membuat permintaan AJAX dan inilah jenis permintaan kita membuat. Sekarang kita perlu benar-benar mengirim beberapa data ke halaman. Untuk melakukan itu kita dapat menggunakan properti yang disebut data. Nilai dari properti ini sebenarnya merupakan array asosiatif. Alasan untuk ini adalah memungkinkan kita untuk mengirim lebih dari hanya 1 bagian dari data. Itulah sebabnya kita memiliki kurung kurawal di sini bersarang di dalam kurung kurawal ini lainnya. Kunci dalam array asosiatif akan menjadi hal yang sama sebagai nama mereka atribut dalam elemen form kami. Itu berarti bahwa jika saya mengirim sepanjang kunci simbol, yang berarti halaman PHP saya dapat mengakses data ini dengan $ _POST [simbol] seperti yang kami lakukan sebelumnya ketika kami mengirimkan formulir. Dan sekarang data aktual kita ingin mengirim akan menjadi bagian dalam nilai array asosiatif. 

Kami disimpan teks ini dalam simbol yang disebut variabel, dan jadi kita mengirimkan bersama sekarang kunci simbol dan nilai apa pun pengguna diketik masuk Sekarang kita sudah membuat permintaan HTTP, file PHP kita telah dieksekusi, dan itu akan mengirim beberapa data kembali sekarang untuk klien yang hanya membuat permintaan ini. Sekarang kita perlu menanggapi apa server mengatakan kepada kami. Untuk melakukan itu kita memiliki properti terakhir di sini disebut sukses. Nilai ini kunci sukses sebenarnya akan menjadi fungsi, dan ini adalah salah satu hal yang benar-benar keren yang dapat Anda lakukan dengan JavaScript. Tidak hanya dapat Anda memiliki ints atau array sebagai nilai dalam array asosiatif, kita juga bisa memiliki fungsi. Jadi dengan mengatakan kesuksesan, ini adalah kunci saya. Usus A bilang inilah nilai, dan sekarang nilai ini sebenarnya fungsi. Jadi kita tidak perlu memberikan fungsi ini nama per se. Kami hanya bisa mengatakan ini akan menjadi beberapa fungsi. Ini akan mengambil 1 argumen. Argumen ke fungsi ini akan menjadi apapun server mengirimkan kembali dari permintaan tersebut. Sama seperti ketika browser kita membuat permintaan, server akan mengirimkan sesuatu kembali dan browser menampilkannya, dalam konteks AJAX kita hanya membuat permintaan, server mengirim sesuatu kembali, dan sekarang kami telah yang direpresentasikan sebagai string. Dengan string yang saya hanya ingin menampilkan bahwa pada halaman. Untuk melakukan itu aku akan memiliki satu pemilih terakhir. Saya ingin memilih elemen dengan harga ID. Ini hanya sebuah div kosong yang saya buat pada halaman, dan saya ingin mengatur isi dari div untuk menjadi apa pun server mengirimkan kembali. Aku sudah benar-benar diubah quote.php sedikit. 

Daripada memanggil render dan rendering beberapa halaman, quote.php sekarang hanya akan mencetak nilai dari saham sebagai string. Jadi jika Anda adalah untuk benar-benar mengunjungi halaman, Anda hanya akan melihat bahwa string kecil apa pun harga saham. Satu hal terakhir yang perlu kita lakukan di sini adalah pastikan fungsi ini mengembalikan palsu. Apa ini, dapat dikatakan bahwa jika saya dalam sebuah event handler dan bahwa event handler kembali palsu bukannya kembali benar, itu berarti bahwa saya tidak ingin acara asli untuk api. Dalam hal ini, jika kita tidak memiliki JavaScript apapun dan kami mengajukan formulir, Browser web kami akan berkata, "Aku akan mengirim data bersama," dan mereka akan mengirim Anda ke halaman lain. Karena kita sedang menggunakan AJAX sekarang, tidak perlu untuk mengirim pengguna ke halaman lain. Kami hanya akan menampilkan hasil secara dinamis pada halaman yang sama. Kami benar-benar tidak ingin mereka pergi ke mana pun, dan saya ingin tinggal di halaman yang sama. Jadi dengan kembali palsu, kami memastikan bahwa bentuk tidak melakukan itu untuk kita. Mari kita lihat apa ini benar-benar tampak seperti. Halaman kutipan kami terlihat sama. Mari saya menarik inspektur di sini sehingga kita bisa melihat apa yang terjadi. Buatlah sedikit kurang besar. Ingat jika kita membuka tab Jaringan, ini adalah di mana kita bisa melihat semua permintaan HTTP yang terjadi pada halaman. 

Untuk simbol biarkan aku ketik AAPL dan klik Dapatkan Penawaran. Sekarang kita melihat bahwa pangsa Apple biaya beberapa jumlah dolar hanya muncul di halaman, namun URL tidak berubah sama sekali. Bahkan, di sini adalah permintaan HTTP yang baru saja kita buat. Kami membuat permintaan POST ke quote.php. Itu masuk akal. Inilah server mengirimkan kembali. Bukan lagi ini dokumen HTML raksasa dengan gambar dan hal-hal seperti itu, itu hanya baris teks, dan kemudian kami hanya menampilkan baris teks. Jika kita kembali ke header dan melihat apa yang kita benar-benar dikirim dalam ini permintaan HTTP, kita dapat melihat di sini bahwa kami dikirim bersama kunci dari simbol dan nilai AAPL, yang adalah apa yang pengguna diketik masuk Hal ini bagus, tapi masih sedikit mengganggu. Saya masih harus klik tombol ini untuk mendapatkan harga saham. Kami orang-orang sibuk dan kita tidak punya waktu untuk mengklik tombol. Google menyadari hal ini beberapa saat yang lalu ketika mereka menerapkan Google Instant. Apa Google Instant tidak adalah sebagai Anda mengetik hanya mulai menampilkan hasil bagi Anda sehingga Anda tidak perlu khawatir tentang bahkan mengklik Cari. Sebenarnya, cerita menyenangkan yang berhubungan dengan itu. Setelah Google Instant keluar, orang-orang seperti, "Wah, ini super menakjubkan." "Ini sangat keren." Dan seorang mahasiswa turun di Stanford yang 19 pada waktu itu membuat situs bernama YouTube Instant. Semua Instan YouTube tidak secara efektif mencari YouTube langsung. Jadi daripada harus pergi ke YouTube.com dan tekan Cari, ketika saya mulai mengetik menjadi sesuatu YouTube Instan seperti CS50, kita bisa melihat di sini bahwa itu berusaha pada koneksi internet yang lambat mengisi hasil hidup. Untuk melakukan itu kita benar-benar dapat membuat modifikasi yang sangat sederhana untuk berkas quote.js kami. Saat ini kami sedang melampirkan acara ini ketika formulir dikirimkan. Kami tidak benar-benar ingin membuat pengguna mengirimkan formulir itu lagi, jadi mari kita bukannya api acara ini setiap kali pengguna menekan tombol. Untuk melakukan itu pertama mari kita mengubah acara dari tunduk kepada keyup. Itu berarti bahwa daripada menunggu untuk formulir untuk mengirimkan, setiap kali tombol ditekan, ada sesuatu yang akan terjadi. Itu tidak lagi masuk akal untuk melampirkan acara keyup ke bentuk keseluruhan. Kami benar-benar hanya peduli tentang hal itu kotak pencarian. 

Untuk memilih yang sekarang, kita dapat mengubah ini menjadi, daripada bentuk-kutipan, Bentuk-kutipan dan kami akan memiliki input (mengetik teks =) atau kita bisa katakan (nama simbol =) - apapun yang kita inginkan. Sekarang ada satu hal terakhir yang harus kita lakukan. Ingat di sini ketika kita mengatakan return false kita berkata kita tidak ingin bahwa event default untuk api. Tapi kebetulan bahwa jika kita menonaktifkan bahwa sekarang, apapun yang kita ketik tidak akan muncul dalam browser lagi karena itu akan menjadi perilaku default mengetik ke dalam kotak teks. Kami tidak lagi ingin menimpa itu, jadi mari kita kembali menghancurkan ini palsu. Jika kita simpan itu dan kembali halaman tersebut, sekarang ketika saya mulai mengetik AAPL Anda akan melihat bahwa harga saham di bagian bawah di sini adalah menyelesaikan otomatis. Jadi di sini adalah CS50 Instan Keuangan. Sebenarnya cerita menyenangkan tentang Instant YouTube adalah siswa yang hanya jenis menulisnya sebagai proyek 1-malam, dan hari berikutnya ia ditawari pekerjaan oleh CEO YouTube. Jadi sesederhana itu, Anda CS50 siswa, proyek akhir Anda bisa mendapatkan pekerjaan di YouTube. Sesuatu seperti itu adalah ide yang sangat keren untuk sebuah proyek akhir, kan? Kami memiliki beberapa fungsi yang ada bahwa kami ingin mengintegrasikan dengan. Kami meningkatkan pengalaman pengguna sedikit, dan tiba-tiba mencari sesuatu di YouTube Instant mungkin jauh lebih mudah daripada mencari untuk itu di YouTube reguler. Jadi itulah AJAX singkatnya. 

Dalam contoh bahwa Yusuf menunjukkan, kami melihat banyak autocompletes, dan orang-orang yang benar-benar autocompletes, sangat berguna karena kita tidak perlu mengingat - Misalnya, jika Anda tidak ingat harga saham untuk Apple dan kami hanya tahu itu sesuatu yang aa, bukan hanya mengatakan kepada saya, "Sebagian dari hal ini biaya banyak uang," Aku ingin seperti ingin tahu apa saham mulai dengan aa. Kita bisa melakukan yang benar-benar baik dengan perpustakaan Bootstrap yang sudah disertakan dalam CS50 Keuangan. Jika Anda datang ke sini dengan tag JavaScript dan gulir ke bawah untuk Typeahead, ini hanya sebuah plugin yang bagus bahwa seseorang sudah menulis untuk kita, dan kita dapat dengan mudah menggunakan fungsionalitas seperti ini. Saya mengetik A dan di sini adalah daftar dari beberapa negara yang dimulai dengan A. Mari kita mengatakan bahwa saya pikir ini benar-benar keren dan sudah waktunya bagi saya untuk memasukkan pada halaman saya. Ternyata bahwa ini adalah benar-benar, benar-benar sederhana. Mari ke sini untuk quote3.js. File saya terlihat sedikit berbeda. Di sini semua barang AJAX saya adalah sama. Saya ingin memuat data saham tanpa harus pergi ke halaman lain. Tapi sekarang saya ingin menggunakan plugin ini. Dokumentasi Bootstrap memiliki contoh yang bagus tentang bagaimana tepatnya saya bisa melakukan itu. Saya ingin mengatakan, "Di sini ada masukan yang ingin saya autocomplete on," dan aku akan memanggil fungsi ini disebut typeahead, dan itu akan menangani semua hal-hal Typeahead bagi kita. Ini akan menginisialisasi daftar, ia akan melakukan semua penyaringan kami. Satu-satunya hal yang perlu tahu adalah apa data kita pada autocompleting. Jadi saya menemukan kunci ini hanya dengan membaca dokumentasi dan melihat contoh. Jika saya memberikan kunci dari sumber, nilai dari kunci ini hanya beberapa array hal yang saya ingin AutoComplete on. Variabel ini berasal dari file ini lainnya. Saya membuka symbols.js. 

Ini symbols.js hanya array ini benar-benar, benar-benar besar yang mengandung string dari semua simbol saham dari NASDAQ. Jika saya ingin melompat kembali ke HTML, sehingga jharvard, vhosts, globalhost, html, template, quote_form. Karena itu sekarang disebut quote3.js, biarkan aku mengubah file JavaScript saya termasuk di sini. Sekarang saya memiliki quote3.js, jadi saya akan memuat dalam file JavaScript terpisah, salah satu yang memiliki bahwa Bootstrap autocomplete. Sekarang ketika saya melompat kembali ke browser, kembali halaman tersebut, dan saya mulai mengetik aa, ada autocomplete saya. Dan itu benar-benar sesederhana itu. Aku punya 1 baris kode yang hanya berkata, "Ini adalah hal yang saya ingin autocomplete on," dan tiba-tiba saya memiliki fungsi ini benar-benar, benar-benar baik dengan tidak banyak usaha sama sekali. Saat Anda sedang mengembangkan website dan khususnya sisi ujung depan hal, Anda akan menemukan ini adalah kasus banyak. Ada banyak, banyak, banyak perpustakaan gratis benar-benar dingin di luar sana yang membuatnya super mudah untuk melakukan hal-hal seperti ini. Can anyone memikirkan kelemahan dari hanya autocompleting pada daftar besar simbol? Apa yang bisa menjadi sesuatu yang bukan yang terbaik dengan pendekatan ini? Ya. >> [Mahasiswa] Waktu, jika Anda memiliki banyak [tak terdengar] Ya. Saat ini kami sedang men-download file ini JavaScript besar dan ada banyak simbol. Dan jadi jika kita memiliki satu ton barang, semacam ini bisa dari meningkatkan latency tidak hanya mencari tetapi juga men-download file yang sebenarnya. Besar. Ada lagi? Saat ini tidak ada arti sebenarnya dari relevansi. Jika saya mengetik A, perusahaan yang muncul di sini mungkin bukan perusahaan yang paling populer yang dimulai dengan A. 

Sebelum saya sampai ke Apple, mungkin butuh karakter lagi untuk menemukan apa yang saya cari. Ini autocomplete tidak memiliki rasa relevansi. Ini hanya akan mengatakan, "Apa pun yang cocok aku akan ditampilkan." Alih-alih itu, saya ingin entah bagaimana mengintegrasikan beberapa relevansi dalam pencarian saya. Jika saya pergi ke sini untuk Yahoo! Finance, finance.yahoo.com, Jika saya mencoba untuk memasukkan simbol pada halaman Yahoo! Finance dan saya mulai mengetik goog, aku punya daftar dari hal-hal. Jelas, sepertinya Finance Yahoo! melakukan sesuatu yang lebih pintar di sini. Mereka memiliki beberapa relevansi dan mereka juga memiliki informasi tambahan seperti nama saham. Itu sesuatu yang saya tidak bisa benar-benar mendapatkan dengan hanya daftar saham saya simbol. Aku ingin ini dan jadi aku akan mengambilnya. Untuk melakukan itu mari kita melakukan beberapa hal. Mari kita pertama membuka inspektur pada halaman ini karena kita melihat bahwa halaman ini tidak reload sama sekali, jadi mungkin menggunakan AJAX entah bagaimana akan memuat data. Kita dapat mengetahui data apa itu loading. Jika saya klik pada tab Jaringan, ini akan menjadi semua permintaan yang mulai dipecat. Sekarang jika saya ketik di goo, kita dapat melihat bahwa saya hanya mendapat permintaan HTTP baru. Ini mungkin dimana data yang berasal dari. Tentu saja, jika saya melihat URL ini, yang sedikit aneh bernama, kita dapat melihat bahwa ini adalah persis di mana Yahoo mengirimkan off data dari. 

Saya telah membuat sebuah file terpisah yang disebut suggest.php yang sangat mirip dalam roh dengan fungsi lookup. Ini pada dasarnya akan membuat permintaan ke URL Yahoo, mendapatkan kembali beberapa data, dan kirimkan kembali ke saya. Sekarang, daripada menggunakan daftar ini, besar besar dari simbol, Saya dapat menggunakan hal-hal baik Yahoo relevansi, dan saya tidak perlu men-download file JavaScript besar. Aku hanya akan meruntuhkan simbol saham benar-benar relevan. Mari selami itu. Jadi html, js. Kita sekarang dalam quote4. Sekarang kita tidak lagi menggunakan bahwa daftar besar file JavaScript. Tapi ada semacam kecil dari masalah desain di sini. Kami telah mengatakan bahwa A dalam AJAX adalah asynchronous. Apa itu artinya bahwa ketika saya membuat permintaan AJAX, jadi di sini pada baris 8, ini adalah di mana saya AJAX permintaan sebenarnya dipecat. Katakanlah sekarang aku punya beberapa kode di sini yang akan melakukan beberapa hal like mengingatkan pengguna atau sesuatu perubahan pada halaman. Apa yang tidak akan terjadi adalah browser tidak akan menunggu permintaan ini untuk melanjutkan sebelum turun dan memukul baris ini. Itulah bagian asynchronous. Ini akan membuat permintaan ini dan berkata, "Setiap kali Anda selesai, "Datang kembali dan memanggil fungsi yang saya bilang untuk menelepon dalam keberhasilan." Itu berarti kita tidak bisa hanya mendownload semua saham sebelumnya. Kita perlu membuat permintaan dan menunggu sesuatu untuk datang kembali. Itu berarti bahwa sebelum, kita hanya bisa mengatakan Bootstrap, "Berikut ini adalah daftar hal-hal yang aku ingin kau autocomplete on." Kita tidak bisa lagi melakukan itu lagi karena kita tidak tahu apa yang kita ingin benar-benar autocomplete pada. Untungnya, Bootstrap memikirkan hal ini karena mereka adalah orang pintar di sana, dan mereka benar-benar memberi kita cara lain untuk memuat plugin ini Typeahead. Sebelumnya, nilai properti sumber ini hanya array besar hal untuk autocomplete on. 

Sekarang properti sumber sebenarnya fungsi, dan tujuan dari fungsi ini adalah untuk mencari tahu apa hal-hal yang autocomplete pada adalah. Cara itu akan mengetahui bahwa itu akan meminta Yahoo! Finance apa hal terbaik untuk autocomplete adalah. Untuk melakukan itu saya akan membuat permintaan AJAX sangat mirip. Aku akan meminta halaman ini di suggest.php. Saya ingin mengirim sepanjang simbol masih. Dan sekarang keberhasilan saya, dokumentasi Bootstrap mengatakan kepada saya bahwa untuk mengisi daftar hal-hal yang, semua harus saya lakukan adalah lulus dalam array ini sekarang untuk fungsi callback. Tapi tunggu dulu. Jika hal ini seharusnya menjadi array dan AJAX mengirim saya kembali teks, bagaimana mungkin? Ini memperkenalkan cara baru pertukaran data yang disebut JSON. Dalam hal ini kita tidak hanya mengirim kembali string sederhana teks. Sekarang kita sedang berhadapan dengan daftar yang lebih kompleks simbol saham. Simbol-simbol saham juga dapat mencakup hal-hal seperti nama perusahaan atau harga saat ini. Hanya menggunakan tali panjang yang besar yang tidak diformat dalam cara yang dapat diprediksi tidak akan menjadi cara terbaik untuk mendapatkan data dari server Yahoo untuk saya dengan cara yang saya dapat dengan mudah mengerti. JSON adalah teknologi yang mengambil keuntungan dari bagaimana kita membuat array asosiatif dalam JavaScript. Ini terlihat banyak seperti array asosiatif JavaScript, dan pada kenyataannya, itu karena itu. JSON adalah singkatan dari JavaScript Object Notation. Ini pada dasarnya adalah sebuah disepakati format untuk mentransfer data bolak-balik. Berikut ini JSON objek atau array asosiatif JSON mengirimkan saya beberapa data tentang kursus. 

Kunci dari array ini adalah hal-hal seperti kursus yang memiliki nilai cs50, dan di sini kita dapat melihat bahwa saya dapat memiliki nilai yang array. Saya tidak perlu melakukan hal-hal seperti parse string keluar dan mencari koma dan melakukan hal-hal gila seperti itu. Karena ini dinyatakan dalam format JSON, JavaScript dan jQuery sudah memiliki fungsi untuk mengkonversi string yang terlihat seperti ini JSON ke dalam sebuah array JavaScript yang sebenarnya asosiatif bahwa kita dapat bekerja dengan. Melakukan yang sesederhana mengatakan bahwa tidak ada lagi yang file ini, suggest.php, mengirimkan saya kembali hanya string teks, tapi aku tahu itu akan mengirim saya kembali JSON. Itu berarti bahwa JSON dapat dikonversi menjadi array asosiatif JavaScript. Dan begitu jQuery, saya ingin Anda melakukan itu untuk saya. Itu berarti bahwa parameter respon di sini, ini tidak lagi hanya string. Karena kita sudah mengatakan bahwa di sini jQuery datang beberapa JSON, jQuery akan menjadi cukup pintar untuk mengatakan, "Kamu ingin JSON?" "Aku akan mengkonversi ke dalam sebuah array asosiatif untuk Anda." Mari kita benar-benar melihat pada tab Jaringan setelah kami memiliki quote4.js. Kami akan mengubah ini dan kembali halaman tersebut. Sekarang aku akan mengetikkan-lagi. Saya telah membuat beberapa permintaan untuk suggest.php, tapi sekarang respon ini, bukan hanya string, itu JSON. Jadi saya memiliki penjepit keriting terbuka mengatakan, "Di sinilah array asosiatif." 

Kunci pertama dan satu-satunya ini array asosiatif disebut simbol, dan kemudian di sini adalah array dari semua simbol yang relevan datang sekarang dari Finance Yahoo!, bukan dari daftar yang raksasa. Begitulah cara saya hanya dapat mengisi plugin ini autocomplete dengan beberapa data yang tidak berasal dari file lokal yang sudah ditentukan tapi dari sesuatu yang lain. Ternyata bahwa kita benar-benar dapat mengambil keuntungan dari teknologi yang disebut JSONP, atau JSON dengan padding, yang akan menghilangkan perantara suggest.php. Tapi bukannya melakukan hal itu, mari kita bukannya kita lihat bagaimana saya bisa memperbaiki ini bahkan lebih. Saya sangat suka Typeahead Bootstrap ini. Ini benar-benar baik. Tapi kami semakin baik di JavaScript dan kami ingin melakukan hal semacam ini diri kita sendiri, mungkin kita lihat apa plugin ini bisa lakukan. Mari kita tidak lagi menggunakan hal Typeahead, dan mari kita coba untuk membuat daftar saham yang disarankan diri kita sendiri. Di sini, di quote6.php kita akan memulai dengan cara yang sama. Jenis seseorang Setiap kali sesuatu, kita ingin membuat permintaan AJAX. Hal ini mirip dengan aslinya Instan kami CS50 Keuangan. Daripada membuat permintaan untuk quote.php, kita sekarang membuat permintaan ke file yang sama seperti sebelumnya, suggest.php ini, yang hanya akan menarik data dari Yahoo! Finance. 

Sekali lagi, kami masih mengharapkan JSON, tapi sekarang karena Typeahead tersebut tidak melakukan ini untuk kita, kita juga perlu mengirim sepanjang nilai yang dalam kotak teks saat ini. Sekarang kita tahu apa yang harus meminta Finance Yahoo! untuk, dan jadi sekarang inilah fungsi yang kita ingin mengeksekusi sekali permintaan selesai. Kami tidak memiliki plugin untuk membuat daftar bagi kita, jadi di sini adalah di mana kita benar-benar akan membangun sebuah daftar saran. Untuk melakukan itu, banyak seperti di PHP kita concatenated string ini besar HTML maka kita dicetak mereka, kita bisa melakukan hal yang persis sama dalam JavaScript. Pertama kita akan memulai ini string disebut saran, dan string ini hanya akan berisi beberapa HTML. Kami ingin menjadi daftar hal-hal, jadi kita akan memulai dengan tag daftar, dan sekarang kita akan iterate atas semua simbol yang dikembalikan kembali kepada kami. Ingat, karena kita sudah mengatakan dataType: 'json', ini bukan string. Ini sudah sebuah array bagi kita. Itu benar-benar keren. Kami hanya bisa mengatakan, "Saya ingin Anda untuk menambahkan elemen daftar." Kami akan memasukkannya ke dalam sebuah elemen di sisi itu, kami akan memberikan saran kelas sehingga kita tahu apa itu, dan sekarang di sini adalah simbol bahwa kami kembali dari Yahoo! Finance. 

Setelah kami telah menciptakan elemen untuk masing-masing simbol kita sudah kembali, kita hanya ingin menutup daftar. Jadi sekarang ini merupakan saran fragmen HTML sedikit bahwa ketika diletakkan pada halaman akan menjadi daftar hal-hal yang kita cari. Sekarang mari kita benar-benar menempatkan bahwa pada halaman. Untuk melakukan itu saya benar-benar menciptakan div lain kosong dan saya berikan itu sebuah ID saran. Sama seperti kita mengatur isi div yang akan menampilkan harga dari data saham, sekarang kita hanya ingin mengatur isi dari div ini untuk apapun string ini adalah yang berisi simbol-simbol. Dengan menggunakan metode ini HTML, ini variabel saran, string ini, adalah string HTML. Aku ingin kau mengambil HTML dan meletakkannya dalam div disebut saran. Kami baru saja ditambahkan sesuatu ke DOM sekarang. Kami telah menambahkan beberapa elemen baru ke DOM bahwa kita sekarang dapat menampilkan pada halaman. Mari kita lihat apa ini tampak seperti. Jika kita memuat dalam quote6 dan sekarang kami kembali, sekarang ketika saya mulai mengetik AAPL, kita tidak lagi memiliki Bootstrap autocomplete, tapi kita sekarang memiliki daftar ini bahwa kita membuat diri kita sendiri. Ini adalah sedikit lebih jelek daripada Typeahead Bootstrap, misalnya, tapi itu tidak memungkinkan kita untuk melakukan satu hal lainnya. Ketika kami melihat bahwa plugin Bootstrap, kita melihat bahwa ketika kita autocompleted, salah satu dari nilai autocomplete adalah AAPL. Itu mungkin tidak sangat membantu. Sebagai pengguna, saya tidak mungkin segera mengenali semua simbol saham. Yang saya mungkin lebih mungkin untuk mengenali adalah nama-nama yang sebenarnya perusahaan. Jadi bukankah akan sangat membantu jika daripada mengatakan AAPL ini mengatakan sesuatu seperti Apple Inc Karena kita sudah digulung ini diri kita sendiri, kita bisa benar-benar mudah melakukan itu. Mari kita membuka penawaran terakhir kami file di sini, jadi quote7. 

Sama saja. Aku baru saja menciptakan file lain PHP yang akan kembali kepada kita lebih dari sekadar simbol. Ini juga akan memberi kita kembali nama-nama perusahaan. Dan jadi kita melakukan hal yang sama. Kami sedang membuat permintaan AJAX. Setelah permintaan telah selesai, kita akan menjalankan fungsi ini di sini, dan fungsi ini akan membangun sebuah string besar elemen. Namun perbedaan di sini adalah bahwa nilai dari daftar ini tidak lagi hanya simbol, itu sekarang nama. Jadi kita memiliki satu masalah kecil. Ketika kita menggunakan lookup, kita perlu entah bagaimana lulus simbol. Kita tidak bisa lewat sesuatu lookup seperti Microsoft Corporation. Kita harus lulus MSFT. Ketika kita sedang menulis HTML, kami memiliki banyak menyenangkan built-in atribut. A mungkin terkait dengan itu suatu href atau kelas. Tapi apa yang kita benar-benar butuhkan sekarang adalah untuk masing-masing link memiliki simbol saham yang terkait dengannya. Tidak ada built-in atribut HTML untuk simbol saham, tapi untungnya, HTML5 memungkinkan kita untuk membuat atribut kita sendiri untuk menjadi apapun yang kita inginkan. Dengan mengatakan data-simbol, saya telah memperkenalkan atribut baru yang namanya saya hanya terdiri, dan ini tidak apa-apa karena saya mengawali dengan data ini. Kita akan menyimpan dalam ada simbol dari saham sekarang. Apa artinya adalah bahwa meskipun kita menampilkan nilai dari nama perusahaan dalam autocomplete kami, kami masih mengingat simbol yang berhubungan dengan masing-masing perusahaan. Cara kita melakukan hal itu ada dalam diri ini elemen itu sendiri. Jadi itu berarti kita harus melakukan satu perubahan lagi. Ketika kita klik sekarang, kita harus benar-benar mengambil keuntungan dari atribut simbol bukan hanya nilainya. Jika kita kembali, kami lampirkan sebuah event handler untuk saran. Setiap kali salah satu saran diklik sekarang, saya ingin melakukan sesuatu. Apa yang saya ingin lakukan adalah mengubah nilai dari kotak input. Sekarang saya ingin mengatur fungsi ini val yang sama. 

Jadi tanpa argumen fungsi val kembali kepada Anda apa yang sudah dalam kotak teks, tetapi jika Anda memberikan string, itu akan mengambil tali itu dan memasukkannya ke dalam kotak teks. Saya memilih kotak teks dalam cara yang sama. Nama itu adalah simbol dalam bentuk kutipan-. Sekarang aku mengirimnya nilai atribut data-simbol. Ini hal di sini yang baru, ini $ (ini). Apa ini mengacu adalah elemen yang diklik. Kita bisa melihat di sini bahwa kita tidak melampirkan acara klik untuk setiap elemen dengan kelas sugesti individual. Sebaliknya, kita mendekati ini sedikit berbeda. Sebaliknya kita katakan setiap kali sesuatu dalam ini div saran, yang ingat hanyalah wadah untuk daftar itu, jika sesuatu dalam div ini diklik dan memiliki kelas sugesti, Saya ingin acara ini api. Pada dasarnya apa ini berarti dapat kita lakukan adalah kita dapat menggunakan kembali ini event handler yang sama untuk semua hal dalam daftar. Jadi kita tidak harus memiliki satu event handler untuk elemen pertama dan handler yang berbeda event untuk elemen kedua. Kami malah bisa mengatakan, "Saya ingin event handler yang sama berlaku untuk segala sesuatu di daftar saya." Tapi kita perlu entah bagaimana tahu mana elemen diklik. Ini "ini" kata kunci mewakili hanya itu. Ini adalah objek yang hanya diklik oleh pengguna. Jika saya hanya mengklik link ke-3, ini merupakan unsur yang memiliki pranala ke-3, yang berarti bahwa saya bisa mendapatkan atribut, data-simbol, yang kita tahu harus berisi simbol yang terkait dengan perusahaan saya hanya diklik. Jika kita melompat kembali ke halaman keuangan kami, kita dapat melihat sekarang bahwa setelah saya mulai mengetik sesuatu seperti msft, kita tidak lagi mendapatkan hanya simbol saham, kita sekarang mendapatkan perusahaan yang sebenarnya. Tapi ketika saya klik pada salah satu perusahaan, kita dapat melihat bahwa kita benar-benar mengisi kotak teks tidak dengan nama perusahaan tetapi dengan apapun yang disimpan dalam atribut-atribut data. Dan jadi jika saya benar-benar memeriksa salah satu elemen dengan mengklik kanan dan mengklik Inspect Element, kita sebenarnya bisa melihat apa yang tampak seperti ini. 

Ingat ini adalah sesuatu yang kita buat dalam bahwa untuk loop ketika kami membangun string HTML. Kita bisa lihat di sini bahwa data-simbol memiliki nilai MSFT, yang besar. Itulah apa yang kita harapkan. Itulah simbol dan itulah bagaimana kami mendapat nilai yang kita perlu menggunakan dalam kotak teks ini. Itu cukup untuk bentuk kutipan karena itulah jenis membosankan. Mari kita membuat beberapa perangkat tambahan cepat ke halaman portofolio kami. Jika Anda telah menggunakan CS50 Keuangan untuk sementara dan Anda mulai membeli dan menjual banyak saham, akhirnya tabel ini akan mendapatkan cukup besar, dan Anda akan ingin ticker saham, tentu saja. Setelah tabel benar-benar, benar-benar besar, itu bisa berguna bagi pengguna untuk mencoba untuk mencari di atasnya. Di dalam kotak pencarian jika saya mulai mengetik sesuatu seperti Disney dan mencari saham Tikus saya Mickey, kita dapat melihat bahwa meja sekarang penyaringan berdasarkan apa yang saya hanya diketik masuk Fungsi ini terlihat super rumit, tapi itu benar-benar, benar-benar mudah dengan jQuery dan JavaScript. File portfolio.php berisi file JavaScript yang disebut portfolio.js. Mari kita lihat pada saat itu. Jadi html, js, portofolio. Di sinilah kita melakukan itu mencari di atas meja. Hal pertama yang harus saya lakukan adalah melampirkan sebuah event handler dengan kotak teks karena kita tahu bahwa kita ingin fungsi penyaringan kami memecat setiap kali pengguna menekan sesuatu karena kita tidak punya waktu untuk tombol Search. Hal pertama yang perlu kita lakukan adalah mencari tahu apa pengguna mencari, seperti yang kami lakukan sebelumnya. Kata kunci ini mengacu pada elemen saat pengguna berinteraksi dengan. 

Karena pengguna berinteraksi dengan kotak pencarian, $ Ini merupakan kotak pencarian, sehingga this.val memberi kita apa dalam kotak pencarian pengguna saat mengetik. Jadi, sekarang apa yang ingin kita lakukan adalah kita ingin iterate atas semua baris dalam meja kami. Untuk memilih semua baris di meja kami, saya memberikan tabel bahwa ID portofolio meja, dan setiap baris diwakili oleh elemen TR, sehingga pemilih ini akan kembali ke saya array besar dari semua baris di meja saya. Sekarang saya ingin iterate atas array. Aku bisa Anda untuk loop, tapi jQuery sebenarnya memberikan kita fungsi yang bagus disebut "masing-masing." Yang masing-masing yang dilakukan adalah masing mengambil satu argumen, dan argumen bahwa adalah fungsi. Apa yang akan dilakukan adalah itu akan menerapkan fungsi bahwa untuk setiap elemen dalam daftar ini. Fungsi ini membutuhkan satu argumen yang e, dan ketika fungsi ini dijalankan, e ini akan diganti dengan baris pertama, maka baris kedua, dan kemudian baris ketiga. Dengan cara ini, ini adalah hal yang sama seperti menjalankan untuk loop dan kemudian mencari elemen saat ini didasarkan pada bagian dalam indeks Anda untuk loop. Pada setiap iterasi, untuk masing-masing elemen dalam tabel, Saya ingin memeriksa apakah teks dari elemen - teks dari sel dalam baris - sesuai apa yang saya cari. Ini string panjang besar perintah adalah bagaimana saya bisa melakukan itu. Pertama, sekali lagi, ini sekarang mengacu pada - karena itu dalam sebuah fungsi baru - sekarang ini adalah baris saat ini dalam tabel. Saya ingin mengambil baris saat ini dalam tabel, dan saya ingin mendapatkan semua anak-anaknya. Ingat, DOM adalah pohon hirarkis, yang berarti bahwa unsur-unsur memiliki sejumlah anak. 

Ini anak fungsinya. Akan kembali ke saya kembali array dari semua elemen yang merupakan anak-anak, dalam hal ini, sebuah baris dalam tabel. Ini hanya cukup sel-sel dalam baris. Saya hanya ingin mencari di sel pertama. Fungsi ini. Pertama mengatakan memberikan elemen pertama dalam array itu. Kemudian fungsi teks mengatakan mendapatkan saya apa yang ada di dalamnya dari sel yang karena saya ingin mencari lebih dari teks itu. Akhirnya, mari kita mengubahnya menjadi huruf kecil, sehingga kita bisa melakukan query kasus teks sensitif. Akhirnya, kami ingin melihat apakah string dalam tabel berisi string kita cari. Fungsi indexOf dalam JavaScript tidak hanya itu. Ini memberitahu kita apakah atau tidak string ini berisi string lain. Jika memang benar bahwa sel berisi apa yang saya cari, maka saya ingin memastikan bahwa itu yang ditampilkan. Metode acara akan mengatakan, "Tampilkan elemen." Jika hal ini tidak terjadi, maka itu berarti apapun yang aku cari tidak terkandung dalam baris itu, dan jadi saya ingin menyembunyikan adalah dari pengguna. Yang mencapai bahwa efek penyaringan bagus di mana tidak lagi kita melihat seluruh tabel. Jika Anda tertarik pada bagaimana membuat ticker juga, Kami akan posting sumber online. Tapi itu benar-benar sederhana. JQuery memiliki metode mengagumkan untuk animasi ini dan memanipulasi CSS properti. Jadi, itu saja bagi saya. 

Lalu apa yang ada di depan? Seperti yang Anda akan melihat dalam beberapa hari, proposal proyek akhir jatuh tempo. Proposal tugas akhir akan mengajukan beberapa pertanyaan, namun di antara mereka akan ada tiga tonggak - satu "baik" tonggak sejarah, salah satu tonggak yang lebih baik, dan satu yang terbaik. Ide yang benar-benar untuk membantu kalian menetapkan harapan Anda sehingga minimal Anda akan senang dengan output proyek akhir Anda dan itu akan menjadi "baik" sejauh Anda khawatir. Tapi kemudian dalam kepentingan mendapatkan Anda untuk mencapai hanya sedikit untuk sesuatu yang lebih baik atau sesuatu yang terbaik, kita juga akan semacam mendorong Anda ke arah itu juga. The CS50 Hack-a-thon, sementara itu, dalam beberapa minggu. Biasanya, kami melakukan ini secara secara lotre karena kepentingan, tapi kemungkinan besar kita akan mengambil beberapa ratus dari kita dalam bus antar-jemput dari Harvard Square ke Kendall Square di mana Microsoft memiliki fasilitas yang indah tepat disebut "NERD" - New England Pusat Penelitian dan Pengembangan. Kita akan sampai di sana sekitar 8 pm Kami akan memiliki beberapa makanan. Sekitar 1:00 kita akan memiliki makanan lagi. Sekitar 5 am jika Anda masih terjaga kita akan kepala ke IHOP atau membawa Anda kembali ke kampus. Tujuan ada untuk menyelam ke dalam proyek akhir bersama teman-teman sekelas dan staf. Lalu beberapa hari kemudian adalah adil CS50, yang benar-benar dimaksudkan untuk menjadi kesempatan bagi kalian untuk memamerkan karya Anda dan prestasi untuk semester sementara menggosok bahu satu sama lain dan mendapatkan rasa apa yang semua orang lakukan. Dengan mengatakan bahwa, banyak terima kasih kepada Tommy dan Yusuf, dan kita akan melihat Anda pada hari Senin.  [Tepuk tangan]