[Powered by Google Translate] [Week 9, Sambungan] [David J. Malan - Universiti Harvard] [Ini adalah CS50. - CS50.TV] 

Ini adalah CS50. Ini adalah akhir sebanyak 9 minggu. Thank you very much. Akhirnya. Minggu 9. Saya mendapat ia. Hari ini kita meneruskan perbualan kami tentang pengaturcaraan web dengan mata ke arah projek akhir, bukan kerana anda perlu untuk melakukan sesuatu yang berasaskan web bagi projek-projek akhir tetapi kerana sama ada untuk projek akhir atau selepas CS50 ini sudah pasti arah di mana perisian moden akan. Tetapi ia sebenarnya bukan satu perkara yang mudah. Malah, salah satu perkara yang paling sukar untuk dilakukan adalah aspek reka bentuk. 

Sebagai contoh, oleh reka bentuk kita maksudkan sebenarnya mendapat antara muka pengguna atau pengalaman pengguna yang betul. Saya berani mengatakan bahawa - dan kita tahu dari set masalah baru-baru ini apabila beberapa anda disiarkan gripes anda tentang sekeping beberapa perisian atau perkakasan yang marah anda, sama ada di kampus atau di luar - terdapat banyak laman web di luar sana, terdapat banyak perkakasan di luar sana, yang jenis menghisap. Tetapi realitinya adalah bahawa membuat perkara-perkara yang mudah untuk digunakan lagi tetap berkuasa adalah satu cabaran yang amat sukar. Jadi untuk hari ini, saya bertanya kepada Yusuf dan Tommy untuk menyertai saya di sini supaya kita boleh mempunyai perbualan, kedua-duanya tentang reka bentuk dan apa jenis proses pemikiran harus bermula melalui kepala anda apabila anda reka bentuk projek akhir anda, usaha masa depan anda. Dan kemudian dengan bantuan Tommy kita akan melihat beberapa butiran pelaksanaan. Bagaimana anda boleh mempunyai wawasan beberapa di atas kertas atau dalam fikiran anda bahawa anda kemudiannya boleh melaksanakan programatik dengan menggunakan beberapa teknologi dan teknik, kita baru sahaja mula bercakap tentang, iaitu JavaScript dan sesuatu yang baru, iaitu AJAX, JavaScript tak segerak. Yang membolehkan anda untuk mewujudkan semua yang lebih dinamik antara muka pengguna dengan menjemput lebih dan lebih banyak data progresif dari pelayan. Jadi kita akan melihat beberapa coretan mereka juga hari ini. Sebagai mengetepikan, jika anda berminat untuk menumpukan perhatian dalam bidang sains komputer atau minoring dalam bidang sains komputer, tahu bahawa ini Jumaat di tengah hari dalam Maxwell Dworkin 221 ada akan menjadi acara pizza mana anda boleh belajar sedikit lebih lanjut mengenai sains komputer. Pada jalan keluar pintu anda hari ini, anda akan dapat memilih panduan tidak rasmi CS di Harvard. Kami akan meletakkan di atas tong sampah di luar pada ketinggian pinggang supaya jika anda ingin merebut ini dan belajar sedikit lebih lanjut mengenai CS, yang akan berada di sana untuk anda kerana ia adalah di titik 0 minggu. Juga jika anda ingin menyertai kami untuk makan tengahari CS50 Jumaat ini pada 01:15, mengetuai untuk cs50.net/lunch. Tanpa berlengah-lengah lagi, saya memberikan anda pengajaran sesama Yusuf Ong. Hi. [Tepukan] Terima kasih. Kali pertama saya belajar tentang reka bentuk adalah di dalam kelas yang di sini dipanggil CS179. 

Profesor pada masa itu memberitahu kita cerita tentang profesor lain yang telah pergi ke sebuah hotel dan menggunakan faucets. Bolehkah sesiapa beritahu saya apa 2 tombol di sebelah kiri dan kanan lakukan? [Pelajar] panas dan sejuk. >> Panas dan sejuk. Baik. Apa yang anda biasanya menjangkakan, kan? Ini profesor selepas menggunakan keran mahu mengambil mandi, dan dia bertindak untuk menggunakan ini. Beliau berpendapat kiri dan kanan adalah untuk panas dan sejuk, kan? Tetapi sesiapa sahaja boleh beritahu saya apa ini sebenarnya lakukan? Mana-mana tangan? [Sambutan pelajar didengar] >> Salah satu cadangan adalah? [Pelajar tindak balas didengar] >> Suhu? Jadi salah seorang daripada mereka mengawal suhu dan kawalan lain? >> [Pelajar] Air tekanan. Tekanan air. Baik. Profesor ini berjalan ke dalam ini dan, pemikiran mereka mengawal panas dan sejuk, bertukar yang betul, yang difikirkannya adalah untuk panas, sepanjang jalan sehingga kerana dia mahu mengambil mandi panas. Nah, ini tidak benar-benar sepadan, jadi dia mendapat pengalaman ini tidak sangat seronok berada di mandi sejuk, dan kita semua tahu apa yang merasakan seperti. Ini adalah satu contoh kecacatan reka bentuk. Apa yang saya maksudkan dengan itu adalah harapan dari keran tidak sepadan dengan apa yang keluar dari bilik mandi, yang merupakan jenis malang bagi dia. Jadi ini adalah satu contoh kecacatan reka bentuk yang berlaku dalam kehidupan sebenar. Tetapi kita melihat segala macam orang lain juga. Kami mungkin tidak peminat sistem MBTA. Ini adalah satu sistem keretapi bawah tanah dengan sebenarnya di London, yang berkata, "Butang ini tidak digunakan." Mengapa ia walaupun di sana? Mengapa kita peduli? Apabila saya adalah seorang kanak-kanak, menjadi satu celik teknologi di dalam rumah, apabila komputer akan berlanggar, ibu saya akan datang kepada saya, menunjukkan saya skrin ini dan meminta saya apa yang berlaku. 

Walaupun saya tidak tahu apa ini bermakna. [Ketawa] Apa? [Ketawa] Kadang-kadang kita berasa seperti pemaju perisian hanya Trolling kita. Sebagai pengguna kita seperti, "Apa yang sedang berlaku? Seseorang memberitahu kita." Ini semua datang ke isu reka bentuk. Reka bentuk, seperti yang kita boleh lihat, bukan semata-mata tentang estetika, ia bukan tentang bagaimana benda kelihatan. Kita lihat di sini bahawa ini sedikit pop-up di sini sebenarnya kelihatan agak baik. Ia mempunyai bayang-bayang jatuh di latar belakang, ia mempunyai radiuses sempadan berlaku. Ia adalah jenis cantik. Ia tidak benar-benar direka dengan baik kerana ia bukan sangat mesra pengguna. Itulah sedikit pop-up yang datang tidak benar-benar memberi saya apa-apa maklumat tentang apa yang berlaku, ia tidak beritahu saya apa-apa sebagai pengguna tentang bagaimana untuk pulih dari kesilapan itu. Kita mahu untuk berfikir tentang perkara-perkara yang reka bentuk adalah tidak. Pertama, ia tidak estetika. Ia juga tidak pemadat apl anda dengan tan fungsi yang tidak perlu. Jika anda sebuah restoran Thai, anda mungkin tidak mahu menjadi doktor gigi pada masa yang sama. Dan dengan Soalan Facebook, tidak bahawa ramai orang digunakan dan ia tidak benar-benar di teras apa yang mereka sedang membina. Dan jadi ia adalah baik untuk berfikir tentang tidak begitu banyak kuantiti perkara bahawa anda meletakkan permohonan anda tetapi kualiti dan bagaimana anda membuat bahawa pengalaman pengguna yang lebih baik dengan sebenarnya meningkatkan atas apa yang anda sudah mempunyai. 

Secara ringkas, reka bentuk memberitahu kita apa yang kita perlu membina. Sebagai contoh, jika kita membina sesuatu yang membolehkan kita mencari perkara, seperti Google, sebagai contoh, kita perlu melakukan perkara-perkara dalam cara yang yang memerlukan pengguna untuk mengambil banyak klik untuk mendapatkan apa yang mereka mahu, atau kita perlu melakukannya dengan cara yang, sebagai contoh, dengan Google Instant atau autolengkap yang membolehkan kita mendapat keputusan kami lebih cepat? Kejuruteraan melibatkan, seperti Tommy akan menunjukkan kepada anda, sebenarnya bangunan itu. Terdapat banyak jenis reka bentuk. Sebagai contoh, jika anda membina sesuatu untuk menggunakan sesuatu di negara Dunia Ketiga di mana tidak ada elektrik banyak atau bahawa teknologi banyak, anda perlu reka bentuk apa yang anda membina dengan cara yang mudah memberikan akses kepada penduduk di sana. Tetapi apa jenis keputusan reka bentuk yang lain mungkin terdapat atau mungkin terlibat dalam sesuatu seperti ini? Yeah. Saya melihat tangan. [Pelajar tindak balas didengar] >> Hak. Tepat sekali. Kebolehcapaian adalah satu perkara. Ramai orang tidak berfikir tentang, "Apa kira-kira pengguna saya?" seperti keterlaluan spektrum sama ada. Saya mempunyai pengguna yang mungkin mempunyai kurang upaya bahawa saya tidak memikirkan tentang dan saya hanya memikirkan tentang bentuk untuk pengguna umum. Internet adalah diakses oleh semua orang pada masa kini, dan saya harus bentuk bagi orang-orang baik. Apakah jenis keputusan reka bentuk yang lain yang mungkin anda buat? Ya. >> [Pelajar] Kos. Kos. Sangat baik. Satu lagi perkara yang kita mungkin asas keputusan reka bentuk kami adalah kos. Jika kita berada perniagaan, anda mahu membina sesuatu yang tidak mengambil kos yang banyak untuk menghasilkan tetapi boleh menjual pada kos yang amat tinggi atau boleh mendapatkan kita beberapa keuntungan. 

Ini adalah semua jenis reka bentuk, tetapi apabila kita membina sesuatu di Internet atau apabila kita sedang membina sesuatu yang mungkin tidak kos yang banyak untuk membina sekarang, seperti aplikasi Internet - anda tidak perlu membuang modal banyak ke dalamnya untuk membuat sesuatu yang sebenarnya berfungsi - apa yang kami lebih bimbang adalah pengalaman pengguna. Kami menyeru ini reka bentuk berpusatkan pengguna. Pada asasnya apa yang pengguna berpusatkan reka bentuk melibatkan meletakkan diri dalam kasut pengguna anda. Jika tanda-tanda seseorang sehingga untuk apa yang saya membina, mereka telah jelas datang kepada aplikasi tertentu saya dengan matlamat dalam fikiran, dengan tugas mereka mahu untuk melengkapkan. Dan kerja anda adalah bukan sahaja untuk membantu mereka melengkapkan tugas itu tetapi untuk membantu mereka menyelesaikan tugas itu dengan cara yang cekap, intuitif, dan, sebagai orang beberapa berkata di sana, boleh diakses. Apakah kecekapan maksudkan? Kecekapan bermakna berapa cepat pengguna saya menyiapkan tugasan yang diberi muka saya. Adakah ia mengambil banyak klik bagi mereka untuk mendapatkan dari satu tempat ke tempat yang lain? Adakah ia membosankan? Adakah mereka perlu melaksanakan banyak tugas-tugas berulang-ulang? Kami mahu menjadikan proses itu sebagai cekap yang mungkin supaya mereka tidak perlu melakukan perkara-macam perkara. Gerak hati, sebagai contoh, jika pengguna kelihatan muka saya, ia mudah bagi mereka untuk mendapatkan dari satu tempat ke tempat? Adakah ia mudah bagi mereka untuk mengetahui apa yang mereka perlu klik di antara muka saya dalam usaha mereka untuk mencapai matlamat atau tugas yang mereka mahu mencapai? 

