DAVID J. Malan: Baiklah, jadi ini di sini adalah lengan Myo Band, pasangan yang kita memiliki untuk proyek-proyek akhir CS50. Dan itu adalah demonstrasi kita antri Anda di muka mana dasarnya lengan cukup ketat band ini di sini mendengarkan gerakan otot Anda yang kemudian dipetakan dalam perangkat lunak untuk laptop Colton atas sini yang memiliki iTunes dan lagu sudah antri. Daripada saya demoing ini, Colton sudah di laboratorium jelas sepanjang minggu mendapatkan demonstrasi siap untuk satu relawan berani. Jika seseorang ingin datang di up-- melihat tangan Anda terlebih dahulu. Ayo up. [00:01:09] Baik. Dan siapa nama Anda? 

[00:01:13] AUDIENCE: Uh, Maria. 

[00:01:14] DAVID J. Malan: Maria, bagus untuk melihat Anda. Ayo ke sini. Mari saya perkenalkan Anda untuk Colton. Colton, ini adalah Maria. 

[00:01:21] COLTON: Hi, nice to meet you. 

[00:01:23] DAVID J. Malan: Semua benar, jadi langkah pertama, kami akan memiliki Anda meletakkan ini pada lengan bawah Anda sehingga cukup ketat di dekat siku Anda. Dan sementara itu, mari kita memakai Kaca Google kami dan kami akan mencampur teknologi saat ini. 

[00:01:33] COLTON: Pertama kita harus menghubungkan ini ke hal-hal. 

[00:01:36] DAVID J. Malan: OK. Sebenarnya, mari kita menempatkan lengan Anda sebagai dekat dengan kabel ini mungkin sehingga kita pertama sinkron itu. 

[00:01:41] COLTON: Mari kita lakukan ini. 

[00:01:42] DAVID J. Malan: Dan sementara itu, sehingga bahwa setiap orang bisa mendapatkan sekilas lebih dekat, kita akan melemparkan kamera Andrew di layar ada. Jadi kita memiliki kabel USB yang yang terpasang ke ban Maria. Dan biarkan aku melemparkan layar Colton pada proyektor berikutnya. 

[00:02:00] Jadi Colton mendaftarkan perangkat sekarang sebagai Myo terhubung ke kabel ini. Dan sekarang apa yang Maria akan melakukan sejenak sebenarnya berjalan melalui langkah-langkah kalibrasi dan mengajar perangkat lunak bagaimana otot-ototnya menanggapi ketika dia memastikan telah ditetapkan menunjuk bahwa perangkat lunak mengerti. Jika Anda ingin pergi di depan layar. OK, terus mencoba. 

[00:02:30] COLTON: Pergi seperti ini. Dan seperti itu. Dan semua jalan ke kanan. Kembali. 

[00:02:35] DAVID J. Malan: OK. Perspektif yang berbeda. Ini bukan Anda. Ini kita. 

[00:02:40] MARIA: OK. DAVID J. Malan: No. Mari kita bergerak lebih tinggi sehingga lebih dekat dengan siku Anda, atau bahkan lebih ketat. Baik. 

[00:02:52] Di sini kita pergi. Ini akan menjadi waktu yang baik untuk CS52X. Di sana kami pergi. 

[00:02:57] Sangat bagus. OK. Thumb untuk pinky. 

[00:03:02] Sangat bagus. Sebarkan jari Anda. Baik. Gelombang tepat. Ini anehnya menunjukkan Anda dengan hand-- kiri 

[00:03:17] COLTON: Ya, itu aneh. DAVID J. Malan: Wave untuk hak dan bergerak maju. Fast forward ke melewati atau berikutnya. Itu OK Gelombang benar. 

[00:03:25] MARIA: Saya don't-- menunggu. 

[00:03:26] DAVID J. Malan: Butuh bantuan? 

[00:03:28] COLTON: Jadi Anda akan seperti ini. MARIA: Ini membalikkan Hal lain, meskipun. COLTON: Ini adalah. DAVID J. Malan: Ya saya tidak tahu mengapa hal itu menunjukkan Anda leftie a. COLTON: Mengapa kau tidak try-- hanya mencoba akan seperti ini. 

[00:03:38] DAVID J. Malan: No? Mungkin mencapai lengan Anda keluar sedikit lebih tegak dan membuatnya lebih tiba-tiba seperti ini. Yeah, OK, ayolah. 

[00:03:48] MARIA: Maafkan aku. DAVID J. Malan: Ini bukan salahmu. COLTON: Tidak apa-apa. DAVID J. Malan: All Right. Well-- 

[00:03:56] MARIA: Haruskah kita lewati ini, maka? DAVID J. Malan: Ya, mari kita membiarkan Anda lolos. Jadi jika ada yang ingin melakukan tugas akhir menggunakan canggih ini hardware, menyadari hal itu mungkin hanya mengambil sedikit membiasakan diri. Dan this-- kenyataannya adalah ini sebenarnya sangat pendarahan tepi. 

[00:04:10] Ini adalah apa yang disebut kit pengembang, yang dimaksudkan untuk menjadi dasarnya pre-release sehingga masyarakat dapat melakukan apa this-- berjuang dengan itu, angka bagaimana tubuh manusia bekerja dengan teknologi. Jadi jika Anda ingin setelah itu, setelah kuliah, kita dapat membiarkan Anda datang dan mengambil menusuk lain di dalamnya. Tapi sebaliknya, tepuk tangan, jika kita bisa, untuk Maria untuk datang ke atas. 

[00:04:26] MARIA: Terima kasih. 

[00:04:28] DAVID J. Malan: Terima kasih. Kami akan bertahan pada ini, tapi kami akan memberikan you-- bagaimana bola stres di sini? Oh, dan-- if-- ya, terima kasih. Baik. Jadi bagi yang penasaran, jika Anda terbiasa dengan pilihan suara bahwa kita dibuat di sana sebelumnya, sebuah TV menakjubkan menunjukkan bahwa Anda harus benar-benar menjadi pesta-menonton di Netflix adalah salah satu ini di sini. 

[00:04:51] SPEAKER 1: Ladies and gentlemen, pesulap bernama Josh. 

[00:05:04] DAVID J. Malan: Dan ternyata, itu hal untuk teks saya selama kuliah sekarang. Saya diberitahu bahwa Maria memiliki ulang tahun kemarin. Jadi selamat ulang tahun dari CS50 ke Maria juga. 

[00:05:18] Jadi Anda mungkin telah membaca di bulan terakhir bahwa tuan-tuan ini di sini, Steve Ballmer, yang sebenarnya kelas 1977 di kampus, baru saja pensiun untuk Microsoft. Dia adalah seorang sarjana sini, kemudian beberapa tahun kemudian menemukan dirinya di Stanford Business School ketika ia menerima telepon panggilan dari seorang teman yang nya telah hidup menyusuri lorong dari dia di sini di Harvard. Nama teman adalah Bill Gates, dan pada saat itu, ia berusaha untuk merekrut Steve menjadi orang bisnis yang pertama, benar-benar, di sebuah perusahaan kecil nama Microsoft. 