Dan akhirnya, seperti seseorang berkata di sana, akses adalah sangat penting. [Penceramah lelaki] Ia datang akses untuk perkara-perkara seperti penglihatan, suka bagaimana saya sebenarnya reka bentuk sesuatu untuk seseorang yang buta? Oh. Bagi orang-orang yang tidak dapat melihat pada semua, kita mempunyai sesuatu yang dipanggil pembaca skrin. Apa yang anda harus lakukan ialah anda perlu membina laman web anda dengan cara yang bahawa, sebagai contoh, teknologi tertentu apa yang kita panggil - Terdapat banyak perkara sekarang. Saya fikir terdapat dipanggil pembaca skrin JAWS. Banyak perkara-perkara ini bergantung kepada apa yang kita panggil peraturan kawasan untuk membaca kepada pengguna apa yang hadir pada halaman. Bagi orang-orang yang tidak dapat melihat, anda perlu memastikan bahawa pembaca skrin sebenarnya boleh mengambil kandungan pada halaman dan sebenarnya boleh menunjukkan pengguna anda, jika anda tidak boleh melihat, sekurang-kurangnya anda masih boleh memahami kandungan pada halaman. Yeah. Okay. Cukuplah bercakap tentang reka bentuk yang baik. Mari kita bercakap tentang reka bentuk yang buruk. Ini adalah perkara-perkara yang anda tidak patut lakukan. Bolehkah sesiapa beritahu saya tentang pengalaman mereka dengan Craigslist dan apa yang mereka fikir tidak begitu besar tentang reka bentuk ini? Ya. >> [Pelajar] Saya fikir ada terlalu banyak perkataan dalam satu kawasan. Terlalu banyak perkataan, kan? Sepenuhnya hangat. Anda datang ke halaman ini dan anda disambut dengan sekumpulan seluruh perkara di sini yang mungkin tidak perkara itu kepada anda. Sebagai contoh, anda tinggal di salah satu negeri yang tidak bermula dengan huruf ini. Katakan anda tinggal di Texas atau sesuatu. 

Anda perlu untuk menatal semua jalan ke bawah halaman untuk sampai ke lokasi anda berada di. Saya dari Boston, jadi biarlah saya melihat di Massachusetts. Di manakah Massachusetts? Oh, ia di sini. Oh, ia Boston. Okay. Mari kita lihat di Boston. [Ketawa] Pretty hangat, kan? Perkara-perkara yang janggal di sana. [Ketawa] Katakan Saya mencari tempat untuk hidup. Berapa ramai orang sebenarnya telah digunakan Craigslist? Tan anda. Terdapat agak buruk cara melihat ini, tetapi mari kita lihat di ini. Apakah perbezaan antara img dan gambar? Bolehkah sesiapa beritahu saya? Terdapat sebenarnya tiada perbezaan. Mereka bermakna perkara yang sama, tetapi mereka mempunyai label yang berlainan bagi mereka untuk sebab-sebab tertentu. Jika saya klik pada Mempunyai Imej, tiada apa yang berlaku pada halaman. Saya sebenarnya mempunyai klik Search sekali lagi untuk sesuatu yang berlaku. Apa yang mungkin reka bentuk yang lebih baik keputusan yang boleh dilakukan di sana? Jika saya klik pada penapis itu, saya mungkin mahu untuk menapis oleh tindakan yang tertentu atau kategori tertentu. Jadi, bukannya mempunyai untuk tekan Cari lagi, saya hanya secara automatik boleh melakukan penapisan jenis Google gaya mana yang mereka lakukan serta-merta. [Malan] Tetapi tidak terbentuk seperti yang kita telah melihat mereka setakat perlu secara fizikal diserahkan dengan memukul Masukkan sekurang-kurangnya atau klik butang? Seperti yang anda lihat mereka setakat ini, anda sebenarnya perlu klik Submit untuk melakukan perkara-perkara. 

Tetapi sebagai Tommy akan menunjukkan kepada anda di tempat kedua, sebenarnya ada cara untuk anda bahawa apabila anda klik pada perkara yang ia secara automatik boleh menghantar apa yang kita panggil permintaan AJAX dan mendapatkan data kembali dan menapis keputusan anda serta-merta. Terdapat tan perkara-perkara yang salah dengan antara muka ini. [Malan] Bolehkah anda mencari untuk Cambridge? Terdapat sesuatu yang sedikit ganjil di sini di mana anda mengambil berat tentang Cambridge dan lagi anda mendapat Westford, Spring Hill, West Newton dan sebagainya. Mungkin tidak sesuai. >> Mungkin tidak ideal. Bagaimana saya mungkin tidak dapat untuk membuat pengalaman pengguna yang lebih baik pada halaman ini tertentu? Ya. >> [Pelajar] Arahan. Okay. Arahan dalam apa jenis rasa? [Pelajar] Sebagai contoh, satu perkara untuk pengguna kali pertama yang tidak tahu apa yang Craigslist adalah atau anda tidak tahu apa yang anda sepatutnya lakukan. Betul. Jadi menjelaskan apa yang Craigslist adalah pada halaman ini adalah penting. Kita sebenarnya boleh memberitahu pengguna apa halaman ini sebenarnya adalah untuk. Jika saya hanya melawat ini, saya melihat sekumpulan keseluruhan lokasi. Saya tidak tahu apa yang mereka maksudkan. Tetapi yang lebih penting, hanya melihat muka ini, ingat saya terpaksa tatal ke bawah tan perkara untuk mencari komuniti tertentu bahawa saya sebenarnya mengambil berat mengenai mengenai perkara ini. Apa cara yang lebih cepat saya boleh melakukannya? Ya. [Pelajar] Bahagikan mereka sehingga ke timur, barat wilayah. >> Okay. Saya boleh membahagikan mereka ke dalam kategori yang lebih yang boleh membantu saya lebih cepat menentukan bagaimana untuk sampai ke lokasi yang tertentu. [Pelajar] Letakkan senarai drop-down. >> Hak. Okay. Saya boleh menggunakan menu drop-down kerana kita mempunyai satu set tetap perkara dan kita boleh menunjukkan kepada mereka dalam menu drop-down. Dengan cara itu ia tidak mengambil ruang yang begitu banyak pada skrin. Tetapi lebih baik daripada itu, apa yang boleh kita lakukan? Ya. >> [Sambutan pelajar didengar] >> Bolehkah anda mengatakan bahawa lagi? >> [Pelajar] kotak Cari. Ya, kotak carian. Itu yang besar. Apa yang kita sebenarnya boleh lakukan ialah jika kita melihat kembali pada slaid, kotak carian. Autocomplete. Cara yang amat mudah untuk mencari melalui keputusan yang anda tahu dalam satu set. Jika saya mula menaip BO, hanya menunjukkan kepada saya semua keputusan yang mempunyai BO dalam mereka. Itu cara saya sangat mudah boleh mencari satu tertentu saya mahu pergi ke bukannya perlu untuk menatal melalui senarai ini benar-benar besar. 

Ini semua adalah pelbagai benar-benar buah-buahan rendah tergantung bahawa seseorang yang sedang melaksanakan Craigslist sebenarnya boleh lakukan untuk membuat pengalaman di laman web banyak yang lebih baik untuk pengguna tertentu mereka. Okay. Cukuplah bercakap tentang laman web yang buruk. Mari kita bercakap tentang Facebook. Apabila Facebook keluar, dan terutamanya Facebook gambar, terdapat banyak perkhidmatan lain pada masa yang boleh melakukan perkara yang sama. Mereka boleh mengatur gambar-gambar anda ke dalam album. Apa yang anda boleh lakukan ialah anda boleh menganjurkan mereka ke dalam set juga. Anda boleh menganjurkan mereka mengikut tarikh. Anda boleh melakukan semua perkara-perkara tertentu. Tetapi adakah sesiapa yang tahu apa yang dibuat Facebook gambar meletup pada masa ia dikeluarkan? Ya. >> [Pelajar] Tags. >> Tags Tepat sekali. Kami mempunyai Milo di sini, yang merupakan maskot anjing kami dengan bandana CS50 itu. Anda boleh melihat bahawa kita mempunyai ciri ini tagging di tengah-tengah. Dan apa yang dibuat gambar Facebook yang begitu menarik dari sudut pandangan kebolehgunaan adalah bahawa ia sebenarnya membolehkan orang melalui ini untuk melibatkan rakan-rakan mereka dalam gambar mereka. Untuk Facebook, sejak laman web mereka amat sosial, ia adalah tentang membina ini jenis suasana sosial. Itu meningkatkan pengalaman gambar lebih banyak kerana mereka sebenarnya boleh mula berkata, "Ini adalah hubungan antara rakyat, dan ini adalah gambar tentang orang yang anda benar-benar mengambil berat tentang. " Sebahagian daripada ia adalah juga jenis narsisisme. Orang-orang seperti untuk ditag dalam gambar dan perkara-perkara seperti itu. Walaupun itu tidak semestinya sifat manusia yang baik, pada masa yang sama ia berdasarkan keputusan reka bentuk yang baik kerana orang yang benar-benar mengambil berat tentang perkara-perkara seperti ini. Jadi itulah gambar Facebook. 

Tetapi mari kita bercakap Facebook lebih amnya. Saya pasti banyak orang di sini mempunyai pendapat tentang Facebook, kedua-dua reka bentuk keputusan yang baik dan keputusan reka bentuk yang buruk. Jadi mari kita meluahkan atau gembira. Datang pada. Saya tahu anda semua menggunakan Facebook. Seseorang perlu mempunyai sesuatu yang buruk untuk mengatakan atau sesuatu yang baik untuk mengatakan mengenainya. Ya. [Pelajar] Dalam berita ada banyak perkara yang saya tidak benar-benar mengambil berat tentang. Berita tidak menunjukkan banyak perkara yang anda mungkin tidak mengambil berat tentang. Anda mempunyai rakan-rakan di Facebook yang anda telah tidak dipenuhi selama 2 atau 3 tahun dan anda melihat keputusan berita mereka muncul dalam berita anda dan anda tidak benar-benar mengambil berat tentang ia. Facebook sebenarnya telah membuat satu usaha untuk membuat ini lebih baik, dan mereka telah benar-benar cuba untuk menolak keputusan yang berkaitan ke atas berita sebagai akhir-akhir ini jadi anda sebenarnya melihat perkara-perkara oleh rakan-rakan yang relevan kepada anda atau rakan-rakan rapat anda. Apa-apa lagi? Ya. [Respons pelajar didengar] >> Bolehkah anda mengatakan bahawa lagi? [Pelajar] iklan agak tidak mengganggu. >> Dalam apa rasa? [Pelajar tindak balas didengar] Mereka tidak mempunyai cahaya pada skrin, seperti sepanduk. Okay. Itulah baik. Jika anda ingat internet dari 90-an - >> [Malan] saya berada di sana. >> Beliau berada di sana. [Ketawa] Anda mungkin ingat berkelip GIF latar belakang, sparkly perkara, GeoCities gaya jenis perkara. Itu benar-benar tidak satu contoh reka bentuk yang baik kerana ia benar-benar mengganggu dari kandungan. Laman web Yale seni yang digunakan untuk mempunyai animasi GIF sebagai latar belakang mereka dan anda tidak boleh membaca apa-apa pada halaman, tetapi saya rasa seseorang sebenarnya bercakap kepada mereka dan kini ia sedikit berbeza. [Malan] Ia adalah lebih baik sekarang. >> Ia adalah lebih baik sekarang, seperti yang anda boleh lihat. >> [Malan] Oh yeah. Just great, hanya - Yeah. Okay. 