[00:05:45] Sebuah cerita panjang pendek, Steve akhirnya menang atas, bergabung dengan Microsoft ketika mereka memiliki hanya 30 karyawan. Dan pada saat dia pensiun baru-baru ini, perusahaan memiliki 100.000 karyawan selama beberapa tahun terakhir. Dan situs web yang dikenal sebagai The Verge disiapkan penghargaan ini pada video bahwa kami pikir kami akan bersama yang memberi Anda rasa berapa banyak energi Steve membawa ke presentasi ia memberikan. [VIDEO PLAYBACK] -Microsoft Seperti anak keempat. Anak-anak melakukan meninggalkan rumah. Dalam hal ini, saya kira Aku meninggalkan rumah. Hey Bill, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] Hei, wazzap? Kami telah diberi peluang besar. Dan Bill memberi kami kesempatan itu. Saya ingin berterima kasih Bill untuk itu. Aku ingin kau juga. Kecepatan inovasi tidak akan memperlambat. 

[00:06:42] Itu akan bisa lebih cepat dan lebih cepat. Mungkin ada beberapa pesaing yang sayangnya dieliminasi! 

[00:06:54] Saya mencintai perusahaan ini. Ya! Saya PC, dan aku mencintai perusahaan ini! 

[00:07:08] Pengembang, pengembang, pengembang, pengembang, pengembang, pengembang, pengembang, pengembang. Ya! Pengembang web! 

[00:07:19] Pengembang web! Pengembang web! Dengarkan apa pun yang Anda dapatkan tanpa biaya tambahan! 

[00:07:28] MS-DOS eksekutif, janji kalender, tumpukan kartu, buku catatan, jam, panel kontrol. Dan, bisa Anda percaya? Reversie! 

[00:07:35] Membakar mereka ke CD! Mempostingnya ke MSN! Anda mail ke teman-teman! 

[00:07:40] Semua dengan satu kali klik! Satu Microsoft, salah satu strategi, satu team-- fokus, disiplin, profesional, dan ahli dalam semua yang kita lakukan. Membiarkan saya menggunakan garis dari sebuah film lama. 

[00:07:52] Hubungan seperti hiu. Mereka bergerak maju atau mereka mati. Saya benar-benar berpikir tech perusahaan yang sama. 

[00:08:01] [END VIDEO PLAYBACK] DAVID J. Malan: Jadi kami sangat senang untuk mengumumkan bahwa Steve akan bergabung dengan kita di sini di CS50 Rabu depan di tempat biasa dan waktu di sini. Ruang kemungkinan akan terbatas. Dan untuk bergabung dengan kami secara langsung, silahkan kepala hari ini atau segera sesudahnya untuk cs50.harvard.edu/register. 

[00:08:22] Dan kami akan menindaklanjuti dengan Selasa mengkonfirmasikan tempat. Berharap untuk yang berikutnya Rabu selama kuliah di CS50. Sekarang, dalam berita lainnya, kebetulan saya menemukan ini di The Crimson hanya hari yang lain. 

[00:08:34] Ternyata bahwa salah satu staf CS50 ini dan setidaknya salah satu dari mahasiswa CS50 ini saat ini berjalan untuk UC presiden dan wakil presiden, yang membawa saya kembali untuk hari-hari saya sendiri kembali ketika saya kalah dalam pemilihan UC sedih. Tapi hikmahnya dalam yang saya selalu menceritakan kisah ini adalah bahwa salah satu saya yakin banyak alasan saya kehilangan Pemilu adalah kurangnya lengkap dari bakat untuk berbicara di depan umum. Dan cukup jujur, itu mendorong saya, pengalaman itu Saya pikir tahun pertama saya, untuk benar-benar menandatangani untuk Harvard Computer Society, yang adalah kelompok di kampus yang memegang berbagai pembicaraan teknis dan hal-hal lain. Dan saya mengambil alih mengajar mereka seminar dan karena itu memiliki kesempatan, suatu kesempatan yang sangat bagus, untuk mulai bekerja pada persis ini. Tapi juga, saya memiliki kesempatan selama pengalaman ini untuk mengajar diri sendiri semua lebih HTML. Dan jadi saya menunda-nunda malam lalu oleh melihat melalui website berbasis HTML Aku dibuat seperti tahun 1997, '98, untuk saya kampanye yang terlihat seperti ini di sini. Aku tahu. 

[00:09:29] Because-- dan tentu saja, pemberitahuan ini keputusan desain yang menakjubkan pada tahun 1998 atau entah apa lagi. Hal pertama yang Anda ingin pengguna lakukan setelah mengunjungi website Anda adalah harus mengklik link lain hanya untuk memasukkan website Anda di sini dengan biarawan belakang seperti tirai terselubung mana rupanya Platform kampanye saya. Dan ini adalah semua yang Anda akan mendapatkan hari ini adalah hanya screenshot. Tapi aku membaca, seperti, poster kampanye saya tadi malam dan platform saya. 

[00:09:50] Dan aku sangat marah pada saat itu. Platform saya was-- itu menarik. Jadi saya sudah tenang sejak saat itu. Tapi suatu hari nanti, aku akan berjalan lagi dan mudah-mudahan lebih baik saat ini. 

[00:10:03] Jadi HTML, bahasa yang saya buat bahwa in-- Anda akan segera membuat banyak more-- adalah sesuatu yang kita sudah berbicara tentang akhir-akhir ini dan sebagian besar taking untuk diberikan sekarang bahwa kami telah pindah ke bahasa lain. Tapi mari kita berhenti untuk sesaat dan menaruh beberapa hal-hal ini dalam konteks. Jadi dalam sebuah kalimat, apa HTML? 

[00:10:18] Atau, apa yang digunakan untuk? Siapa? Ya. 

[00:10:20] AUDIENCE: Markup untuk situs web. DAVID J. Malan: Markup untuk website. Jadi itu adalah bahasa markup yang memungkinkan Anda menyusun sebuah halaman web. Header naik di sini, judul goes here, tubuh goes here. Hal ini tebal, ini adalah italics-- semacam detail. 

[00:10:33] OK, baik. Jadi CSS memungkinkan you-- dan saya mengambil beberapa kebebasan di sana dengan berani menghadap dan miring karena yang lebih baik diimplementasikan dengan ini. CSS is-- apa? Katakanlah dalam sebuah kalimat. Siapapun sama sekali. Ya. 

[00:10:46] AUDIENCE: hiasan dan hal, seperti bagaimana desain itu. DAVID J. Malan: OK, baik. Hiasan yang memungkinkan Anda untuk merancang atau menyesuaikan dgn mode itu dengan hal-hal seperti huruf tebal dan huruf miring dan warna dan juga lebih baik positioning grained elemen. Ini semacam memungkinkan Anda mengambil hal-hal yang last mile sehingga jika, misalnya, di Pset7, Anda mungkin telah melihat pada Anda Halaman portofolio jika Anda saat ini sudah bahwa tabel default yang Anda membuat menampilkan kepemilikan saham pengguna dan uang tunai mungkin terlihat cukup mengerikan secara default tanpa spasi. Jenis Semuanya dari berdesakan bersama-sama dalam baris dan kolom. 

[00:11:18] Nah, dengan sedikit CSS, karena Anda mungkin menyadari, Anda benar-benar dapat men-tweak itu dan membuatnya sesuatu yang jauh lebih akrab dan banyak cantik untuk melihat. Jadi CSS adalah tentang stilisasi situs web. Tapi kemudian kami memperkenalkan lagi bahasa, PHP, yang memungkinkan kita melakukan apa? 

[00:11:36] Mari kita melakukan apa? Siapa pun. Harus usaha di luar pasangan pertama baris. Ya. 

[00:11:40] AUDIENCE: Menghasilkan konten dinamis. DAVID J. Malan: Perfect. Menghasilkan konten dinamis. Dan Anda dapat melakukan ini di sejumlah bahasa. Kami kebetulan menggunakan PHP karena di bagian sehingga mirip dengan C sintaks. 

[00:11:50] Tapi PHP tidak tepat itu. Ini memungkinkan Anda secara dinamis menghasilkan output. Dan beberapa output yang bisa HTML, seperti yang kita biasanya lakukan. Dan itu juga, karena itu bahasa pemrograman, adalah Mekanisme melalui mana kita dapat berbicara dengan database. 

[00:12:03] Dan kita bisa membuat query untuk server lain seperti Yahoo dan pemrograman melakukan apa-apa benar-benar bahwa Anda mungkin dinyatakan ingin memaksa komputer untuk dilakukan. Jadi PHP memungkinkan kita mulai dinamis keluaran konten. Jadi dengan logika ini, aku tidak punya website dinamis kembali pada tahun 1998. 

[00:12:16] Itu hanya sebuah halaman web statis. Konten saya harus diubah oleh manual dengan gedit atau setara. Tapi PHP adalah apa yang kita digunakan atau bisa digunakan, lebih tepatnya, untuk sesuatu seperti Situs Frosh IM, yang seharusnya mengambil pendaftaran dan mengelola daftar hal-hal yang users-- sebenarnya berubah dari waktu, meskipun kita terjadi menggunakan Perl, berbeda bahasa pada saat itu. 

[00:12:35] Dan kemudian terakhir, kami memperkenalkan SQL-- Structured Query Language. Jadi belum bahasa lain yang digunakan untuk apa? Digunakan untuk apa? Bisakah kita usaha slight-- OK, kita tidak akan untuk mendapatkan lebih jauh dari orkestra di sini. AUDIENCE: Ini protokol digunakan untuk berbicara dengan database. DAVID J. Malan: protokol A digunakan untuk berbicara dengan database. Mari saya men-tweak. Ini adalah bahasa alami yang digunakan untuk berbicara dengan databases-- memilih dan menyisipkan dan menghapus dan update dan benar-benar bahkan lebih banyak fitur yang kita bahkan belum menyelam menjadi tetapi Anda mungkin ingin explore-- memiliki untuk mengeksplorasi, misalnya, proyek akhir. Jadi ada berbagai potongan. 

[00:13:09] Dan mudah-mudahan Pset7, meskipun spesifikasinya cukup panjang, itu sengaja lama untuk memandu Anda melalui bagaimana hal ini dapat semua diketik bersama-sama. Sekarang, pada hari Senin, kita memperkenalkan bahasa terakhir kami bahwa kita secara resmi akan memperkenalkan di yang course-- yaitu, JavaScript. Ini, seperti PHP, adalah ditafsirkan bahasa. 

[00:13:25] Tapi perbedaan utama Saya mengusulkan pada Senin adalah bahwa sementara PHP mengeksekusi atau diinterpretasikan pada server, yang dalam hal ini adalah alat CS50, atau mungkin ada beberapa web komersial server di internet, JavaScript umumnya adalah bahasa yang berjalan sisi klien bukan server side-- sehingga dalam browser. Yang mengatakan, seperti ketika saya membuka up source code Facebook dan menemukan semua file-file js, implikasinya adalah bahwa ketika Anda mengunjungi Facebook atau sebagian website hari ini, Anda mendapatkan tidak hanya HTML, tidak hanya CSS, tetapi sejumlah besar JavaScript kode sering dalam bentuk file js. Dan kemudian itu adalah browser-- Anda sendiri Mac atau PC-- yang mengeksekusi kode tersebut. 

[00:14:03] Tapi browser Anda mengeksekusinya. Anda dapat berpikir dalam semacam bak pasir. Sehingga kode JavaScript tidak boleh mampu menghapus file pada komputer Anda. Seharusnya tidak mampu mengirim email atas nama Anda. Jenis browser Anda dari Membatasi apa yang dapat Anda lakukan dengan itu. 

[00:14:17] Jadi dalam hal ini, itu sedikit kurang kuat, mungkin, dari C. Tapi JavaScript bisa, sebagai samping, digunakan pada server, meskipun kita akan cenderung untuk tidak berbicara tentang hal itu dalam konteks itu. Jadi sekarang mari kita mengikat ini bersama-sama. Seminggu ditambah lalu, kami disajikan beberapa HTML pada left-- halaman web yang super membosankan. 

[00:14:34] Hanya menyapa dunia. Dan kemudian aku mengusulkan pada benar kita dapat jenis mencuri ide-ide dari diskusi kami struktur data di C dan berpikir tentang bagaimana hirarkis ini bahasa markup di sebelah kiri dapat ditarik atau diimplementasikan dalam memori sebagai struktur pohon yang sebenarnya dengan node dan pointer dan orang-orang jenis rincian. Di sebelah kanan, kita sebut bahwa Dokumen DOM-- Obyek Model-- yang hanya cara mewah untuk mengatakan pohon. 

[00:14:56] Sekarang, mengapa ini berguna untuk memikirkan dengan cara ini? Karena sekarang dengan JavaScript, karena kita memiliki kode yang akan bermain dalam hal ini lingkungan, HTML sebenarnya yang telah dikirim ke browser sudah dan sudah telah dimuat ke memori oleh browser ke sebuah pohon di komputer Anda RAM seperti ini, kita dapat menggunakan JavaScript untuk benar-benar melintasi atau berjalan atau pencarian atau mengubah pohon DOM namun kami inginkan. Jadi sebenarnya, jika Anda berpikir tentang facebook.com, jika Anda menggunakan fitur chat, jika Anda Penggunaan Gmail dan fitur gchat, apa pun di mana Anda memiliki pesan yang datang lagi dan lagi dan lagi, pesan tersebut mungkin, seperti, LI tag, Daftar Item tag, mungkin. 

[00:15:35] Atau mungkin mereka hanya divs yang terus muncul setiap kali Anda mendapatkan pesan instan. Dan itu hanya berarti apa Facebook atau Google melakukan adalah setiap kali Anda mendapatkan pesan dari server, mereka mungkin menggunakan JavaScript hanya menambahkan node lain ini tree-- node lain untuk ini pohon yang kemudian secara visual hanya terlihat seperti baris baru teks pada layar Anda. Tapi mereka memasukkan ke struktur data. 

[00:15:57] Jadi dalam kelas seperti CS124 dan lain-lain, Anda akan benar-benar menulis kode lebih terhadap struktur data seperti ini. Tetapi untuk sekarang di JavaScript, kita hanya akan menganggap kita mendapatkan semua fungsi ini secara gratis dari bahasa itu sendiri. Jadi mari kita lihat sebuah contoh. 

[00:16:09] Mari saya membuka sebuah file yang bernama form.html. Ini super sederhana. Itu hanya tampak seperti ini. 

[00:16:15] Tidak ada CSS, tidak ada pemikiran untuk estetika. Ini murni fungsional dan ternyata aku meminta email, password, sandi lagi, dan kemudian cek untuk menyetujui beberapa syarat dan ketentuan. Apa kode sumber untuk ini Sepertinya mungkin sesuatu Anda bisa menebak dengan sedikit pemikiran sekarang. Aku punya tag form di sini. 

[00:16:32] Suatu tindakan tampaknya akan pergi ke sebuah file yang bernama register.php. Metode saya akan menggunakan adalah mendapatkan. Dan kemudian aku punya teks bidang yang namanya email. 

[00:16:40] Aku punya bidang sandi yang namanya password. Aku punya yang lain bidang sandi yang namanya adalah konfirmasi agak sewenang-wenang. Hanya saja parameter HTTP lain. 