Sebahagian daripada ia juga membuat halaman anda mungkin sangat minimalis dan sangat difahami supaya perkara mengenai aliran halaman dalam cara yang sangat logik dan tidak mendapat dalam cara yang di antara satu sama lain. Macam Apa perkara-perkara lain yang baik mengenai Facebook atau buruk tentang Facebook? Mari kita hanya mempunyai perbualan reka bentuk di sini. Oh. Di mana? Yeah. [Pelajar] Sistem Timeline baru membolehkan anda untuk mencari profil orang tentang masa lalu mereka. Ooh, Timeline. Timeline adalah satu perkara yang besar kerana ia membolehkan anda tangkai kawan anda kembali apabila mereka berada di sekolah tinggi. Timeline adalah baik kerana ia membolehkan anda menapis kandungan banyak yang lebih cepat, ia membolehkan anda mencari perkara-perkara yang akan selainnya diambil anda masa yang benar-benar panjang untuk mencari hanya menatal ke bawah, up, up, up, up, up, seperti akan kembali dalam masa. Tetapi kemudian ada juga jenis Kelemahan dari segi pengalaman pengguna. Apa yang mungkin? Perkataan besar yang bermula dengan P-R. >> [Pelajar] Privasi. >> Privasi, betul-betul? Privasi adalah isu pengalaman pengguna yang besar. Ini adalah salah satu perkara yang saya tidak suka yang paling mengenai Facebook kini. [Ketawa] [Malan] Sebagaimana saya sekarang. Daud tidak menyedari ini sebenarnya berlaku sehingga semalam. Jadi sekarang dia tahu bahawa setiap kali saya berbual dia, saya tahu dia telah mengabaikan saya. [Malan] Bahagian janggal saya sebenarnya mengabaikan dia, dan saya tidak tahu dia tahu saya telah mengabaikan dia. [Ketawa] Privasi adalah isu yang besar. Sesiapa di sini boleh beritahu saya apa yang mungkin buruk tentang Facebook privasi selain hakikat bahawa mereka melakukan perkara-perkara seperti ini? Apakah ia amat sukar untuk dilakukan dengan hormat ke Facebook privasi? Bahawa jenis adalah soalan memimpin. Ya. >> [Pelajar] Sembunyikan gambar anda dari orang-orang tertentu. Betul. Tepat sekali, untuk menyembunyikan gambar anda dari orang-orang tertentu. Mereka mempunyai kecil ini, butang kecil di bahagian atas kanan yang membolehkan anda bertukar-tukar privasi foto. Pilihan privasi mereka sangat berbeza di antara pelbagai jenis menu. 

Mereka telah mendapat banyak lebih baik tentang perkara ini baru-baru ini, tetapi ia digunakan untuk menjadi kes bahawa apabila anda mahu untuk mencegah rakan-rakan anda dari melihat gambar, anda akan perlu untuk pergi melalui satu proses yang sangat rumit 5-langkah menjadi seperti, biarlah saya klik link ini, sekarang mari saya klik lagi, mari saya klik lagi, izinkan saya menyatakan yang orang tidak boleh melihat gambar saya. Yang tidak baik terutamanya pada bahagian Facebook kerana begitu banyak mengenai pengalaman pengguna sebenarnya memberikan mereka kebebasan untuk mengawal apa yang orang boleh melihat. Kami panggil ini kawalan pengguna dan kebebasan. Jika anda tidak membiarkan pengguna anda berbuat demikian dalam cara yang cekap dan intuitif, maka pengalaman pengguna anda tidak benar-benar yang besar pada semua.  Adakah anda semua suka untuk mengatakan apa-apa mengenai Facebook? Bagaimana saya mematikan ini? [Ong] Anda tidak boleh mematikan ini, dan itu adalah suatu kesilapan kebolehgunaan besar pada bahagian Facebook. Ini ciri - Saya sebenarnya melihat ke dalamnya semalam - ia adalah sama ada bahawa anda tidak boleh melakukannya atau ia dikebumikan tempat sangat, sangat jauh di ceruk Facebook kerana saya tidak dapat memikirkan bagaimana untuk mematikan fungsi ini pada semua. [Malan] Tetapi kadang-kadang keputusan ini tidak jelas kerana anda semua telah memberikan kita banyak maklum balas yang berguna pada aplikasi pelbagai CS50 dan laman web yang menggunakan kursus. Kami telah tidak dilaksanakan semua permintaan dan cadangan ini. 

Sebahagian daripada itu adalah untuk mendapatkan permintaan begitu banyak bahawa ia adalah satu fungsi masa, tetapi kadang-kadang kita hanya membuat keputusan yang sedar seperti, "Terima kasih kerana cadangan itu, tetapi kita tidak bersetuju." Jadi bagaimana anda sebenarnya membuat keputusan apa yang anda perlu lakukan jika pengguna anda fikir anda perlu melakukan sesuatu walaupun anda tidak semestinya? Ia adalah satu keseimbangan antara benar-benar mendengar apa yang pengguna anda mengatakan dan sebenarnya mempunyai beberapa jenis baris di mana anda berkata, "Kami tidak akan melakukan apa-pengguna berkata." Dan khususnya, saya fikir ada sebut oleh Henry Ford yang merumuskan ini cukup baik. "Jika saya telah meminta orang ramai apa yang mereka mahu, mereka akan berkata mereka mahu lebih cepat kuda." Sesiapa sahaja boleh menyelesaikan mengusik selain apa yang quote itu benar-benar bermakna? Ia bukan hanya yang pengguna tahu apa yang mereka mahu, tetapi ia lebih - [Pelajar] Mereka tidak tahu apa yang mungkin. Dalam bahagian mereka tidak tahu apa yang mungkin. Mengusik bahawa selain lebih sedikit. Apa yang kamu maksudkan dengan itu? [Sambutan pelajar didengar] Itulah baik. Apa yang saya fikir kita sedang cuba untuk mengatakan di sini adalah bahawa orang-orang tahu apa yang mereka mahu. Mereka mahu lebih cepat kuda. Apa yang mereka benar-benar mahu adalah keupayaan untuk bergerak lebih pantas, tetapi mereka tidak benar-benar tahu medium yang digunakan untuk mencapai itu. Apabila anda datang ke pengguna anda dan pengguna anda memberitahu anda sesuatu dan mereka memberitahu anda, "Kami mahu ciri-ciri dan ciri-ciri dan ciri-ciri ini," anda tidak mahu semestinya berfikir tentang, "Biar saya pergi ke hadapan "Dan melaksanakan apa yang mereka tegas mengatakan," tetapi apa yang anda mahu untuk berfikir tentang adalah, "Apakah jenis idea saya boleh mendapatkan daripada itu?" Apa yang mereka benar-benar mahu? 

Dan dari sana apa yang anda boleh lakukan ialah reka bentuk sesuatu yang memenuhi permintaan mereka tetapi tidak semestinya dalam cara yang pengguna menjangka ia akan berpuas hati. Jadi untuk sesuatu seperti projek akhir, dari segi yang amat nyata, apa heuristik berguna apabila ia datang untuk membuat sesuatu yang lebih baik, terutama jika pereka bentuk mempunyai keangkuhan ini tentang dia di mana anda jenis tahu apa yang terbaik, anda mungkin mengambil input dari pengguna anda, tetapi bagaimana anda sebenarnya pergi tentang mendapatkan maklum balas yang? Dalam projek-projek akhir, sangat kukuh, apa yang menghasilkan hasil yang optimum di sini? Apa yang menghasilkan hasil yang optimum - dan saya akan pergi lebih ini dalam kedua - adalah proses membangun dan kemudian menguji dan kemudian iterating. Apa yang saya maksudkan dengan ujian biasanya apabila anda reka bentuk sesuatu anda fikir ia adalah agak baik, seperti, "Saya seperti seorang pereka yang hebat. Semua orang akan menyukai ini." Dan kemudian anda meletakkan ia di luar sana dan orang tidak benar-benar suka untuk sebab-sebab tertentu. Apa yang anda perlu lakukan adalah anda perlu mengambil bahagian perkara-perkara yang orang lakukan seperti dan merombak perkara yang orang tidak suka. Ia berbunyi seperti satu proses yang sangat jelas, tetapi proses ini sentiasa iterating di atas apa yang anda telah dibina adalah satu proses yang membantu anda bukan sahaja menghalusi kemahiran reka bentuk anda sendiri tetapi juga membantu anda memperbaiki reka bentuk supaya orang sebenarnya menghargai produk anda lebih daripada yang mereka lakukan sebelum ini. 

Saya akan pergi ke atas contoh-contoh konkrit yang lebih daripada apa yang anda sebenarnya mungkin melakukan. Sebagai jenis contoh terakhir produk, marilah kita melihat KAYAK. KAYAK apabila ia keluar adalah sangat, sangat popular. Sesiapa sahaja boleh meneka mengapa? Apakah jenis perkara yang anda suka tentang ini jika anda telah menggunakan atau apakah pelbagai perkara yang anda tidak suka? Ya. >> [Sambutan pelajar didengar] >> Okay. Itulah sebahagian daripada ia membiarkan pengguna mempunyai pertanyaan yang lebih luas daripada satu yang sangat terhad seperti, "Anda perlu memilih tarikh mula anda "Dan anda perlu untuk memilih tarikh akhir anda." Malah, ia membolehkan anda menjadi fleksibel mengenainya dan ia memberikan anda semua penerbangan dalam lingkungan itu. Apa-apa lagi? [Pelajar] Mereka termasuk yuran dalam harga. Mereka melakukan termasuk yuran dalam harga. Cukai dan perkara yang benar-benar pergi terus ke dalam harga yang di sebelah kiri atas supaya anda tidak ditipu berfikir bahawa anda sebenarnya membayar untuk penerbangan $ 240 apabila ia benar-benar $ 330. Apa-apa lagi? Ya. [Sambutan pelajar didengar] Saya tidak pasti jika mereka benar-benar membolehkan anda berbuat demikian. Saya mungkin salah. Itu mungkin satu perkara yang menarik jika anda mahu meletakkan berat lanjut mengenai penapis tertentu supaya mereka menolak keputusan yang berkaitan dengan penapis yang ke atas. Tetapi sesiapa sahaja boleh beritahu saya apa yang begitu istimewa tentang sampingan ini kiri? Bagaimana kamu tradisinya mencari penerbangan pada perkhidmatan Internet sebelum ini? 

Ya. >> [Sambutan pelajar didengar] >> Bolehkah anda mengatakan bahawa - [Pelajar] Setiap syarikat penerbangan. >> Yeah. Setiap syarikat penerbangan mempunyai laman webnya sendiri. Ini mengukuhkan perkara. Dan? [Pelajar] Anda tahu apa yang masa anda meninggalkan. Anda tahu apa yang masa anda meninggalkan, tetapi berkaitan kepada penapis khususnya. Biar saya tarik sehingga KAYAK. Oh Tuhan, pop-up. Bad pengalaman pengguna. Apa yang berlaku apabila saya gerakkan slider ini? [Pelajar] Kemas kini automatik. >> [Ong] Kemas kini automatik. Itulah sesuatu yang sangat penting. Sebelum ini, apabila anda mahu untuk mencari penerbangan, anda terpaksa dimasukkan ke dalam lokasi input anda, lokasi output anda, tekan Search, ia akan memproses dan menunjukkan keputusan anda. Jika anda mahu menukar pertanyaan anda, anda akan perlu untuk menekan kembali dua kali, masukkan dalam pertanyaan yang baru dari awal, dan kemudian melakukannya berulang-ulang kali. Perkara yang baik tentang sesuatu seperti ini adalah ia menggunakan sangat perkara [difahami] di tengah-tengah. Apabila anda melakukan sesuatu seperti ini, ia pucuk dari permintaan dan ia kembali anda semua keputusan serta-merta. Ini jenis maklum balas segera adalah sesuatu yang dibuat KAYAK liar popular kerana ia adalah benar-benar mudah bagi saya untuk hanya menukar pertanyaan saya dan memikirkan perkara-perkara yang berada di sekeliling julat tertentu tanpa perlu pergi ke belakang dan sebagainya, belakang dan sebagainya, belakang dan sebagainya. Jadi ini adalah semua jenis perkara yang anda mahu berfikir tentang apabila anda mereka bentuk laman web anda. Bagaimana saya boleh membuat ia sangat berkesan untuk pengguna saya untuk pergi melalui apa yang mereka sedang bekerja di dan untuk sampai ke matlamat akhirnya mereka secepat mungkin? [Malan] Dan ke titik awal tentang pengguna tidak semestinya mengetahui apa yang mereka mahu Yusuf, berdasarkan apa yang anda semua kini tahu tentang HTML dan anda mempunyai kotak semak, butang radio, pilih menu, medan input dan sebagainya, bagaimana anda akan melaksanakan tanggapan memilih masa permulaan bagi penerbangan? 

Manakah orang-orang pelbagai mekanisme UI yang akan anda gunakan? Jika anda hanya tahu jumlah HTML yang telah diajar sebelum dan anda tahu input butang radio, kotak semak, drop-down, dan kotak input, apa yang akan pilihan semula jadi anda telah untuk memilih tarikh? [Pelajar] Input. Input. >> Atau bahkan drop-down dengan semua tarikh, betul-betul? Jadi dengan mekanisme UI yang lebih kompleks seperti ini pada sebelah kiri yang anda boleh melaksanakan, anda boleh membuat proses ini lebih intuitif dengan gelangsar kerana masa adalah berterusan, dan orang biasanya tidak berfikir ia dalam segi ketulan diskret. Semua hak. Perkara terakhir. Sepuluh heuristik kebolehgunaan. Semua perkara yang kita bercakap tentang mungkin jatuh di bawah salah satu kategori ini. Jika anda pergi ke link ini, yang laman web akan disiarkan dalam talian, anda sebenarnya akan dapat, kerana anda reka bentuk laman web anda, menyimpan heuristik ini dalam fikiran dan peraturan-peraturan ibu jari. Bagi projek-projek anda, apa yang saya cadangkan anda lakukan dalam usaha untuk mereka bentuk aplikasi anda lebih baik adalah untuk melakukan prototaip kertas pertama. Apabila anda berfikir tentang permohonan anda, sangat cepat lakarkan apa yang anda mahu ia kelihatan seperti dan pastikan semua kotak disusun dalam cara yang sangat intuitif bagi pengguna untuk menggunakan dan juga menunjukkan ini prototaip kertas kepada kawan-kawan anda dan mula kumpulan fokus. Hanya mendapat 2 atau 3 orang bersama-sama dan meminta mereka hanya ketuk atas prototaip kertas, dan menunjukkan mereka skrin baru untuk melihat jika mereka benar-benar memahami apa yang berlaku. 

Apa yang anda mahu lakukan adalah memberikan mereka tugas, motivasi tugas itu, dan hanya memberikan mereka app dan biarkan mereka menggunakannya. Tidak memberi mereka arahan lebih dari itu. Anda mahu sebenarnya membiarkan mereka berinteraksi dengan aplikasi anda dalam satu cara yang membolehkan anda melihat bagaimana mereka akan menggunakannya jika anda tidak berdiri di sebelah kepada mereka. Dan itulah yang sangat penting. Yang akan memberi anda banyak pandangan tentang orang mendapat sekitar perkara-perkara tertentu dalam cara yang saya tidak berniat mereka? Adakah mereka menggunakan mekanisme UI tertentu pada skrin dengan cara yang jenis hacky? Saya tidak berniat bagi mereka untuk melakukannya dengan cara itu. Dan sebaik sahaja anda selesai dengan itu, apa yang anda mahu lakukan? Batu reka bentuk anda, kan? Apa yang anda mahu lakukan adalah anda mahu untuk membangunkan dan kemudian melakukan proses itu lagi. Jadi menunjukkan ia kepada rakan-rakan apabila anda telah dibangunkan, menguji, membangun, menguji, membangun, menguji, melelar, atas dan ke atas dan ke hadapan. Reka bentuk adalah sangat proses lelaran dalam hal ini. Anda sebenarnya perlu untuk membina sesuatu dan kemudian menyedari perkara mengenai bahawa anda tidak menyedari sebelum dan kembali dan memperbaiki dari itu. Kini, sebagai sebahagian pembangunan, itulah yang Tommy akan menunjukkan kepada anda selepas rehat dan bagaimana anda mungkin tidak dapat untuk melaksanakan sesuatu seperti autolengkap dalam cara yang agak mudah. [Malan] Sebagai Tommy set up di sini, soalan kemudian. Banyak laman web yang terawal - dan apabila Yusuf berkata 1990-an gaya laman web, ia adalah pelaksanaan di mana jika anda mahu pilih masa mula dan masa akhir, terus-terang, kembali pada hari dan walaupun pada beberapa laman web hari ini, cara yang anda lakukan ini ialah anda memilih sejam dari drop-down, anda memilih minit dari drop-down, mungkin anda memilih AM, PM, dan kemudian anda lakukan bahawa 3 kali lebih. Dan sebagainya dengan 6 klik dan mungkin menatal beberapa pengguna anda sebenarnya boleh menyediakan beberapa jenis tarikh dan / atau pelbagai masa dalam erti kata ini. 

Jadi pasti suboptimal dan lagi setakat ini kita telah melihat tiada keupayaan ekspresif dalam mana-mana bahasa kita telah melihat untuk melakukan sesuatu seksi seperti gelangsar ini masa mula dan masa akhir. Tetapi jika anda berfikir kembali ke 0 minggu apabila kita bercakap tentang Gores, sana juga tidak ada widget yang hanya melakukan perkara-perkara tertentu. Anda benar-benar hanya mempunyai asas seperti gelung dan syarat dan sebagainya. Jadi jenis hanya memikirkan sangat abstrak kini, bebas daripada butir-butir HTML, apa yang benar-benar berlaku dengan sesuatu seperti ini masa mula dan akhir masa gelangsar? Apabila saya menggerakkan tetikus saya dan saya klik pada simbol lobak merah yang sedikit di sebelah kiri dan mula mengheret, programatik, apa yang anda mahu menjadi mampu untuk melaksanakan untuk membuat yang berlaku? Apa soalan, apa ungkapan Boolean yang anda mahu menjadi mampu untuk bertanya? Apa yang benar-benar berlaku? Sammy? [Pelajar] Di mana kedudukan kursor? Baik >>. Di manakah kedudukan kursor? Ini adalah sesuatu yang kita perlu untuk meluahkan kembali dalam Gores, sama ada ia berdasarkan lokasi atau bahkan warna atau sebagainya. Anda mungkin ingat pernah jadi secara ringkas pada hari Isnin terdapat semua perkara-perkara ini dipanggil acara dalam dunia web, dan sebagainya ada perkara seperti onclick dan onkeypress dan onkeyup dan onmouseover dan onmouseout. Jadi sedar bahawa walaupun ini perkara yang telah kami ambil untuk diberikan di Web dengan laman seperti Facebook dan Gmail, walaupun anda tidak mempunyai idea bagaimana anda mungkin akan melaksanakan bahawa kerana tiada apa-apa walaupun seperti ia dalam syarahan atau Set Masalah 7, menyedari bahawa dengan asas-asas yang sama, dengan HTTP dan parameter dan GET dan POST, dengan input asas HTML yang kita telah melihat setakat ini dan dalam masa dengan mekanisme perancangan yang Tommy tentang untuk memperkenalkan anda boleh mula untuk meluahkan diri anda sama seperti yang anda lakukan di titik 0 minggu oleh sangat intuitif mengheret dan menjatuhkan. 

Jadi dengan itu berkata, Tommy MacWilliam dan beberapa keping teka-teki baru bagi kami untuk Web. Semua hak. Nama saya ialah Tommy dan saya akan bercakap tentang JavaScript. Hanya penafian: Saya berpendapat bahawa JavaScript adalah bahasa pengaturcaraan yang terbaik di seluruh dunia keseluruhan. Terdapat banyak orang yang tidak bersetuju dengan saya, tetapi ia hanya menakjubkan. Sebaik sahaja anda pergi kembali kepada C, jika anda mempunyai untuk menulis C untuk kelas lain atau beberapa bahasa lain, ia hanya benar-benar mengecewakan dalam semua butiran tahap rendah anda mempunyai untuk menjadi buntu. Jadi, jika anda pernah berasa sedih tentang bagaimana menjengkelkan C adalah untuk menulis, hanya pergi kembali, menulis beberapa JavaScript. Ia adalah nirwana. Anda akan berasa lebih baik tentang hari buruk anda. Banyak keajaiban JavaScript datang daripada keupayaan untuk memanipulasi perkara yang sudah pada halaman. Apabila kita menulis skrip PHP kami, mereka telah dilaksanakan pada pelayan, dan akhirnya bahawa PHP skrip mungkin output HTML beberapa. Itu HTML telah dihantar kepada pelanggan, dan kemudian itu adalah ia. Jika PHP mahu menambah butang ke halaman, sebagai contoh, ia boleh tidak benar-benar berbuat demikian. Ia akan menyebabkan keseluruhan fail HTML baru dan menghantar bahawa untuk pelayar. Dengan JavaScript yang kita tahu bahawa kita boleh mengemas kini perkara manakala mereka sudah berada pada halaman, dan kerana ini kita boleh memberikan maklum balas yang lebih segera, yang benar-benar akan meningkatkan pengalaman pengguna di laman web kami. Just a recap cepat selectors JavaScript. Kita tahu bahawa apabila kita memuat turun halaman HTML, yang akan diwakili dalam DOM. 

DOM ingat hanya pokok ini besar mana elemen berkaitan dalam hierarki ini besar. Apabila kita bekerja dengan pangkalan data dalam pset 7, salah satu perkara pertama yang kita perlu tahu bagaimana untuk melakukannya query pangkalan data. Kami mempunyai jadual ini pengguna yang besar, dan kadang-kadang kita hanya mahu mengatakan, "Saya hanya mahu beberapa pengguna yang sepadan dengan keadaan beberapa." Begitu juga, apabila kita mempunyai DOM kita memerlukan beberapa cara menyoal ia. Kami memerlukan beberapa cara untuk mengatakan, "Saya mahu semua butang yang kelihatan seperti ini "Atau semua imej pada halaman." Dan ini selectors membolehkan kita berbuat demikian. Jadi hanya recap cepat. Ini yang pertama di sini, ini # mengemukakan, apakah yang akan pilih? Adakah sesiapa yang ingat? [Sambutan pelajar didengar] >> Yeah, tepat. Ini akan memilih elemen pada halaman yang mempunyai ID mengemukakan. Dan supaya tag hash kata pemilih ini akan bekerja dengan ID. Bagaimana kira-kira satu kedua, ini berpusatkan, apa yang akan pilih? Yeah. >> [Pelajar] Kelas. >> Tepat sekali. Ini kini akan pilih oleh kelas. Perbezaan antara ID dan kelas di sini adalah umumnya ID harus unik dalam apa-apa ruang anda mencari lebih. Jadi, jika anda mencari laman web keseluruhan, anda benar-benar hanya perlu mempunyai elemen 1 dengan ID yang tertentu, jadi dalam kes ini mengemukakan. Dengan kelas, di sisi lain, kita boleh mempunyai lebih daripada 1 elemen pada halaman yang sama dengan kelas yang sama. Ini mungkin berguna untuk mengatakan saya mahu untuk memilih semua itu berpusat pada halaman bukannya hanya 1 perkara. 

Dan akhirnya, satu ini terakhir di sini adalah sedikit lebih rumit, tetapi apa yang ini akan untuk memilih dari DOM? [Pelajar tindak balas didengar] >> Apa itu? [Pelajar] Apa sahaja yang tag. >> Kami mempunyai 2 bahagian di sini. Bahagian kedua akan mengatakan saya ingin pilih tag ini dengan tag input, supaya mana-mana elemen yang merupakan tag input. Tetapi saya tidak mahu untuk hanya pilih semua input kerana sesuatu seperti butang submit boleh menjadi input dan sesuatu seperti kotak teks boleh menjadi input. Jadi dengan kurungan persegi yang saya katakan saya hanya mahu untuk memilih unsur-unsur yang teks jenis. Tempat di dalam tag HTML saya, saya mempunyai sifat yang dipanggil jenis, dan nilai atribut yang mempunyai untuk menjadi teks. Jadi bagaimana pula bahagian pertama ini di sini? Perkataan pertama pemilih ini adalah bentuk maka saya mempunyai ruang dan kemudian bahagian ini input. Apakah yang dilakukan, meletakkan borang di hadapannya? Ini akan pada dasarnya menghadkan pertanyaan kami. Ia boleh menjadi kes bahawa kita mempunyai beberapa input pada halaman yang bukan keturunan borang. Apakah ini akan lakukan ini akan mengatakan saya hanya mahu tag input yang mempunyai tempat di atas mereka beberapa elemen induk borang. Dan sebagainya dengan cara ini kita boleh membuat pertanyaan lebih hierarki supaya kita tidak hanya perlu untuk memilih semua padanan pemilih yang diberikan. Kita boleh jenis had skop pertanyaan itu kepada sesuatu yang lain. Jadi sekarang kita tahu bagaimana untuk memilih unsur-unsur pada halaman, mari kita bercakap sedikit tentang AJAX. AJAX adalah singkatan masih sangat bergaya yang bermaksud JavaScript dan XML tak segerak. Ia hanya kebetulan bahawa XML adalah hanya beberapa cara untuk mewakili data. 