[00:16:49] Dan kemudian kita kita sudah tidak digunakan ini kecuali sejak Frosh IM demo di class-- kotak centang yang hanya jenis sama dengan cek. Dan aku akan menelepon perjanjian itu. Jadi saya sudah agak sewenang-wenang tetapi nyaman bernama bidang ini. Sehingga sekarang ketika formulir ini mendapat disampaikan, mari kita lihat apa yang terjadi. Jika saya melakukannya malan@harvard.edu, Aku akan melakukan password merah. Aku akan melakukan password apa-apa. Mari kita tidak bekerja sama. 

[00:17:10] Dan aku tidak akan memeriksa kotak. Mari saya klik Daftar. Dan ia mengatakan, hm, kau terdaftar. Tidak benar-benar. 

[00:17:16] Tetapi URL berubah. Jadi bentuk ini jelas diperbolehkan untuk tunduk register.php. Tapi mungkin, aku harus menangkap beberapa kesalahan ini. Sekarang, di Pset7 dan beberapa contoh kuliah kami, kita umumnya akan mencetak pesan kesalahan merah besar di sini mengatakan, nama hilang, atau hilang password. Kami telah melakukan itu sebelumnya dan kami telah dilakukan deteksi kesalahan sisi server. 

[00:17:37] Tapi banyak situs hari ini melakukan klien deteksi kesalahan sisi di mana URL tidak berubah. Seluruh halaman tidak refresh. Anda mendapatkan umpan balik instan dari browser. Mungkin sesuatu yang berwarna merah. 

[00:17:48] Mungkin Anda mendapatkan pop up. Tapi Anda tidak membuang waktu pengiriman ke data server yang tidak lengkap. Jadi mari kita lihat bagaimana kita mungkin mencapai fitur itu juga. 

[00:17:56] Biarkan aku pergi ke form1.html, yang tampak sama. Tapi kalau kali ini saya lakukan malan@harvard.edu dan saya ketik merah dan saya tidak bekerja sama lebih lanjut tapi klik Register, perhatikan sekarang. Ini bukan solusi yang paling seksi. Aku sudah setidaknya tertangkap kesalahan ini. Dan aku telah menggunakan waspada fungsi dalam JavaScript-- yang kami hanya menggunakan di kelas. Secara umum, Anda tidak harus menggunakan ini karena bisa sangat cepat keluar kendali. Tetapi password tidak cocok adalah kesalahan. 

[00:18:19] Biarkan aku pergi ke depan dan klik OK. Tapi apa yang takeaway kunci di sini adalah bahwa URL tidak berubah. Wasting jadi aku tidak terganggu waktu server meminta itu pertanyaan yang aku bisa memiliki tahu jawabannya untuk diriku sendiri. 

[00:18:30] Dan pengguna, meskipun telah berbicara tentang hal ini lebih lama dari pengguna akan berpikir tentang hal ini, akan memiliki umpan balik instan. Tidak ada latency dengan konektivitas jaringan. Jadi mari kita lihat kode sumber ini. 

[00:18:40] Terlihat Form1.html struktural mirip di sini. Bentuknya yang sebenarnya sama. Tapi mari kita lihat apa yang saya lakukan di sini. Dan ada berbagai cara untuk melakukan hal ini. Dan saya sudah melakukan yang paling lurus follower tapi tidak cara yang paling elegan namun. Saya memiliki tag script. Saya kemudian memanggil document.getElementById ('pendaftaran'). Dan aku menyimpan nilai yang dalam bentuk, variabel. 

[00:19:04] Jadi apa yang saya lakukan? Anda dapat menganggap document.getElementById sebagai fungsi khusus yang JavaScript memberi Anda yang benar-benar tangan Anda pointer ke salah satu node atau empat persegi panjang di pohon ini. Jadi sekarang itulah yang variabel formulir kami di JavaScript sebenarnya menunjuk. 

[00:19:21] Jadi sekarang sintaks yang berbeda dari C. Tapi kami melakukan beberapa hal di sini. Satu, yang satu ini agak aneh mencari, tentu dibandingkan C. Tapi lihat pada baris 35. Jadi pada form.onsubmit kiri. Ingat onsubmit yang seperti lapangan di struct. Jika Anda berpikir tentang variabel bentuk hanya menjadi struct C, itu mungkin memiliki beberapa bidang. 

[00:19:42] Kembali pada hari, kami memiliki nama siswa, ID, rumah, orang-orang semacam ladang. Hanya memikirkan onsubmit sebagai bidang lain. Tapi itu adalah bidang khusus karena Browser diprogram untuk mengharapkan .onsubmit untuk tidak menjadi nilai seperti nomor atau string, tapi untuk benar-benar menjadi fungsi atau alamat dari suatu fungsi di memori komputer. 

[00:20:02] Dan memang, itulah yang kata kunci ini di sini tidak. Ini mengatakan, beri saya fungsi baru. Tapi apa namanya akan, rupanya? 

[00:20:09] Berpikir kembali ke hari Senin. Apa nama ini fungsi berdasarkan sintaks ini? Tidak, maksudku, ada jelas tidak ada nama associated-- pasti tidak apa yang saya disorot di sini. 

[00:20:21] Tapi itu benar-benar OK. Ini adalah fungsi anonim, atau fungsi lambda sebagai beberapa mungkin menyebutnya. Dan itu hanya berarti itu masih fungsi. Hanya saja, Anda tidak dapat menyebutnya dengan nama. Tapi itu OK. Karena sekali lagi, browser telah diprogram oleh perusahaan seperti Google atau Microsoft atau Mozilla atau orang lain untuk hanya tahu bahwa jika bidang .onsubmit dalam elemen bentuk memiliki nilai, memperlakukannya sebagai sebuah function-- fungsi pointer, jika Anda mau. Dan menyebutnya ketika formulir dikirimkan. 

[00:20:46] Jadi apa kode yang harus dieksekusi ketika formulir dikirimkan? Rupanya, semuanya bagian dalam kurung kurawal. Dan ini hanya gaya. 

[00:20:53] Anda bisa melakukan ini seperti kita cenderung untuk dilakukan di CS50. Namun dalam JavaScript, kebanyakan orang cenderung untuk tetap pada baris yang sama hanya karena lebih jelas adalah terkait dengan fungsi kata kunci. Jadi sekarang apa yang saya lakukan? 

[00:21:03] Jika form.email.value sama equals string kosong atau tidak, inilah peringatan di mana aku akan mengatakan, Anda harus memberikan alamat email Anda, dan kemudian kembali palsu. Dan itu adalah bahwa return false yang mencegah bentuk dari yang diajukan. Sementara itu, jika nilai password kosong, aku akan berteriak pada pengguna dan berkata, Anda harus memberikan password. 

[00:21:21] Hal Sementara itu semakin sedikit lebih menarik di sini. Jika form.password.value tidak form.confirmation.value sama, bidang lain, berteriak pengguna bahwa password tidak cocok karena mereka tidak beberapa saat yang lalu. Dan kemudian yang satu ini adalah sedikit lebih seksi karena aku tahu aku tahu konseptual yang diperiksa adalah nama kotak centang ini. 

[00:21:40] Jadi saya hanya bisa menggunakan tanda seru titik untuk mengatakan jika cek tersebut tidak checked-- itu Boolean yang nilai, benar atau false-- Aku akan berteriak pada pengguna untuk alasan itu. Jika tidak, jika kita melewati semua kondisi ini, mari kita kembali benar. Biarkan formulir diserahkan. Dan ini akan terjadi. 