Itu jenis populariti yang hilang baru-baru ini, jadi X AJAX tidak digunakan sepanjang masa. Pada asasnya, apa yang AJAX membolehkan kita lakukan adalah membuat permintaan HTTP dari konteks JavaScript. Apabila kita berada dalam pelayar web kami dan kami sedang mengemudi sekitar laman dan kita klik link, apa yang pelayar kita akan lakukan adalah membuat permintaan HTTP untuk apa jua pautan kita klik. Tetapi itu bukan sentiasa ideal kerana jika itu berlaku, maka seperti Daud berkata, kita sentiasa perlu untuk membuat pengguna klik butang Submit atau klik pautan untuk membuat apa-apa yang berlaku yang akan melibatkan permintaan HTTP. Jadi dengan AJAX kita boleh membuat permintaan ini bagi pihak JavaScript. Ini bermakna apabila pengguna berinteraksi dengan halaman atau apa-apa yang berlaku, kita sebenarnya boleh membuat permintaan perancangan untuk fail PHP yang lain di laman web kami atau apa-apa lagi dan mendapatkan data bahawa fail yang memuntahkannya keluar. Mari kita lihat pada contoh AJAX. Ini adalah halaman Kewangan CS50 kami yang diharapkan sesetengah daripada kita sudah biasa. Jika kita melihat HTML halaman ini, kita lihat di sini bahawa saya telah menambah beberapa perkara, salah satu yang saya telah diberikan borang ini ID. Saya telah berkata id = "borang-quote". Saya telah melakukan ini hanya kerana ia akan membuat ini sedikit lebih mudah untuk memilih dari DOM kerana saya hanya boleh membuat pertanyaan yang sangat mudah. Apa yang saya mahu lakukan di sini ialah saya mahu menetapkan beberapa masalah dengan CS50 Kewangan. Jadi, jika kita pergi ke finance.cs50.net, setiap kali saya ingin mendapatkan sebut harga, saya perlu klik butang ini Dapatkan Quote, dan bahawa Dapatkan butang Quote kemudian membawa saya ke seluruh halaman lain. Dan jika saya ingin quote lain, saya perlu memukul butang Kembali dan kemudian saya menaip sendiri, Saya mendapat sebut harga, dan saya memukul butang Kembali. Ini benar-benar tidak adalah pengalaman pengguna yang terbaik. Siapa yang benar-benar akan menggunakan laman web ini jika ia lambat untuk mendapatkan harga saham? Jadi apa yang kita mahu lakukan dengan AJAX adalah membuang bahawa langkah pergi ke halaman yang berasingan untuk melihat keputusan. 

Apa yang kita benar-benar hanya meminta bahawa itu harga yang benar-benar kecil, dan itulah hanya jumlah yang benar-benar kecil data. Jadi tidak ada keperluan untuk saya untuk pergi satu lagi halaman HTML keseluruhan, download kumpulan keseluruhannya baru HTML, mungkin memuat turun beberapa lebih banyak imej, beberapa fail CSS yang lain hanya bagi saya untuk menjawab soalan yang sangat mudah berapa kos ini saham. Dengan AJAX kita boleh membuat banyak ini lebih mudah. Kita lihat di sini bahawa saya menghubungkan dalam fail JavaScript yang dipanggil quote.js. Mari kita sebenarnya membuka fail tersebut. Tidak ada. Semua fail JavaScript saya akan terletak dalam HTML supaya pelayar web boleh mengaksesnya. Kemudian kita mempunyai direktori yang berasingan di sini untuk menutup, dan kini di sini adalah quote.js. Pada bahagian atas fail ini ini mengatakan di sini bahawa saya mahu menunggu untuk keseluruhan halaman dimuatkan sebelum saya cuba untuk berbuat apa-apa. Mengapa yang diperlukan? Ia ternyata bahawa perkara yang akan datang yang saya akan lakukan di sini adalah permulaan mencari unsur yang sepadan dengan pemilih beberapa. Jika JavaScript ini pernah dilaksanakan sebelum elemen ini dimuatkan pada halaman, maka semua yang saya cuba lakukan tidak akan bekerja kerana saya akan cuba untuk memilih sesuatu yang tidak ada lagi. Jadi ini beratur atas mengatakan saya mahu anda menunggu sehingga semuanya dimuatkan jadi kita dijamin bahawa mana-mana unsur-unsur Saya cari sebenarnya pada halaman. Ini tanda dollar di sini bermakna saya menggunakan perpustakaan yang dipanggil jQuery. Ini perpustakaan jQuery membolehkan kita untuk menggunakan ini selectors bahawa kita hanya melihat. Dengan mengatakan $ kemudian lulus dalam sebagai hujah ini # bentuk quote, Saya kini memilih borang bahawa kita hanya mengambil melihat. Sekarang saya mempunyai perwakilan bentuk bahawa dalam ingatan entah bagaimana. 

Pada objek ini sekarang, perwakilan ini borang, Saya kini menggunakan fungsi yang dipanggil. Apa fungsi ini tidak adalah ia akan melampirkan pengendali acara. Acara bahawa kita akan mendengar adalah acara submit. Oleh itu, apabila pengguna klik yang butang Submit atau menekan Enter, acara ini akan api. Dengan hooking ke dalam ini, saya kini boleh mengatasi kelakuan lalai borang. Tanpa JavaScript ini, borang itu akan mengemukakan apa jua PHP fail kita digunakan dalam atribut tindakan itu. Tetapi sebaliknya, saya kini mengatakan, tunggu, tunggu, tunggu, saya tidak mahu anda untuk benar-benar berbuat demikian. Saya mahu ini berlaku sebelum anda pergi dan cuba untuk mengemukakan kepada fail PHP beberapa. Sekarang apa yang saya mahu lakukan? Pada ketika ini, saya mahu menggunakan AJAX entah bagaimana untuk memuatkan apa yang harga saham. Perkara pertama yang saya perlu tahu apa saham pengguna sedang mencari. Untuk melakukan bahawa saya akan menggunakan pemilih lain. Ini adalah pemilih ketiga kita melihat sebelum. Ini mengatakan bahawa saya mahu untuk memulakan bentuk elemen ini dengan ID borang sebut harga. Kemudian di suatu tempat di dalam bentuk yang perlu ada elemen input yang mempunyai nama simbol. Jika kita melihat kembali pada HTML kita, kita melihat bahawa kita mempunyai input [name = simbol]. Ini bermakna bahawa ini akan memilih bahawa kotak teks bahawa pengguna sedang menaip ke dalam. Itu bagus. Kami mempunyai kotak teks. Sekarang kita hanya perlu tahu apa yang di dalamnya. Untuk berbuat demikian kita boleh memanggil kaedah ini di sini, ini Val., dan ini mengatakan bahawa saya tahu apa kotak teks anda mempunyai. Saya mahu anda beritahu saya apa yang ia adalah pengguna yang ditaip ke dalam kotak teks yang. Sekarang kita mempunyai rentetan yang dipanggil simbol yang sama kepada apa yang pengguna ditaip masuk Itu bagus. Kita boleh menggunakan rentetan bahawa 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 berbeza yang diberikan kepada kita oleh jQuery. AJAX fungsi ini adalah apa yang sebenarnya akan membuat ini permintaan HTTP. Jadi, kita perlu beritahu beberapa perkara. Perkara pertama yang kita perlu memberitahu fungsi ini adalah di mana saya mahu permintaan untuk pergi. Tempat di dalam projek saya, saya mempunyai fail ini di dalam direktori HTML dipanggil quote.php. Saya boleh mengakses fail ini, kita lihat, sama seperti ini, kalau saya pergi ke localhost / quote.php. 

Saya mahu JavaScript saya untuk membuat permintaan ke halaman tersebut. Apakah jenis permintaan sekarang? Kita melihat sebelum itu bentuk mempunyai bahawa kaedah = "post" sifat, dan ini bermakna ia akan membuat permintaan POST, jadi ia tidak akan meletakkan apa-apa dalam URL, bukannya permintaan GET, yang hanya akan dipecat jika kita hanya mengakses halaman dengan pelayar web, sebagai contoh. Sekarang kita telah berkata, saya mahu untuk membuat permintaan HTTP POST ke halaman yang terletak di quote.php. Apabila kita menyerahkan borang, ingat kita boleh mengakses elemen input dalam bentuk yang dengan pembolehubah yang $ _POST. Setakat ini dalam cerita yang telah kita sebenarnya tidak dihantar bersama-sama sebarang data lagi. Kami telah hanya berkata kita membuat permintaan AJAX dan di sini adalah jenis permintaan kita sedang membuat. Sekarang kita perlu sebenarnya menghantar beberapa data ke halaman. Untuk melakukan yang boleh kita gunakan harta ini dipanggil data. Nilai harta tanah ini sebenarnya adalah pelbagai bersekutu. Sebab untuk ini adalah ia membolehkan kita untuk menghantar lebih daripada sekadar sekeping 1 data. Itulah sebabnya kita mempunyai pendakap kerinting sini bersarang di dalam ini pendakap kerinting lain. Kekunci dalam barisan bersekutu akan menjadi perkara yang sama sebagai nama mereka ciri-ciri dalam elemen borang kami. Ini bermakna bahawa jika saya menghantar sepanjang kunci simbol, yang bermakna halaman PHP saya boleh mengakses data ini dengan $ _POST [simbol] sama seperti yang kami lakukan sebelum ini apabila kita telah menyerahkan borang. Dan kini data sebenar kita mahu menghantar akan menjadi dalam nilai array ini bersekutu. 

Kami disimpan teks ini dalam simbol ubah dipanggil, dan sebagainya kita menghantar bersama-sama kini merupakan kunci simbol dan nilai apa jua pengguna ditaip masuk Sekarang kita telah dibuat ini permintaan HTTP, fail PHP kita telah dilaksanakan, dan ia akan menghantar beberapa data kembali sekarang untuk pelanggan yang hanya dibuat permintaan ini. Sekarang kita perlu bertindak balas terhadap apa jua pelayan berkata kepada kami. Untuk melakukan bahawa kita mempunyai harta terakhir di sini dipanggil kejayaan. Nilai kunci kejayaan ini sebenarnya akan menjadi fungsi, dan ini adalah salah satu perkara yang benar-benar sejuk yang anda boleh lakukan dengan JavaScript. Bukan sahaja anda boleh mempunyai ints atau tatasusunan sebagai dalam nilai array bersekutu, kita juga boleh mempunyai fungsi. Jadi dengan mengatakan kejayaan, ini adalah kunci saya. Kolon A kata di sini datang nilai, dan kini nilai ini sebenarnya berfungsi. Jadi kita tidak perlu untuk memberikan fungsi ini nama per se. Kita hanya boleh mengatakan ini akan menjadi beberapa fungsi. Ia akan mengambil masa 1 hujah. Hujah fungsi ini akan menjadi apa jua pelayan menghantar kami kembali daripada permintaan. Sama seperti apabila pelayar kami membuat permintaan, pelayan menghantar sesuatu kembali dan pelayar memaparkan, dalam konteks AJAX kita hanya membuat permintaan, pelayan menghantar sesuatu kembali, dan kini kita telah yang diwakili sebagai rentetan. Dengan tali itu, saya hanya ingin memaparkan bahawa pada halaman. Untuk melakukan bahawa saya akan mempunyai satu pemilih lepas. Saya mahu memilih elemen dengan harga ID. Ini adalah hanya div kosong bahawa saya telah dicipta pada halaman, dan saya mahu untuk menetapkan kandungan div bahawa untuk menjadi apa sahaja pelayan menghantar kami kembali. Saya telah benar-benar diubahsuai quote.php sedikit. 

Bukannya memanggil render dan menjadikan beberapa halaman, quote.php kini hanya akan mencetak nilai saham sebagai rentetan. Jadi jika anda adalah untuk sebenarnya melawat halaman, anda hanya akan melihat bahawa rentetan kecil apa jua harga saham. Satu perkara terakhir yang perlu kita lakukan di sini adalah hanya memastikan fungsi ini mengembalikan palsu. Apa ini mengatakan adalah bahawa jika saya di dalam pengendali acara dan bahawa pengendali acara kembali palsu dan bukannya kembali benar, yang bermaksud bahawa saya tidak mahu acara asal kepada api. Dalam kes ini, jika kita tidak mempunyai apa-apa JavaScript dan kita mengemukakan borang, pelayar web kami akan berkata, "Saya akan menghantar data bersama-sama," dan mereka akan menghantar anda ke laman lain. Kerana kita menggunakan AJAX sekarang, tidak ada keperluan untuk menghantar pengguna ke halaman lain. Kami hanya akan memaparkan keputusan dinamik pada halaman ini sama. Kami benar-benar tidak mahu mereka pergi ke mana-mana, dan saya mahu kekal di halaman yang sama. Jadi dengan kembali palsu, kita memastikan bahawa borang tidak berbuat demikian untuk kita. Mari kita melihat apa ini sebenarnya kelihatan seperti. Halaman quote kami kelihatan sama. Biar saya tarik sehingga pemeriksa turun di sini supaya kita dapat melihat apa yang berlaku. Jadikan ia sedikit kurang besar. Ingat jika kita membuka tab Network, ini adalah di mana kita boleh melihat semua permintaan HTTP yang berlaku pada halaman. 

Untuk simbol izinkan saya menaip AAPL dan klik Dapatkan Quote. Sekarang kita melihat bahawa saham Apple kos beberapa nombor dolar hanya muncul pada halaman, tetapi URL tidak berubah pada semua. Malah, di sini adalah permintaan HTTP yang kita hanya dibuat. Kami membuat permintaan POST kepada quote.php. Yang masuk akal. Ini adalah apa yang pelayan menghantar kami kembali. Ia bukan lagi dokumen ini gergasi HTML dengan imej dan hal-hal seperti itu, ia hanya satu baris teks, dan kemudian kita hanya dipaparkan baris teks. Jika kita kembali kepada tajuk dan lihat apa yang kita sebenarnya dihantar dalam permintaan HTTP ini, kita boleh melihat di sini bahawa kita dihantar bersama-sama kunci simbol dan nilai AAPL, yang adalah apa yang pengguna ditaip masuk Ini adalah bagus, tetapi ia masih sedikit menjengkelkan. Saya masih perlu klik butang ini untuk mendapatkan sebut harga saham. Kami orang sibuk dan kita tidak mempunyai masa untuk klik butang. Google menyedari ini sedikit manakala yang lalu apabila mereka melaksanakan Google Instant. Apa yang Google Instant tidak adalah seperti yang anda sedang menaip ia hanya bermula memaparkan keputusan untuk anda jadi anda tidak perlu risau tentang walaupun mengklik Search. Sebenarnya, cerita yang menyeronokkan berkaitan itu. Setelah Google Instant keluar, orang seperti, "Wah, ini adalah sangat menakjubkan." "Ini adalah begitu sejuk." Dan seorang pelajar di Stanford yang merupakan 19 pada masa itu membuat laman ini dipanggil YouTube Segera. Semua Segera YouTube tidak berkesan mencari YouTube serta-merta. Jadi bukannya perlu pergi untuk YouTube.com dan memukul Cari, apabila saya mula menaip menjadi sesuatu YouTube segera seperti CS50, kita boleh lihat di sini bahawa ia cuba pada sambungan internet yang perlahan mengisi keputusan ini hidup. Untuk melakukan bahawa kita sebenarnya boleh membuat pengubahsuaian yang sangat mudah ke fail quote.js kami. Sekarang kita sedang melampirkan acara ini apabila borang itu dikemukakan. Kita tidak benar-benar mahu untuk membuat pengguna mengemukakan borang itu lagi, jadi mari kita sebaliknya api acara ini setiap kali pengguna menekan kekunci. Untuk melakukan yang pertama mari menukar acara dari mengemukakan kepada keyup. Itu bermakna bahawa bukannya menunggu untuk mendapatkan borang untuk mengemukakan, setiap kali kekunci ditekan, sesuatu yang akan berlaku. Ia tidak lagi masuk akal untuk melampirkan acara ini keyup ke seluruh bentuk. Kami benar-benar hanya mengambil berat tentang kotak carian yang. 

Untuk memilih yang kini, kita boleh menukar ini menjadi, bukannya bentuk quote, borang sebut harga dan kita akan mempunyai input (menaip teks =) atau kita boleh mengatakan (namakan simbol =) - apa sahaja yang kita mahu. Sekarang ada satu perkara terakhir yang perlu kita lakukan. Ingat ke sini apabila kita berkata pulangan palsu kita kata kita tidak mahu bahawa peristiwa lalai kepada api. Tetapi ia hanya kebetulan bahawa jika kita melumpuhkan bahawa kini, apa sahaja yang kita taip tidak akan muncul dalam pelayar lagi kerana yang akan menjadi tingkah laku lalai menaip ke dalam kotak teks. Kita tidak mahu lagi untuk mengatasi itu, jadi mari kita memusnahkan pulangan palsu ini. Jika kita menyimpan itu dan muatkan semula halaman, kini apabila saya mula menaip, AAPL anda akan melihat bahawa harga saham di bawah sini ialah untuk menamatkan secara automatik. Jadi di sini adalah CS50 Kewangan Segera. Sebenarnya cerita yang menyeronokkan tentang Segera YouTube pelajar yang hanya jenis menulis ia sebagai projek 1-malam, dan keesokan harinya dia telah ditawarkan pekerjaan oleh Ketua Pegawai Eksekutif YouTube. Jadi semudah itu, anda CS50 pelajar, projek-projek akhir anda boleh mendapatkan anda pekerjaan di YouTube. Sesuatu seperti itu adalah idea yang benar-benar sejuk untuk projek akhir, kan? Kami mempunyai beberapa fungsi sedia ada yang kita mahu untuk mengintegrasikan dengan. Kami meningkatkan pengalaman pengguna sedikit, dan tiba-tiba mencari sesuatu di YouTube Instant mungkin mudah banyak daripada mencari ia di YouTube biasa. Jadi itulah AJAX secara ringkas. 

Dalam contoh-contoh bahawa Yusuf telah menunjukkan, kita menyaksikan banyak autocompletes, dan mereka autocompletes adalah benar-benar, benar-benar berguna kerana kita tidak perlu ingat - Sebagai contoh, jika anda tidak ingat harga saham untuk Apple dan kita hanya tahu ia adalah sesuatu aa, bukannya hanya berkata kepada saya, "Satu bahagian perkara ini kos banyak wang ini," Saya jenis ingin tahu apa yang stok bermula dengan aa. Kita boleh melakukan yang benar-benar baik dengan perpustakaan Bootstrap yang sudah dimasukkan dalam CS50 Kewangan. Jika anda datang sini tag JavaScript dan tatal ke Typeahead, ini adalah hanya plugin baik bahawa seseorang yang sudah menulis untuk kita, dan kita boleh menggunakan fungsi seperti ini. Saya menaip dalam A dan di sini adalah senarai beberapa negeri yang bermula dengan A. Mari kita mengatakan bahawa saya rasa ini adalah benar-benar sejuk dan ia adalah masa untuk saya untuk memasukkan ini pada halaman saya. Ia ternyata bahawa ini adalah benar-benar, benar-benar mudah. Mari kita melompat ke atas di sini untuk quote3.js. Fail saya kelihatan sedikit berbeza. Down sini semua barangan AJAX saya adalah sama. Saya mahu memuatkan data saham tanpa perlu pergi ke halaman lain. Tetapi sekarang saya mahu untuk menggunakan plugin ini. Dokumentasi Bootstrap mempunyai contoh-contoh besar bagaimana sebenarnya saya boleh berbuat demikian. Saya mahu katakan, "Berikut adalah input yang saya mahu autoselesai," dan saya akan untuk memanggil fungsi ini dipanggil typeahead, dan perkara yang berlaku untuk mengendalikan semua barangan Typeahead untuk kita. Ia akan memulakan senarai, ia akan melakukan semua penapisan kami. Perkara sahaja ia perlu tahu adalah apa data yang kita autocompleting pada. Jadi saya mendapati kunci ini hanya dengan membaca dokumentasi dan melihat contoh. Jika saya memberikan kunci sumber, nilai kunci ini adalah hanya beberapa pelbagai perkara yang saya mahu autoselesai. Pembolehubah ini datang dari fail ini lain. Saya membuka symbols.js. 

Ini symbols.js adalah hanya ini pelbagai benar-benar, benar-benar besar yang mengandungi rentetan semua ini simbol saham dari NASDAQ. Jika saya mahu untuk melompat kembali ke HTML, jadi jharvard, vhosts, globalhost, html, template, quote_form. Sejak itu kini dipanggil quote3.js, izinkan saya menukar fail JavaScript saya termasuk di sini. Sekarang saya mempunyai quote3.js, jadi saya akan memuatkan dalam fail JavaScript yang berasingan, satu yang mempunyai bahawa Bootstrap autoselesai. Sekarang apabila saya melompat kembali ke penyemak imbas, memuat semula halaman, dan saya mula menaip aa, ada autoselesai saya. Dan ia adalah benar-benar semudah itu. Saya mempunyai 1 baris kod yang hanya berkata, "Berikut adalah perkara yang saya mahu autoselesai," dan tiba-tiba saya ini mempunyai fungsi yang benar-benar, benar-benar baik dengan tidak banyak keseluruhan usaha di semua. Seperti yang anda membangunkan laman web dan terutamanya bahagian akhir hadapan perkara, anda akan mendapati ini adalah kes banyak. Terdapat banyak, banyak, banyak perpustakaan benar-benar sejuk percuma di luar sana yang membuat ia super mudah untuk melakukan perkara-perkara seperti ini. Sesiapa sahaja boleh berfikir mana-mana kelemahan hanya autocompleting dalam senarai ini besar simbol? Apa yang boleh menjadi sesuatu yang tidak adalah yang terbaik dengan pendekatan ini? Yeah. >> [Pelajar] Masa, jika anda mempunyai banyak [didengar] Yeah. Sekarang kita sedang memuat turun fail ini JavaScript yang besar dan terdapat banyak simbol. Dan sebagainya jika kita mempunyai satu tan barangan, jenis ini boleh meningkatkan kependaman bukan sahaja mencari tetapi juga memuat turun fail sebenar. Besar. Apa-apa lagi? Sekarang tidak ada perasaan sebenar yang relevan. Jika saya menaip A, syarikat-syarikat yang muncul di sini tidak mungkin syarikat yang paling popular yang bermula dengan A. 

Sebelum saya masuk kepada Apple, ia mungkin mengambil beberapa lagi watak-watak untuk mencari apa yang saya cari. Ini autoselesai tidak mempunyai ini rasa yang relevan. Ia hanya akan berkata, "Apa sahaja yang sepadan saya akan memaparkan." Selain daripada itu, saya ingin entah bagaimana mengintegrasikan kaitan ke dalam carian saya. Jika saya pergi ke sini Yahoo! Kewangan finance.yahoo.com, Jika saya cuba untuk masukkan simbol pada halaman Yahoo! Finance dan saya mula menaip goog, saya mempunyai senarai ini bagus perkara. Jelas sekali, ia kelihatan seperti Yahoo! Kewangan melakukan sesuatu yang lebih bijak di sini. Mereka mempunyai kaitan dan mereka juga mempunyai maklumat tambahan seperti nama stok. Itu sesuatu yang saya tidak boleh benar-benar mendapatkan dengan hanya senarai saham saya simbol. Saya mahu ini dan jadi saya akan mengambil ia. Untuk melakukan yang membolehkan melakukan beberapa perkara. Mari kita mula-mula membuka pemeriksa pada halaman ini kerana kita melihat bahawa halaman ini tidak tambah nilai pada semua, jadi ia mungkin menggunakan AJAX entah bagaimana untuk memuatkan data. Kita boleh mengetahui apa data yang memuatkan. Jika saya klik pada tab Network ini, ini akan menjadi semua permintaan yang bermula akan dipecat. Sekarang jika saya menaip di goo, kita dapat melihat bahawa saya hanya mendapat permintaan HTTP baru. Ini mungkin di mana data yang datang dari. Cukup yakin, jika saya melihat URL ini, yang sedikit pelik dinamakan, kita dapat melihat bahawa ini adalah betul-betul di mana Yahoo menghantar data dari. 