[00:21:56] Mari kita ketik merah. Mari memeriksa kotak, klik Daftar. Dan sekarang aku pergi melalui ke tujuan. Sekarang, tidak ada database yang ada. Tidak ada yang menarik di register.php. Aku hanya butuh sesuatu untuk benar-benar berbicara dengan. Jadi biarkan aku berhenti sejenak, di sini. Ada pertanyaan tentang apa yang baru saja kita lakukan atau apa yang beberapa sintaks baru ini? OK, ya? 

[00:22:17] AUDIENCE: Jadi kotak centang apapun secara otomatis Boolean a. Anda tidak harus menyatakan seperti itu. 

[00:22:21] DAVID J. Malan: Benar. Setiap kotak centang yang dikirim kepada Anda dari bentuk HTML ke kode JavaScript Anda akan diperlakukan, ya, sebagai Boolean value-- benar atau salah. Ini adalah pertanyaan yang bagus. Sedangkan nilai-nilai lain, dari Tentu saja, telah teks, AKA string. 

[00:22:36] Baiklah, jadi biar mundur sedikit lebih jauh. Apa inti dari ini? Hanya untuk menjadi jelas. Seperti, kita sudah tahu, bahkan dari Pset7 dan bahkan dari kuliah minggu lalu contoh, bahwa kita jelas dapat memeriksa $ _GET $ _POST Melihat apakah pengguna memberi kita nilai kosong. Ingat fungsi kosong di PHP. 

[00:22:54] Jadi hanya harus jelas, apa salah satu alasan kita mungkin juga ingin melakukan pengecekan error ini dalam browser? Apa motivasi di sini? Ya. 

[00:23:06] AUDIENCE: Lebih cepat, dan Anda tidak mengirim data yang tidak berguna ke server. DAVID J. Malan: Baik. Ini lebih cepat. Anda tidak mengirim berguna data ke server. 

[00:23:12] Jadi Anda mendapatkan kembali lebih tanggapan langsung. Dan secara keseluruhan, pengguna pengalaman lebih baik. Pikirkan tentang alternatif. 

[00:23:17] Jika untuk Gmail-- dan kasus beberapa tahun yang lalu. Misalkan Anda punya email baru Gmail Anda rekening, tapi satu-satunya jalan melalui untuk melihat bahwa adalah, seperti, reload seluruh halaman. Atau misalkan Anda klik link untuk membaca email. 

[00:23:29] Semuanya harus reload jadi bahwa Anda dapat melihat email. Atau Facebook-- Anda mendapatkan pesan chat. Anda tidak melihat itu sampai Anda memuat ulang halaman atau klik beberapa tautan. 

[00:23:36] Seperti, ini akan menjadi sangat pengalaman pengguna menjengkelkan. Dan ini adalah bagaimana rasanya, jelas, kembali ketika aku berlari untuk UC dan web jauh kurang dinamis dan JavaScript tidak seperti yang dipopulerkan seperti sekarang. Dan hal semakin banyak lebih dinamis dan banyak lagi sisi klien dalam arti itu. 

[00:23:49] Tapi ada menangkap di sini, dan ini adalah jenis Gotcha menjengkelkan. Hanya karena Anda menambahkan sisi client deteksi seperti ini tidak berarti Anda dapat atau harus meninggalkan deteksi sisi server. Anda pada dasarnya ingin menempatkan Anda kesalahan memeriksa kedua tempat. Karena apa yang salah dari pelajaran dari artikel yang saya baca beberapa kutipan dari dengan system-- CMS bodoh ini Content Management System-- yang menerapkan sistem otentikasi, Login nya melalui apa mekanisme? JavaScript. 

[00:24:20] AUDIENCE: JavaScript. DAVID J. Malan: JavaScript, tepatnya, kan? Itu menggunakan JavaScript. Dan secara harfiah, kalian punya memainkan sedikit mungkin dengan Inspektur Chrome. Dan jika saya dapat menemukannya, memeriksa elemen. 

[00:24:30] Biarkan aku pergi untuk melakukan semua pilihan Chrome. Dan ini adalah bagaimana mudahnya untuk menonaktifkan JavaScript pada browser. Lihat, tidak ada lagi JavaScript. 

[00:24:38] Jadi dalam keadilan, banyak web hari ini hanya akan patah karena Gmail dan sites-- lainnya Facebook-- berasumsi bahwa JavaScript diaktifkan. Tapi jika Anda melakukan sesuatu yang bodoh seperti hanya memvalidasi pengguna masukan dan memeriksa untuk kesalahan pada sisi client, musuh dengan mudah bisa melakukan ini. Dan kemudian bahkan lebih cerdas musuh seperti kalian sekarang bisa menggunakan Telnet atau Curl atau hanya perintah perintah baris dan benar-benar mengirim pesan ke server yang sama tidak kesalahan diperiksa. 

[00:25:05] Jadi ini lebih dari keputusan user interface daripada aktual teknis improvement-- menerapkan sisi client sesuatu seperti ini. Jadi sekarang sekilas, tapi kemudian Saya akan tunduk kepada berjalan secara online melalui untuk yang satu ini. Dalam bentuk dua, kami benar-benar pergi melalui dan dibersihkan kode sedikit. Tapi biarkan aku tunduk kepada satu video kita akan cenderung embed di Pset8 yang hanya menunjukkan Anda sintaks mirip dengan sebuah perpustakaan yang disebut jQuery, yang merupakan super, super Perpustakaan populer di JavaScript yang terus terang kebanyakan orang hanya menggunakan hari ini dan bahkan membingungkan sebagai makhluk JavaScript itu sendiri. 

[00:25:37] Dan cenderung melibatkan beberapa tanda-tanda dolar dan kata kunci seperti dokumen dalam tanda kurung di sini. Tapi sekali lagi, biarkan aku tunduk kepada beberapa tutorial online lebih lambat daripada mendapatkan diikat hanya dalam sintaks. Mari kita beralih ke sesuatu sedikit lebih dingin dalam hal aplikasi ini. 

[00:25:50] Jadi secara khusus, biarkan aku pergi depan dan membuka ini di sini. Ayo. Di sana kami pergi. 

[00:25:59] Mari saya membuka gambar ini di sini. Tidak perlu rumit mencari, tetapi menjelaskan teknik yang disebut AJAX-- Asynchronous JavaScript and XML, di mana X untuk XML sebenarnya tidak lagi benar-benar digunakan. Hal ini cenderung untuk menggunakan sesuatu lain disebut JSON. 

[00:26:13] Tapi di sini adalah bagaimana sesuatu seperti Google Maps atau Google Earth bekerja. Mari kita coba ini dengan cepat, benar-benar. Biarkan aku pergi ke depan dan membuka Chrome pada browser saya. 

[00:26:21] Dan biarkan aku masuk ke dalam, mengatakan, maps.google.com. Dan sebenarnya, jika Anda tua cukup untuk mengingat apa, seperti, MapQuest seperti kembali pada hari, dan mungkin mereka masih bekerja seperti ini. Bila Anda digunakan untuk mencari something-- 33 Oxford Street, Cambridge, Mass, mari kita lakukan this-- Anda benar-benar akan, jika Anda ingin menggeser naik dan bawah, kiri dan kanan, Anda akan terlihat seperti panah besar di atas, dan itu akan menampilkan lain kerangka peta di sini. Atau Anda akan klik kiri dan Anda akan pergi ke sini, atau klik lain dan Anda akan pergi ke sini. Tapi bukannya ini hari, kita tentu saja mengambil begitu saja bahwa kita bisa pergi sekitar Cambridge cukup cepat hanya dengan mengklik dan menyeret. Tapi perhatikan ada beberapa gangguan. 