Saya telah mencipta fail yang berasingan dipanggil suggest.php yang sangat serupa dalam semangat untuk fungsi lookup. Ia pada dasarnya akan membuat pertanyaan ke URL Yahoo, mendapatkan kembali beberapa data, dan menghantar kembali kepada saya. Sekarang, bukannya menggunakan ini besar, senarai besar simbol, Saya boleh menggunakan perkara kaitan nice Yahoo, dan saya tidak perlu untuk memuat turun fail tersebut JavaScript besar-besaran. Saya hanya akan merobohkan simbol saham yang sebenarnya relevan. Mari kita melompat ke dalam itu. Jadi html, js. Kami kini pada quote4. Sekarang kita tidak lagi menggunakan bahawa senarai besar fail JavaScript. Tetapi ada sejenis kecil masalah reka bentuk di sini. Kami telah berkata bahawa di AJAX adalah segerak. Apa yang bermakna adalah bahawa apabila saya membuat permintaan AJAX, jadi di sini on line 8, ini adalah di mana permintaan AJAX saya sebenarnya dipecat. Katakan sekarang saya mempunyai beberapa kod turun di sini yang akan melakukan beberapa barangan suka memaklumkan pengguna atau sesuatu perubahan pada halaman. Apa yang tidak akan berlaku adalah pelayar tidak akan menunggu untuk permintaan ini untuk meneruskan sebelum datang ke bawah dan memukul baris ini. Itulah sebahagian yang tak segerak. Ia akan membuat permintaan ini dan berkata, "Apabila anda selesai, "Kembali dan memanggil bahawa fungsi bahawa saya memberitahu anda untuk memanggil di dalam kejayaan." Ini bermakna kita tidak boleh hanya memuat turun semua stok terlebih dahulu. Kita perlu membuat permintaan dan menunggu sesuatu untuk kembali. Itu bermakna bahawa sebelum ini, kita hanya boleh memberitahu Bootstrap, "Berikut adalah senarai perkara yang saya mahu anda untuk autolengkap pada." Kita tidak boleh lagi berbuat demikian lagi kerana kita tidak tahu apa yang kita mahu sebenarnya autoselesai pada. Nasib baik, Bootstrap fikir ini kerana mereka adalah orang pintar di sana, dan mereka sebenarnya memberikan kita satu lagi cara untuk memuatkan plugin Typeahead. Sebelum ini, nilai harta sumber ini adalah hanya ini pelbagai besar perkara untuk autolengkap. 

Sekarang harta sumber sebenarnya fungsi, dan Tujuan fungsi ini adalah untuk mengetahui apa perkara autoselesai pada. Cara ia akan mengetahui bahawa ia akan bertanya Yahoo! Kewangan apa perkara terbaik untuk autolengkap. Untuk melakukan bahawa saya akan membuat permintaan AJAX sangat serupa. Saya akan meminta halaman ini pada suggest.php. Saya mahu menghantar sepanjang simbol masih. Dan kini kejayaan saya, dokumentasi Bootstrap memberitahu saya bahawa untuk mengisi bahawa senarai perkara, semua yang saya perlu lakukan adalah lulus dalam pelbagai ini sekarang kepada fungsi panggil balik. Tetapi tunggu satu minit. Jika ini sepatutnya menjadi array dan AJAX menghantar saya kembali teks, bagaimana yang mungkin? Ini memperkenalkan cara baru untuk bertukar-tukar data yang dipanggil JSON. Dalam kes ini kita tidak hanya menghantar kembali rentetan mudah teks. Sekarang kita sedang berurusan dengan senarai ini lebih kompleks simbol saham. Ini simbol saham juga boleh termasuk perkara-perkara seperti nama syarikat atau harga semasa. Hanya menggunakan rentetan besar lama yang tidak diformat dengan apa-apa cara yang boleh diramalkan tidak akan menjadi cara terbaik untuk mendapatkan data dari pelayan Yahoo kepada saya dalam cara yang saya boleh faham. JSON merupakan teknologi yang mengambil kesempatan daripada bagaimana kita mencipta array bersekutu JavaScript. Ini kelihatan banyak seperti pelbagai JavaScript bersekutu, dan pada hakikatnya, ia adalah kerana ia adalah. JSON berdiri untuk Tatatanda Objek JavaScript. Ini adalah pada dasarnya telah dipersetujui format untuk memindahkan data ke belakang dan sebagainya. Berikut ini objek JSON atau ini pelbagai JSON bersekutu menghantar saya beberapa data mengenai kursus. 

Kekunci array ini adalah perkara-perkara seperti kursus yang mempunyai nilai cs50, dan turun di sini kita dapat melihat bahawa saya boleh mempunyai nilai yang pelbagai. Saya tidak mempunyai untuk melakukan perkara-perkara seperti menghuraikan keluar tali dan mencari koma dan melakukan perkara gila seperti itu. Kerana ini diisytiharkan dalam format JSON ini, JavaScript dan jQuery sudah mempunyai fungsi untuk menukar rentetan yang kelihatan seperti ini JSON ke pelbagai JavaScript bersekutu sebenar bahawa kita boleh bekerja dengan. Berbuat demikian adalah semudah mengatakan bahawa tiada lagi adalah fail ini, suggest.php, menghantar saya kembali hanya satu rentetan teks, tetapi saya tahu ia akan menghantar saya kembali JSON. Ini bermakna bahawa JSON boleh ditukar menjadi sebuah array bersekutu JavaScript. Dan begitu jQuery, saya ingin anda untuk berbuat demikian bagi saya. Ini bermakna bahawa parameter ini sambutan di sini, ini tidak lagi hanya rentetan. Kerana kita telah diberitahu jQuery yang di sini datang beberapa JSON, jQuery akan menjadi bijak untuk mengatakan, "Anda mahu JSON?" "Saya akan untuk menukar itu ke dalam array bersekutu untuk anda." Mari kita sebenarnya mengambil lihat pada tab Network sekali kita mempunyai quote4.js. Kami akan mengubah ini dan muat semula halaman. Sekarang saya akan menaip dalam-lagi. Saya telah membuat permintaan pasangan untuk suggest.php, tetapi kini sambutan ini, bukannya hanya rentetan, ia JSON. Jadi saya perlu bersedia kerinting terbuka berkata, "Di sini datang pelbagai bersekutu." 

Kunci pertama dan satu-satunya array ini bersekutu dipanggil simbol, dan kemudian di sini adalah pelbagai semua simbol-simbol yang berkaitan datang sekarang dari Yahoo! Kewangan, bukan dari senarai yang gergasi. Itulah bagaimana saya hanya boleh mengisi pemalam autoselesai dengan beberapa data yang tidak datang dari fail tempatan yang sudah telah ditetapkan tetapi daripada sesuatu yang lain. Ia ternyata bahawa kita sebenarnya boleh mengambil kesempatan daripada teknologi yang dipanggil JSONP, atau JSON dengan padding, yang akan menghapuskan ini tengah suggest.php. Tetapi sebaliknya berbuat demikian, mari kita sebaliknya mengambil melihat bagaimana saya boleh memperbaiki ini lebih. Saya benar-benar ingin Typeahead Bootstrap. Ia adalah benar-benar baik. Tetapi kita mendapat baik di JavaScript dan kita mahu jenis melakukan ini diri kita, mungkin mengambil melihat apa plugin ini boleh melakukan. Mari kita tidak lagi menggunakan bahawa perkara Typeahead, dan mari kita cuba untuk membuat senarai ini stok yang dicadangkan sendiri. Berikut dalam quote6.php kita pergi untuk memulakan dengan cara yang sama. Jenis seseorang Setiap kali sesuatu, kita mahu untuk membuat permintaan AJAX. Ini adalah serupa dengan asal kita CS50 Kewangan Segera. Bukannya membuat permintaan untuk quote.php, kita sedang membuat permintaan fail yang sama seperti sebelum ini, suggest.php ini, yang hanya akan tarik data dari Yahoo! Kewangan. 

Sekali lagi, kami masih menjangkakan JSON, tetapi sekarang sejak Typeahead tidak melakukan ini untuk kita, kita juga perlu menghantar bersama nilai yang ada di dalam kotak teks semasa. Sekarang kita tahu apa yang perlu meminta Yahoo! Kewangan untuk, dan sebagainya sekarang di sini adalah fungsi yang kita mahu untuk melaksanakan sekali permintaan itu selesai. Kami tidak mempunyai plugin untuk membuat senarai untuk kita, jadi di sini adalah di mana kita sebenarnya akan membina senarai cadangan. Untuk berbuat demikian, sama seperti di PHP kita concatenated ini rentetan besar HTML maka kita dicetak mereka, kita boleh melakukan perkara yang sama di JavaScript. Mula-mula kita pergi untuk memulakan rentetan ini dipanggil cadangan, dan rentetan ini hanya akan mengandungi beberapa HTML. Kami mahu ia menjadi senarai perkara, jadi kita akan mulakan dengan tag senarai ini, dan sekarang kita pergi untuk melelar atas segala simbol yang telah dikembalikan semula kepada kami. Ingat, kerana kita telah berkata jenisdata: 'json', ini tidak adalah rentetan. Ini sudah pelbagai untuk kita. Itu benar-benar sejuk. Kami hanya boleh berkata, "Saya mahu anda untuk menambah elemen senarai." Kami akan meletakkan ia di dalam unsur satu di sebelah itu, kita akan memberikan kelas cadangan supaya kita tahu apa yang ia adalah, dan kini di sini adalah simbol bahawa kita mendapat kembali dari Yahoo! Kewangan. 

Apabila kita telah mencipta satu elemen bagi setiap simbol yang kita telah mendapat kembali, kami hanya mahu menutup senarai. Jadi sekarang cadangan mewakili ini serpihan HTML sedikit yang apabila diletakkan di halaman akan menjadi senarai perkara-perkara yang kita cari. Sekarang mari kita sebenarnya meletakkan bahawa pada halaman. Untuk melakukan bahawa saya telah benar-benar mencipta satu lagi div kosong dan saya telah diberikan ID cadangan. Sama seperti kita menetapkan kandungan div itu yang akan memaparkan harga data saham, kita kini hanya mahu menetapkan kandungan div ini untuk apa sahaja tali ini adalah yang mengandungi simbol-simbol. Dengan menggunakan kaedah ini HTML, ini pembolehubah cadangan, rentetan ini, adalah rentetan HTML. Saya mahu anda mengambil HTML dan meletakkan ia di dalam div cadangan dipanggil. Kita baru sahaja dilampirkan sesuatu untuk DOM kini. Kami telah menambah beberapa elemen baru kepada DOM bahawa kita kini boleh dipaparkan pada halaman. Mari kita lihat apa ini kelihatan seperti. Jika kita memuatkan pada quote6 dan sekarang kita kembali, sekarang apabila saya mula menaip AAPL, kita tidak lagi mempunyai bahawa Bootstrap autoselesai, tetapi kita kini mempunyai senarai ini bahawa kita membuat diri kita. Ini adalah uglier sedikit daripada Typeahead Bootstrap, sebagai contoh, tetapi ia tidak membenarkan kita untuk melakukan satu perkara yang lain. Apabila kita telah mencari pada plugin Bootstrap itu, kita lihat bahawa apabila kita autocompleted, salah satu nilai autoselesai AAPL. Yang mungkin tidak begitu berguna. Sebagai pengguna, saya mungkin tidak segera mengiktiraf semua simbol saham. Apa yang saya mungkin lebih cenderung untuk mengenali nama sebenar syarikat. Jadi tidak akan ia menjadi benar-benar membantu jika bukannya mengatakan AAPL ini berkata sesuatu seperti Apple Inc Kerana kita telah diperkenalkan ini diri kita sendiri, kita benar-benar mudah boleh berbuat demikian. Mari kita membuka fail quote terakhir kami di sini, jadi quote7. 