[00:26:59] Jika saya melakukan ini cukup cepat, apa yang tampaknya terjadi seperti yang saya tarik sedikit terlalu cepat untuk komputer untuk menjaga? Apa yang Anda lihat? Ya. 

[00:27:07] AUDIENCE: Pixel jangan me-refresh. DAVID J. Malan: The piksel jangan me-refresh. Ada actually-- dan Anda bisa melihat ini, sebenarnya, jika Anda menonton secara online dan jeda ini atau benar-benar memperlambat segalanya untuk once-- Anda akan melihat bahwa ada ubin, kotak, atau persegi panjang yang hilang dari peta sampai sepersekian detik kemudian, lebih banyak data, lebih gambar sebenarnya muncul di layar. Dan pada kenyataannya, jika kita melakukan ini dengan melihat up Chrome's-- katakanlah, Chrome-- mari kita lihat. Kami tidak bisa melakukan itu. 

[00:27:31] Oh, whoops. Mari kita membuka maps.google.com. Mari saya membuat jendela yang lebih besar lagi. 

[00:27:36] Kembali ke 33 Oxford Street. Apa situs aku berada di baru-baru ini? Aku punya ini, seperti, kata-kata kasar swasta untuk diri sendiri bahwa saya akan kemudian instant message setiap teman yang online yang ingin mendengarnya. Ada beberapa situs web. Saya pikir itu Comcast-- jadi ISP Amerika sangat besar. Anda dapat, saat mendaftar untuk kabel baru layanan modem atau layanan TV kabel, mereka memiliki bentuk sangat cukup di mana mereka meminta Anda untuk alamat Anda. Dan memiliki menakjubkan ini fitur yang disebut auto complete, seperti Google, yang mulai mengisi dalam jawaban atas pertanyaan Anda. 

[00:28:04] Masalahnya adalah, mereka melakukan auto complete pada hal-hal pertama yang Anda ketik. Jadi jika Anda mulai mengetik di 33, itu akan menunjukkan Anda benar-benar setiap rumah di Amerika yang dimulai dengan nomor 33 sebelum melanjutkan ke mengharapkan Anda untuk mengetik lebih. Jadi jika Anda mengetik 33 Oxford, maka hal itu menunjukkan Anda setiap jalan di Amerika yang memiliki 33 Oxford di namanya, terlepas dari kota bahwa Anda berada di. 

[00:28:25] Dan kemudian Anda terus mengetik. Dan akhirnya, ia menyadari bahwa mereka tidak menawarkan layanan ke rumah Anda di Cambridge atau sesuatu seperti itu. Tapi yang penting, ini adalah yang paling pelaksanaan bodoh auto menyelesaikan pernah. 

[00:28:34] Dan aku hanya pergi di singgung ini lagi. Tapi ada cara yang baik untuk menggunakan JavaScript dan cara-cara yang buruk. Dan itu belum tentu yang terbaik. 

[00:28:40] Tapi titik di sini, sebelum ini omelan, adalah untuk membuka alat di sini dan membuka alat pengembang, seperti yang telah kita didorong sebelumnya, dan untuk menonton Jaringan tab seperti yang saya klik sangat cepat. Dan melihat seluruh bunch dari mendapatkan permintaan yang terjadi. Semua ini terjadi sejak aku diseret. 

[00:28:57] Dan kemungkinan besar, memang banyak baris ini sekarang adalah gambar slash JPEG Jenis MIME atau jenis konten. Itu karena apa krom lakukan setiap kali saya klik dan drag, klik dan drag, adalah itu menyadari, oh, saya perlu pergi meminta Google untuk ubin di peta itu di sini, cepat download melalui HTTP, dan kemudian menambahkannya ke apa yang disebut DOM ke browser web di pohon memori representasi sehingga pengguna, saya, melihat bahwa ubin diperbarui. Dan ini adalah karena teknik yang disebut AJAX. Kembali pada hari, itu benar-benar adalah kasus bahwa jika Anda ingin mengubah apa yang ada di layar, Anda harus klik atas, bawah, kiri, benar. Dan kemudian halaman baru akan terbuka. Tapi hari ini, semuanya lebih dinamis. Hal ini terjadi dalam cara kita manusia akan berharap itu benar-benar akan secara interaktif. Dan itu mencapai ini dengan cara teknik yang disebut AJAX, yang mungkin terbaik dijelaskan oleh contoh. Pertama, biarkan aku pergi ke depan dan membuka file disebut quote.php di kode distribusi hari ini. 

[00:29:53] Dan kemudian membiarkan saya melakukan whoops symbol--. Biarkan aku melakukan simbol = GOOG untuk hanya beberapa saham. Atau sebenarnya, mari kita lakukan salah satu dari Pset GRATIS. Enter. 

[00:30:05] Dan sekarang melihat apa yang saya dapatkan kembali. Jadi ini adalah benar-benar file PHP pendek yang saya menulis bahwa hanya meminjam kode dari fungsi lookup Pset7 ini dan meludah keluar menggunakan penjepit keriting ini dan kutipan dan notasi usus besar, tampaknya, harga saham saat ini untuk perusahaan yang Anda lulus dalam melalui get. Jadi ini berbeda dari sebagian besar dari apa yang kita sudah dilakukan dalam bahwa pemberitahuan saya harfiah menyemburkan apa yang tampak seperti kode JavaScript. 

[00:30:27] Bahkan, ini adalah objek JavaScript. Bahkan, hanya untuk lebih jelas, JavaScript Object Notation-- JSON-- adalah cara mewah untuk mengatakan bahwa Anda dapat mewakili data dalam JavaScript jauh seperti Anda dapat dalam PHP menggunakan pasangan nilai kunci. Jadi jika saya ingin menyatakan variabel dalam JavaScript untuk mewakili Zamyla, untuk instance-- struct untuk Zamyla-- dan kita akan menyebutnya mahasiswa, variabel ini. ID nya adalah satu, rumah Winthrop, dan namanya Zamyla. 

[00:30:53] Tapi saya juga dapat memiliki sebuah array dari objek. Jadi jika saya benar-benar ingin memiliki array dalam JavaScript yang berisi beberapa objek seperti, ini waktu mewakili staf, Saya mungkin memiliki ketiga potongan kode kembali untuk kembali ke belakang untuk ini tiga mantan anggota staf. Jadi sintaks, cukup mirip dengan both-- ke PHP. Tapi ini sangat JavaScript. Ini notasi objek. Jadi apa ini berguna untuk? 

[00:31:17] Jika saya menulis kode yang meludah keluar JSON-- JavaScript Object Notation-- hal-hal yang terlihat seperti ini atau hal-hal yang terlihat seperti struktur Zamyla ini, Aku benar-benar dapat menggunakan ini dalam program saya menulis. Biarkan aku pergi ke ajax0.html. Dan ini too-- tidak banyak pikir diberikan kepada estetika. Tapi lihat apa yang terjadi. 

[00:31:34] Biarkan aku pergi ke depan dan ketik gratis di sini. Klik mendapatkan penawaran. Dan perhatikan URL belum berubah. Tapi aku mendapatkan pop up dengan rupanya harga saham penny hari ini $ 0,15. Jadi tidak semua yang buruk. Tetapi perbedaannya adalah bahwa entah bagaimana, Data ini kembali ke saya secara langsung. Tapi mari kita mengambil langkah menuju sesuatu yang lebih familiar. Dalam versi satu ini, izinkan saya ketik gratis lagi, klik Dapatkan kutipan, dan sekarang-- oh, ini adalah sebenarnya versi jQuery. Jadi mari me-- aku tidak cepat maju cukup jauh. Biarkan aku pergi ke versi dua, yang mana saya ingin. Perhatikan apa yang saya lakukan di sini. Aku punya web page-- super Versi sederhana dari setiap halaman web Anda mungkin menggunakan hari ini dengan field teks di sini secara gratis dan kemudian tampaknya hanya teks. 

[00:32:14] Ini bukan bentuk di sini, rupanya. Tapi kalau aku klik mendapatkan kutipan, perhatikan halaman web saya akan berubah seolah-olah saya baru saja mendapat pesan cepat baru atau seolah-olah aku baru saja pindah peta dan diperlukan untuk mendapatkan lebih banyak data ditambahkan secara dinamis ke halaman web tanpa perubahan URL dan pengguna Pengalaman mendapatkan terganggu. Memang, aku masih di persis ajax2.html place-- sama. 

[00:32:35] Jadi mari kita lihat hanya pada contoh ini dan melihat bagaimana hal ini terjadi. Biarkan aku pergi ke ajax2.html. Dan perhatikan bentuk pertama. 

[00:32:44] Di sini, aku berubah off otomatis lengkap. Kadang-kadang mendapat menjengkelkan jika browser mencoba menampilkan Seluruh sejarah Anda. Jadi Anda bisa melakukannya di HTML oleh hanya mengatakan auto menyelesaikan off. 

[00:32:53] Aku telah diberi teks ini lapangan symbol-- lebih tepatnya, sebuah ID simbol. Dan sekarang, ini adalah fitur yang menarik. Kami belum berbicara tentang rentang, tetapi Anda dapat berpikir tentang hal ini seperti tag paragraf atau tag div. Ini apa yang disebut in-line elemen, yang berarti Anda tidak akan mendapatkan paragraf istirahat di atas dan di bawahnya. Ini hanya akan tinggal in-line tanpa memukul setara masukkan. Jadi saya telah memberikan potongan ini HTML akan ditentukan pengenal unik bahwa saya sewenang-wenang disebut harga. Dan aku punya tombol Submit. 

[00:33:21] Karena sekarang sampai di sini-dan ini adalah sebenarnya sangat menakjubkan kode betapa sedikit Anda dapat menulis untuk melakukan relatif rapi things-- melihat apa yang saya lakukan di sini jika saya gulir ke atas ke kepala halaman ini. Saya telah menyertakan pertama dalam kepalaku tag script yang benar-benar referensi JavaScript mengajukan tempat lain. Ini dari organisasi yang menulis jQuery, dan ini hanya memberikan Anda terbaru Versi perpustakaan jQuery mereka. 

[00:33:42] Jadi ini adalah jenis seperti tajam termasuk di C atau butuhkan dalam PHP. Anda menggunakan tag script dengan atribut sumber. Tapi sekarang kode sendiri adalah akan menjadi benar di sini. 

[00:33:52] Perhatikan Saya memiliki fungsi yang disebut Quotes. Dan itu terlihat sedikit samar pada pandangan pertama. Tapi mari kita menggoda ini terpisah. Beri aku sebuah variabel yang disebut URL. Menetapkan harfiah string ini. Jadi, tanda kutip tunggal, tanda kutip ganda di JavaScript hanya memberi saya sebuah string. Apa plus lakukan? Rangkaian. 

[00:34:08] Jadi sekarang ini adalah sintaks jQuery yang membutuhkan sedikit membiasakan diri. Tapi ini hanya berarti pergi mendapatkan saya DOM simpul yang identifier unik adalah simbol. Hashtag ada artinya simbol identifikasi unik. 

[00:34:21] Tanda dolar di Kurung hanya berarti, membungkus ini di jQuery semacam saus rahasia sehingga Anda mendapatkan fungsi tambahan. Dan kemudian val tampaknya fungsi, atau seperti yang kita katakan sekarang, metode dalam node ini yang hanya memberi Anda nilai. Jadi singkatnya, jelek dan membingungkan karena hal ini terlihat pada pandangan pertama, ini hanya berarti mendapatkan dengan pengguna mengetik di, letakkan di bagian akhir string dengan menggabungkan itu. Itu saja. 

[00:34:43] Jadi sekarang, tiga baris terakhir. Anda dapat memeras banyak fungsi dari tiga baris. Tanda dolar ini, sebagai samping, hanya nama panggilan untuk variabel global khusus disebut harfiah jQuery. 

[00:34:55] Dolar tanda hanya terlihat keren. Jadi masyarakat jQuery hanya jenis digunakan sebagai simbol khusus mereka. Ini tidak berarti apa artinya dalam PHP. Dalam JavaScript, tanda dolar adalah hanya seperti huruf alfabet atau nomor untuk variabel. 

[00:35:07] Anda hanya dapat memilikinya sebagai nama. Hanya terlihat keren. Jadi masyarakat diadopsi sebagai nama panggilan untuk perpustakaan mereka sendiri yang disebut jQuery. 

[00:35:13] Dan itu super populer. Jadi bisa JSON adalah persis seperti itu. Ini fungsi yang Orang-orang di jQuery menulis yang mendapat JSON dari server-- sebuah JavaScript Object Notation. Dari apa URL itu akan untuk mendapatkan informasi tersebut? Rupanya dari URL ini di sini. 

[00:35:27] Dan apa yang harus browser lakukan sebagai Begitu mendapat kembali respon ini? Dan ini adalah keajaiban AJAX, sehingga untuk speak-- Asynchronous JavaScript di XML. Sulit untuk melihat dengan seperti contoh sederhana seperti yang kita punya di sini. 

[00:35:41] Tapi ini asynchronous dalam arti bahwa kode saya ketika dieksekusi mengirim pesan ke server untuk pergi mendapatkan saya beberapa JSON. Dan itu terjadi super cepat bahwa saya mendapat respons. Namun yang menarik adalah bahwa ini baris kode tidak menggantung komputer saya. 

[00:35:55] Aku tidak melihat ikon berputar. Aku tidak kehilangan kemampuan untuk menggerakkan mouse saya. Browser saya adalah benar-benar baik-baik saja. 

[00:36:01] Karena cara JavaScript menangani respon dari server adalah sebagai berikut. Anda mendaftar apa yang Anda sebut fungsi callback, yang hanya berarti, hei, JavaScript. Begitu server merespon dengan JSON, hubungi fungsi anonim ini. 

[00:36:18] Dan tolong masuk ke fungsi ini tali apa pun server meludahkan sebagai argumen disebut data. Jadi lain, kata-kata, jika Aku perakitan secara dinamis sebuah quote.php URL lewat di ini simbol seperti GRATIS atau GOOG atau entah apa lagi, Saya kemudian memberitahu JavaScript pergi mendapatkan URL itu. Ingat bahwa browser akan kembali sesuatu yang terlihat seperti kita melihat earlier-- ini. 

[00:36:42] Dan apa argumen kedua di sini untuk mendapatkan JSON mengatakan adalah memanggil fungsi ini ketika server akan kembali apakah itu 10 milidetik dari sekarang atau 10 detik dari sekarang. Dan segera setelah Anda lakukan, menambahkan harga ke halaman. Sintaks ini di sini hanya berarti pergi mendapatkan node dari pohon yang identifier unik adalah price-- bahwa rentang kita lihat sebelumnya. 