Perkara yang sama. Saya baru sahaja mencipta satu lagi fail PHP yang akan kembali kepada kita lebih daripada sekadar simbol. Ia juga akan memberikan kita kembali nama syarikat. Dan supaya kita melakukan perkara yang sama. Kami membuat permintaan AJAX. Setelah permintaan itu telah selesai, kita pergi untuk melaksanakan fungsi ini di sini, dan fungsi ini akan membina sehingga rentetan besar unsur-unsur. Tetapi perbezaan di sini adalah bahawa nilai senarai ini tidak lagi hanya simbol, ia kini nama. Jadi kita mempunyai satu masalah kecil. Apabila kita menggunakan lookup kita, kita perlu entah bagaimana lulus simbol. Kita tidak boleh lulus sesuatu yang lookup seperti Microsoft Corporation. Kita perlu untuk lulus ia MSFT. Apabila kita menulis HTML, kita mempunyai banyak ciri-ciri terbina dalam yang bagus. A mungkin telah dikaitkan dengan ia href atau kelas. Tetapi apa yang kita benar-benar perlukan sekarang ialah untuk setiap pautan ini mempunyai simbol saham yang dikaitkan dengannya. Tiada terbina dalam atribut HTML untuk simbol saham, tetapi bernasib baik, HTML5 membolehkan kami untuk mewujudkan sifat-sifat kita sendiri untuk menjadi apa sahaja yang kita mahu. Dengan berkata-simbol data, saya telah diperkenalkan atribut baru yang namanya saya hanya terdiri, dan ini adalah ok kerana saya didahulukan dengan data ini. Kami akan menyimpan di dalam sana simbol dari saham sekarang. Apa yang bermakna adalah bahawa walaupun kita sedang memaparkan nilai nama syarikat dalam autoselesai kami, kami masih mengingati simbol yang dikaitkan dengan setiap syarikat. Cara kita lakukan bahawa di dalam elemen ini sendiri. Jadi itu bermakna kita perlu membuat satu perubahan yang lebih. Apabila kita klik sekarang, kita perlu untuk benar-benar mengambil kesempatan daripada sifat simbol bukannya hanya nilainya. Jika kita kembali, kita melampirkan pengendali acara kepada cadangan. Apabila salah satu daripada cadangan ini diklik sekarang, saya mahu melakukan sesuatu. Apa yang saya mahu lakukan adalah menukar nilai kotak input itu. Sekarang saya mahu untuk menetapkan fungsi ini Val yang sama. 

Jadi, tanpa sebarang hujah fungsi ini Val kembali kepada anda apa yang sudah dalam kotak teks, tetapi jika anda memberikan rentetan, ia akan mengambil tali itu dan meletakkan ia ke dalam kotak teks. Saya memilih kotak teks dengan cara yang sama. Nama ia adalah simbol dalam borang sebut harga. Sekarang saya menghantar ia nilai atribut data-simbol. Ini perkara di sini adalah baru, ini $ (ini). Apa ini merujuk kepada elemen yang diklik. Kita boleh lihat di sini bahawa kita tidak melampirkan acara klik kepada setiap elemen dengan kelas cadangan individu. Sebaliknya, kita menghampiri ini sedikit berbeza. Sebaliknya kita mengatakan apabila apa-apa dalam div cadangan ini, yang ingat hanya bekas untuk senarai itu, jika sesuatu di dalam div ini diklik dan ia mempunyai kelas cadangan, Saya mahu acara ini kepada api. Pada asasnya apa ini bermakna yang boleh kita lakukan ialah kita boleh menggunakan semula ini pengendali acara yang sama bagi semua perkara dalam senarai. Jadi kita tidak perlu mempunyai satu acara pengendali untuk elemen pertama dan acara pengendali yang berlainan bagi unsur kedua. Kita sebaliknya boleh berkata, "Saya mahu pengendali acara yang sama untuk memohon kepada segala-galanya dalam senarai saya." Tetapi kita perlu entah bagaimana tahu yang mana elemen diklik. Ini "ini" kata kunci mewakili hanya itu. Ini adalah objek yang hanya diklik oleh pengguna. Jika saya hanya klik pautan ke-3, ini merupakan elemen pautan yang 3, yang bermaksud bahawa saya boleh mendapatkan atribut, data-simbol, yang kita tahu mengandungi simbol yang dikaitkan dengan syarikat saya hanya klik. Jika kita melompat kembali ke halaman kewangan kami, kita boleh lihat sekarang bahawa apabila saya mula menaip sesuatu seperti MSFT, kita tidak lagi mendapat hanya stok simbol, kita sedang mendapatkan syarikat-syarikat yang sebenar. Tetapi apabila saya klik pada salah satu daripada syarikat-syarikat ini, kita dapat melihat bahawa kita sebenarnya populating kotak teks tidak dengan nama syarikat tetapi dengan apa yang disimpan di dalam sifat data. Dan jadi jika saya benar-benar memeriksa salah satu daripada elemen-elemen ini dengan mengklik kanan dan klik Periksa Unsur, kita sebenarnya boleh melihat apa ini kelihatan seperti. 

Ingat ini adalah sesuatu yang kita dicipta di dalam itu untuk gelung apabila kita telah membina bahawa rentetan HTML. Kita boleh lihat di sini bahawa ini data-simbol mempunyai nilai MSFT, yang besar. Itulah apa yang kita mengharapkan. Itulah simbol dan itulah bagaimana kita mendapat nilai yang kita diperlukan untuk menggunakan di dalam kotak teks ini. Itu cukup untuk bentuk petikan kerana itulah jenis membosankan. Mari kita hanya membuat beberapa penambahbaikan cepat untuk laman portfolio kami. Jika anda telah menggunakan CS50 Kewangan untuk seketika dan anda mula membeli dan menjual banyak stok, akhirnya jadual ini akan mendapat cukup besar, dan anda akan mahu ticker saham, sudah tentu. Setelah jadual adalah benar-benar, benar-benar besar, ia boleh berguna untuk pengguna cuba untuk mencari di atasnya. Di dalam kotak carian jika saya mula menaip sesuatu seperti Disney dan mencari untuk saham Mickey Mouse saya, kita dapat melihat bahawa jadual kini penapisan berdasarkan apa yang saya hanya perlu ditaip masuk Fungsi ini kelihatan super rumit, tetapi ia adalah benar-benar, benar-benar mudah dengan jQuery dan JavaScript. Fail ini portfolio.php termasuk fail JavaScript dipanggil portfolio.js. Mari kita lihat pada itu. Jadi html, js, portfolio. Berikut adalah di mana kita lakukan bahawa mencari di atas meja. Perkara pertama yang saya perlu lakukan adalah melampirkan pengendali acara untuk kotak teks yang kerana kita tahu bahawa kita mahu fungsi kami penapisan untuk api setiap kali pengguna menekan sesuatu kerana kita tidak mempunyai masa untuk butang Cari. Perkara pertama yang perlu kita lakukan adalah memikirkan apa yang pengguna mencari, seperti yang kita lakukan sebelum ini. Kata kunci ini merujuk kepada elemen semasa pengguna berinteraksi dengan. 

Kerana pengguna berinteraksi dengan kotak carian, $ Ini mewakili kotak carian, jadi this.val memberikan kita apa yang di dalam kotak carian pengguna sedang menaip. Jadi, sekarang apa yang kita mahu lakukan kita mahu untuk melelar semua baris di dalam jadual kami. Untuk memilih semua baris dalam jadual kami, saya memberi jadual yang ID portfolio jadual, dan setiap baris diwakili oleh unsur TR, jadi pemilih ini akan kembali kepada saya pelbagai besar semua baris dalam jadual saya. Sekarang saya mahu melelar pelbagai bahawa. Saya boleh anda untuk gelung, tetapi jQuery sebenarnya memberikan kita fungsi bagus yang dipanggil "setiap." Setiap apa yang tidak adalah masing-masing mengambil satu hujah, dan hujah yang fungsi. Apa yang ia akan lakukan ialah ia akan memohon fungsi itu kepada setiap elemen di dalam senarai ini. Fungsi ini mengambil satu hujah bahawa e, dan apabila fungsi ini dilaksanakan, e ini akan digantikan dengan baris pertama, maka baris kedua, dan kemudian barisan ketiga. Dengan cara ini, ini adalah perkara yang sama seperti berjalan untuk gelung dan kemudian memikirkan elemen semasa berdasarkan dalam indeks anda untuk gelung. Pada setiap lelaran, bagi setiap unsur-unsur dalam jadual, Saya mahu untuk memeriksa jika teks unsur - teks sel di dalam saf - sepadan dengan apa yang saya mencari. Rentetan ini besar panjang arahan adalah bagaimana saya boleh melakukannya. Pertama, sekali lagi, ini sekarang merujuk kepada - kerana ia adalah dalam fungsi baru - ini kini baris semasa dalam jadual. Saya ingin mengambil baris semasa dalam jadual, dan saya mahu mendapatkan semua kanak-kanak. Ingat, DOM adalah pokok hierarki, yang bermaksud bahawa unsur-unsur mempunyai bilangan kanak-kanak. 

Fungsi ini kanak-kanak akan kembali kepada saya kembali pelbagai semua unsur-unsur yang adalah anak-anak, dalam kes ini, satu baris dalam jadual. Ini adalah hanya sel-sel di dalam baris. Saya hanya mahu mencari lebih sel pertama. Fungsi pertama mengatakan memberi saya elemen pertama dalam pelbagai itu. Kemudian fungsi teks mengatakan mendapatkan saya apa yang di dalam sel yang kerana saya ingin untuk mencari atas teks itu. Akhirnya, mari kita menukar kepada huruf kecil, supaya kita boleh melakukan pertanyaan kes teks tidak sensitif. Akhirnya, kita mahu melihat jika itu rentetan dalam jadual mengandungi rentetan kita sedang mencari. Fungsi indexOf dalam menutup tidak hanya itu. Ia memberitahu kita sama ada atau tidak rentetan ini mengandungi rentetan yang lain. Jika ia adalah benar bahawa sel mengandungi apa yang saya mencari, maka saya ingin memastikan bahawa ia ditunjukkan. Kaedah menunjukkan akan berkata, "Papar unsur." Jika ini tidak berlaku, maka itu bermakna apa sahaja yang saya mencari tidak terkandung dalam barisan itu, dan jadi saya mahu menyembunyikan daripada pengguna. Yang mencapai penapisan bahawa kesan yang baik di mana tiada lagi kita lihat keseluruhan jadual. Jika anda berminat dalam bagaimana untuk membuat ini ticker serta, kami akan hantar sumber talian. Tetapi ia adalah benar-benar mudah. JQuery mempunyai kaedah yang hebat untuk animasi dan memanipulasi CSS hartanah. Jadi, itulah bagi saya. 

Apa pula terletak di hadapan? Seperti yang anda akan lihat dalam beberapa hari, cadangan projek akhir adalah disebabkan. Cadangan projek akhir akan meminta anda beberapa soalan, tetapi di kalangan mereka akan tiga peristiwa penting - 1 "baik" Kejayaan, salah satu pencapaian yang lebih baik, dan salah satu yang terbaik. Idea yang benar-benar untuk membantu anda semua menetapkan jangkaan anda supaya minimum anda akan gembira dengan output projek akhir anda dan ia akan menjadi "baik" setakat yang anda bimbang. Tetapi kemudian dalam kepentingan mendapatkan anda untuk mencapai hanya sedikit kepada sesuatu yang lebih baik atau sesuatu yang terbaik, kita juga akan menyusun menolak anda ke arah itu juga. CS50 Hack-a-thon Sementara itu, dalam beberapa minggu. Biasanya, kita lakukan ini atas dasar asas loteri kerana minat, tetapi kemungkinan kita akan mengambil beberapa ratus kita dalam bas ulang-alik dari Harvard Square ke Kendall Square di mana Microsoft mempunyai kemudahan indah tepat dipanggil "nerd" - Penyelidikan New England dan Pusat Pembangunan. Kita akan sampai ke sana sekitar 8 malam Kami akan mempunyai beberapa makanan. Sekitar 1:00 kami akan mempunyai beberapa lagi makanan. Sekitar 5 pagi jika anda masih berjaga, kami akan menuju ke bredden atau membawa anda kembali ke kampus. Objektif terdapat untuk menyelam ke dalam projek-projek akhir bersama-sama rakan sekelas dan kakitangan. Kemudian beberapa hari kemudian Fair CS50, yang benar-benar bertujuan untuk menjadi peluang untuk anda semua untuk mempamerkan kerja anda dan pencapaian bagi semester sambil menggosok bahu dengan satu sama lain dan mendapatkan rasa apa yang semua orang lakukan. Dengan itu berkata, terima kasih banyak kepada Tommy dan kepada Yusuf, dan kita akan melihat anda pada hari Isnin.  [Tepukan]