[00:37:01] Metode ini disebut HTML hanya mengatakan, pergi menggantikan HTML yang ada dengan data.price. Apa data.price? Nah, browser, ingat, kepadaku datang kembali. Jadi ini adalah data. 

[00:37:14] Dan jadi agak samar untuk melihat koma di sini. Namun pada kenyataannya, biarkan aku melakukan ini. Biarkan aku hanya paste ini sangat cepat dalam gedit dan menunjukkan hal ini seperti kita menunjukkan Struktur Zamyla sebelumnya. 

[00:37:27] Apa server mengirimkan kembali adalah sedikit objek yang terlihat seperti ini. Dan data.price adalah hanya memberi saya 0,1515. Jadi banyak bergerak bagian di sini sekaligus. 

[00:37:39] Tapi takeaways kunci bahwa kita memiliki kemampuan ini untuk membuat HTTP tambahan permintaan menggunakan JavaScript tanpa harus kembali halaman tersebut. Dan kemudian kita benar-benar dapat mengubah halaman web dengan cepat. Dan ternyata bahwa JavaScript dan bahasa lainnya dapat digunakan sekarang tidak hanya bermutasi halaman web, tapi untuk benar-benar menulis perangkat lunak dalam komputer yang sebenarnya, tidak hanya terbatas pada Chrome atau sejenisnya. 

[00:38:00] Bahkan, if-- Colton, akan Anda ingin bergabung dengan kami kembali ke sini dengan kode lab, dan Chang juga? Mari kita pergi ke depan, setelah berbicara tentang fungsi anonim dan callback dan benar-benar menggoda nasib di sini dengan live demo dengan perdarahan teknologi mutakhir, salah satu perangkat Elite Gerak ini. Sekarang, perangkat ini, ingat, adalah perangkat USB kecil serta itu-- itu beautiful-- yang tancapkan ke port USB Anda. 

[00:38:25] Dan kemudian memberikan masukan dalam bentuk gerakan manusia dengan mendeteksi menggunakan sinar inframerah, dasarnya, gerakan dari lengan Anda. Jadi sementara apa yang Maria mencoba sebelum berotot, benar-benar merasakan apa yang berubah lengan Anda, ini adalah inframerah berbasis. Jadi itu mencari gerakan dalam jenis bola dari kaki atau lebih dari perangkat itu sendiri. 

[00:38:46] Jadi kenapa tidak saya ambil menusuk pertama ini? Dan mari kita pergi ke depan dan melemparkan Anda sampai pada overhead sini. Jadi mari kita menempatkan laptop Colton di sini. Kami punya Andrew di TV. Dan apa yang Anda ingin saya lakukan pertama? 

[00:39:00] COLTON: Pergi ke depan dan hanya menempatkan tangan di atas orang ini dan Anda akan melihat beberapa kilau yang luar biasa. 

[00:39:04] DAVID J. Malan: Very nice. Ini semua terjadi secara real time. OK. Baiklah, dan yep. Begitu baik. Baiklah, apa lagi yang bisa kita lakukan? 

[00:39:15] COLTON: Pergi ke layar berikutnya dan melihat. 

[00:39:17] DAVID J. Malan: Baiklah. 

[00:39:19] COLTON: Sebuah permainan kecil yang menyenangkan di mana Anda bisa membuat robot. 

[00:39:21] DAVID J. Malan: Baiklah, jadi ini adalah tangan palsu menunjukkan kepada saya apa yang harus dilakukan. COLTON: Ya Jadi silakan dan ambil salah satu blok dan meletakkannya di atas tubuh yang robot. DAVID J. Malan: Oh, ada tanganku. Oh. OK, menggemaskan. Tunggu sebentar, OK. Di sana kami pergi. 

[00:39:41] COLTON: Saya membuat satu kecelakaan. 

[00:39:43] DAVID J. Malan: OK, saya akan mendapatkan orang ini. Sialan! Ketika kami berlatih terakhir ini malam, Anda tahu apa ini diserahkan ke? 

[00:39:51] Seperti ini. OK. Berikutnya satu? 

[00:39:55] COLTON: Tentu. 

[00:39:56] DAVID J. Malan: Baiklah, dan ada yang ketiga. Baik. COLTON: Dan dalam satu ini, Anda mendapatkan to-- DAVID J. Malan: Oh, satu ini indah. COLTON: --yeah, memilih selain bunga ini. DAVID J. Malan: OK. Tidak ada? Terjawab. 

[00:40:14] COLTON: Oh, di sana Anda pergi. 

[00:40:15] DAVID J. Malan: Ah, Lihat itu. Sangat bagus. Nah, kenapa tidak 'kita mengambil keluar satu relawan di sini yang ingin datang ke atas. Bagaimana di sana di hijau, apakah itu? 

[00:40:27] Baiklah, dan mari kita have-- bukannya melakukan itu, beberapa dari Anda mungkin tahu game ini di sini- memotong tali, mungkin? Mari kita lihat. Kami memiliki gelas kami di lebih dari sini? 

[00:40:37] OK. Terima kasih. Siapa namamu? 

[00:40:39] AUDIENCE: Laura. 

[00:40:40] DAVID J. Malan: Laura? Bagus untuk melihat. Jika Anda tidak keberatan menempatkan Google Glass lebih dari kacamata Anda. Ini adalah Colton. 

[00:40:46] COLTON: Hi. Senang kenalan dengan anda. 

[00:40:48] DAVID J. Malan: OK, ayolah sekitar. Baiklah, jadi apa yang Anda akan lakukan di sini, setelah bermain ini sebelumnya, adalah meletakkan tangan Anda di atas Leap Gerak sini. Dan sekarang panah harus bergerak. Oh, nggak. 

[00:40:57] AUDIENCE: No. 

[00:40:58] DAVID J. Malan: Kami tidak ingin berhenti belum. OK, tunggu. Di sini. Jadi perhatikan saat menahan Anda jari atas sesuatu, mouse mulai go green, yang adalah bagaimana Anda klik. 

[00:41:06] Jadi membawa lebih Play. Dan hanya satu jari baik-baik saja. Dan sekarang klik pada sedikit orang hijau di sebelah kiri. Dan sekarang terus sampai itu mengisi hijau. Baik. Sekarang, seperti, tingkat satu di bagian atas. 

[00:41:16] AUDIENCE: Ya, kita ingin tingkat satu, di sini. 

[00:41:20] DAVID J. Malan: Baik. OK, jadi semua yang Anda miliki lakukan adalah memotong tali. Kursor Anda adalah satu putih di sana. 

[00:41:28] Sangat bagus. Baiklah, ini tentang mendapatkan lebih keras. Jadi tahan jari Anda di atas berikutnya sekarang. Baik. Yang satu ini sulit. 

[00:41:39] AUDIENCE: Oh crap. OK. Ia ingin pergi ke arah sana. Oh crap, itu-- 

[00:41:44] DAVID J. Malan: Ya. Tujuan sekunder adalah untuk mendapatkan semua bintang. Baiklah, berikutnya. 

[00:41:53] Mari kita lihat apakah Anda bisa mendapatkan sepertiga ini. Baik. OK, pergi ke sana. 

[00:42:06] Tentu. Oh, sangat bagus. Baik. 

[00:42:11] Jadi kenapa tidak kita menunda sini hari ini? Biarkan orang datang up yang ingin bermain. Terima kasih banyak untuk Laura relawan kami. Dan kita akan melihat Anda pada hari Senin. 

[00:42:18] AUDIENCE: Anda mungkin ingin ini kembali. 

[00:42:21] SPEAKER 2: Pada CS50-- berikutnya