DAVID J. MALAN: Baiklah, jadi ini di sini adalah lengan Myo yang band, pasangan di mana kita mempunyai untuk projek-projek akhir CS50. Dan itu adalah demonstrasi kami antri Anda di muka di mana pada dasarnya lengan yang cukup ketat ini band di sini mendengar pergerakan otot anda yang kemudian dipetakan dalam perisian ke laptop Colton di sebelah sini yang mempunyai iTunes dan lagu sudah beratur. Daripada saya demoing ini, Colton Sudah di makmal jelas sepanjang minggu mendapatkan demonstrasi siap satu sukarelawan berani. Jika seseorang ingin datang pada up-- melihat tangan anda terlebih dahulu. Datang ke atas. [00:01:09] Baik. Dan sapa jenengmu? 

[00:01:13] PENONTON: Eh, Maria. 

[00:01:14] DAVID J. MALAN: Maria, baik untuk melihat anda. Ayo di sini. Biar saya memperkenalkan anda kepada Colton. Colton, ini adalah Maria. 

[00:01:21] COLTON: Hi, baik untuk bertemu dengan kamu. 

[00:01:23] DAVID J. MALAN: Semua benar, jadi langkah pertama, kami tidak akan mempunyai anda meletakkan ini kepada lengan anda sehingga ia cukup ketat di dekat siku anda. Dan sementara itu, mari kita memakai Google Glass kami dan kami akan mencampur teknologi hari ini. 

[00:01:33] COLTON: Pertama kita harus mengaitkan ini ke dalam sesuatu. 

[00:01:36] DAVID J. MALAN: OK. Sebenarnya, mari kita meletakkan lengan anda sebagai dekat dengan kabel ini yang mungkin supaya kita pertama sinkron itu. 

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

[00:01:42] DAVID J. MALAN: Dan sementara itu, sehingga bahawa semua orang boleh mendapatkan pandangan yang lebih dekat, kami akan melambungkan kamera Andrew di layar di sana. Jadi kita mempunyai kabel USB yang yang terpasang ke ban Maria. Dan biarlah saya melambungkan skrin Colton pada projektor seterusnya. 

[00:02:00] Jadi Colton mendaftarkan peranti sekarang sebagai Myo dihubungkan dengan kabel ini. Dan sekarang apa yang Maria akan lakukan seketika sebenarnya berjalan melalui langkah-langkah kalibrasi dan mengajar perisian bagaimana otot-ototnya bertindak balas apabila dia membuat tertentu yang telah ditetapkan menunjuk bahawa perisian mengerti. Jika anda ingin pergi di hadapan skrin. OK, terus mencuba. 

[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 berbeza. Ia bukan Anda. Ini kami. 

[00:02:40] MARIA: OK. DAVID J. MALAN: No. Ayo bergerak lebih tinggi supaya ia lebih dekat dengan siku anda, atau bahkan yang lebih ketat. Baik. 

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

[00:02:57] Sangat bagus. OK. Ibu jari ke pinky. 

[00:03:02] Sangat bagus. Sebarkan jari anda. Baik. Gelombang yang tepat. Ia ingin tahu yang menunjukkan anda dengan hand-- sebelah kiri 

[00:03:17] COLTON: Ya, itu aneh. DAVID J. MALAN: Wave untuk yang betul dan bergerak ke hadapan. Cepat ke skip atau seterusnya. Itu Wave kanan OK. 

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

[00:03:26] DAVID J. MALAN: Perlukan bantuan? 

[00:03:28] COLTON: Jadi, anda akan seperti ini. MARIA: Ia membalikkan benda lain, walaupun. COLTON: Adalah. DAVID J. MALAN: Ya, aku tidak tahu mengapa hal itu menunjukkan anda leftie a. COLTON: Mengapa kamu tidak try-- hanya cuba pergi seperti ini. 

[00:03:38] DAVID J. MALAN: Tidak? Mungkin sampai ke tangan anda keluar sedikit lebih tegak dan menjadikannya lebih tiba-tiba seperti ini. Ya, OK, datang ke atas. 

[00:03:48] MARIA: Saya minta maaf. DAVID J. MALAN: Ini bukan salah anda. COLTON: Tidak apa-apa. DAVID J. MALAN: Hak. Well-- 

[00:03:56] MARIA: Haruskah kita melewatkan ini, maka? DAVID J. MALAN: Ya, mari kita membiarkan anda bebas. Jadi, jika ada yang ingin melakukan projek akhir menggunakan kelebihan ini perkakasan, menyedari ia mungkin hanya mengambil sedikit untuk membiasakan diri. Dan this-- realitinya adalah ini sebenarnya sangat pendarahan tepi. 

[00:04:10] Ini adalah apa yang disebut kit pemaju, yang dimaksudkan untuk menjadi dasarnya adalah pre-release sehingga orang dapat melakukan hal this-- berjuang dengan itu, angka bagaimana tubuh manusia berfungsi dengan teknologi. Jadi jika anda ingin selepas itu, setelah kuliah, kita boleh membiarkan anda datang dan mengambil menusuk lain dalam hal itu. Tetapi jika tidak, tepuk tangan, jika kita boleh, bagi Maria untuk datang ke atas. 

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

[00:04:28] DAVID J. MALAN: Terima kasih. Kami akan bertahan pada ini, tetapi kami akan memberikan you-- bagaimana dengan bola tekanan di sini? Oh, dan- jika- ya, terima kasih. Baik. Jadi bagi yang ingin tahu, jika anda tidak biasa dengan pilihan suara yang kami buat di sana sebelum ini, TV menakjubkan menunjukkan bahawa anda perlu benar-benar menjadi pesta-menonton di Netflix adalah salah satu ini di sini. 

[00:04:51] SPEAKER 1: Tuan-tuan dan puan-puan, seorang ahli silap mata yang bernama Josh. 

[00:05:04] DAVID J. MALAN: Dan nampaknya, ia itu sebagai milik yang teks saya selama kuliah sekarang. Saya diberitahu bahawa Maria memiliki ulang tahun kemarin. Ulang tahun begitu gembira dari CS50 Maria juga. 

[00:05:18] Jadi, anda mungkin telah membaca pada bulan baru-baru ini bahawa tuan-tuan di sini, Steve Ballmer, yang sebenarnya kelas tahun 1977 di kampus, baru-baru ini telah bersara untuk Microsoft. Beliau adalah sarjana di sini, kemudian beberapa tahun kemudian mendapati dirinya di Stanford Business School ketika menerima telefon yang panggilan dari seorang sahabat yang beliau pernah tinggal di lorong dari dia di sini di Harvard. Nama rakan tersebut adalah Rang Undang-Undang Gerbang dan pada masa itu, ia berusaha untuk merekrut Steve menjadi orang perniagaan yang pertama, benar-benar, di sebuah syarikat kecil nama Microsoft. 

[00:05:45] Pendek cerita, Steve akhirnya menang atas, bergabung dengan Microsoft apabila mereka baru sahaja 30 pekerja. Dan pada masa dia bersara baru-baru ini, syarikat itu mempunyai 100,000 pekerja selama bertahun-tahun kebelakangan ini. Dan sebagainya laman web yang dikenali sebagai The Verge disediakan penghormatan ini pada video yang kami pikir kami akan bersama yang memberikan anda rasa betapa banyak tenaga Steve membawa kepada mana-mana persembahan yang dia berikan. [VIDEO MAIN SEMULA] -Microsoft Seperti anak keempat. Kanak-kanak melakukan meninggalkan rumah. Dalam hal ini, saya rasa Saya meninggalkan rumah. Hey Rang Undang-Undang, whazzap? 

[00:06:23] -Wazzap? 

[00:06:24] Hei, wazzap? Kami telah diberi peluang yang sangat besar. Dan Rang Undang-Undang memberi kami kesempatan itu. Saya ingin mengucapkan terima kasih kepada Rang Undang-undang untuk itu. Saya mahu anda juga. Kepesatan inovasi tidak akan melambatkan. 

[00:06:42] Ini akan mendapatkan lebih cepat dan lebih cepat. Mungkin ada beberapa pesaing yang malangnya dihapuskan! 

[00:06:54] Saya suka syarikat ini. Ya! Saya PC, dan saya suka syarikat ini! 

[00:07:08] Pemaju, pemaju, pemaju, pemaju, pemaju, pemaju, pemaju, pemaju. Ya! Pembangun laman web! 

[00:07:19] Pembangun laman web! Pembangun laman web! Dengar apa lagi yang anda mendapatkan tanpa caj tambahan! 

[00:07:28] MS-DOS eksekutif, temujanji kalendar, setumpuk kad, buku catatan, jam, panel kawalan. Dan, anda boleh percaya? Reversie! 

[00:07:35] Membakar mereka ke CD! Posting mereka ke MSN! Anda email kepada rakan-rakan! 

[00:07:40] Semua dengan satu klik! Satu Microsoft, satu strategi, satu team-- fokus, disiplin, profesional, dan pakar dalam semua yang kita lakukan. Saya menggunakan garis dari filem lama. 

[00:07:52] Hubungan adalah seperti jerung. Mereka bergerak maju atau mereka mati. Saya sebenarnya berfikir teknologi syarikat adalah sama. 

[00:08:01] [AKHIR VIDEO MAIN SEMULA] DAVID J. MALAN: Jadi kami sangat senang untuk mengumumkan bahawa Steve akan bergabung dengan kita di sini di CS50 Rabu depan di tempat yang biasa dan masa di sini. Ruang mungkin akan terbatas. Karena itu, bagi menyertai kami secara langsung, sila menuju hari ini atau tidak lama selepas itu untuk cs50.harvard.edu/register. 

[00:08:22] Dan kami akan membuat susulan dengan Selasa mengesahkan tempat. Berharap untuk yang seterusnya Rabu selama kuliah di CS50. Sekarang, dalam berita yang lain, saya kebetulan mencari ini dalam The Crimson hanya hari yang lain. 

[00:08:34] Ternyata salah satu staf CS50 ini dan sekurang-kurangnya salah seorang pelajar CS50 ini sedang berjalan untuk UC Presiden dan Wakil Presiden, yang membawa saya kembali ke hari saya sendiri apabila saya kalah dalam pemilihan UC yang teruk. Tetapi lapisan perak dalam yang saya selalu menceritakan kisah ini ialah bahawa salah satu yang saya pasti banyak alasan saya kehilangan pilihan raya adalah kurang lengkap dari bakat untuk berbicara di depan umum. Dan sebagainya cukup jujur, ia membawa saya, pengalaman yang Saya rasa tahun pertama saya, untuk benar-benar menandatangani untuk Harvard Computer Society, yang adalah kumpulan di kampus yang memegang pelbagai ceramah teknikal dan lain-lain. Dan saya mengambil alih pengajaran mereka seminar dan oleh itu mempunyai peluang, yang peluang yang baik, untuk mula bekerja pada betul-betul ini. Tetapi juga, saya mempunyai peluang selama pengalaman ini untuk mengajar diri sendiri semua HTML lanjut. Oleh itu, saya menunda malam tadi oleh melihat melalui laman web HTML berdasarkan Saya dibuat dalam seperti tahun 1997, 98, untuk saya kempen yang kelihatan seperti ini di sini. Saya tahu. 

[00:09:29] Because-- dan tentu saja, notis ini keputusan reka bentuk yang luar biasa pada tahun 1998 atau entah apa lagi. Perkara pertama yang anda ingin pengguna lakukan setelah melawat laman web anda adalah perlu klik pautan lain hanya untuk memasuki laman web anda di sini dengan sami di belakang tabir seperti diselubungi mana nampaknya platform kempen saya. Dan ini adalah semua yang anda akan mendapat hari ini adalah hanya tangkapan skrin. Tetapi saya telah membaca, seperti, poster kempen saya malam tadi dan platform saya. 

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

[00:10:03] Jadi HTML, bahasa yang di mana saya membuat yang dalam- anda tidak lama lagi akan membuat banyak more-- adalah sesuatu yang kita sudah bercakap tentang akhir-akhir ini dan sebagian besar pengambilan untuk diberikan sekarang bahawa kami telah berpindah ke bahasa lain. Tetapi mari kita berhenti sejenak untuk sesaat dan meletakkan beberapa perkara-perkara ini dalam konteks. Jadi dalam ayat, apa itu HTML? 

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

[00:10:20] PENONTON: Markup untuk laman web. DAVID J. MALAN: Markup untuk laman web. Jadi itu adalah bahasa markup yang membolehkan anda menyusun laman web. Tandukan naik di sini, tajuk letak di sini, badan diletakkan di sini. Ini adalah huruf tebal, ini adalah italics-- semacam terperinci. 

[00:10:33] OK, bagus. Jadi CSS membolehkan you-- dan saya mengambil beberapa kebebasan ada dengan berani menghadap dan huruf condong kerana yang lebih baik dilaksanakan dengan ini. CSS is-- apa? Mengatakan dalam sebuah kalimat. Sesiapa sahaja sama sekali. Yeah. 

[00:10:46] PENONTON: hiasan dan barang-barang, seperti bagaimana untuk merancang itu. DAVID J. MALAN: OK, baik. Hiasan yang membolehkan anda untuk mereka bentuk atau menyesuaikan dgn mode itu dengan hal-hal seperti huruf tebal dan huruf condong dan warna dan juga lebih baik kedudukan berbutir elemen. Ini semacam membolehkan anda mengambil perkara-perkara yang last mile supaya jika, misalnya, di Pset7, anda mungkin akan melihat pada anda Laman portfolio jika anda pada ketika ini sudah bahwa meja default yang anda membuat untuk menunjukkan pegangan saham pengguna dan wang tunai mungkin kelihatan cukup mengerikan secara lalai tanpa spasi. Jenis semuanya dari penuh bersama-sama dalam baris dan lajur. 

[00:11:18] Nah, dengan sedikit CSS, kerana anda mungkin sedar, Anda benar-benar dapat mengubah itu dan menjadikannya sesuatu yang jauh lebih akrab dan banyak lebih cantik untuk dilihat. Jadi CSS adalah tentang penyesuaian dgn mode dari laman web. Tetapi kemudian kami memperkenalkan satu lagi bahasa, PHP, yang membolehkan kita melakukan apa? 

[00:11:36] Mari kita melakukan apa? Sesiapa sahaja. Got untuk usaha di luar pasangan baris pertama. Yeah. 

[00:11:40] PENONTON: Menghasilkan kandungan dinamik. DAVID J. MALAN: Perfect. Menghasilkan kandungan dinamik. Dan anda boleh melakukan ini dalam apa-apa bilangan bahasa. Kami kebetulan menggunakan PHP kerana ia di bagian sehingga mirip dengan C sintaks. 

[00:11:50] Tapi PHP tidak tepat. Ia membolehkan anda dinamis menghasilkan output. Dan beberapa output yang boleh menjadi HTML, seperti yang kita biasanya lakukan. Dan ia juga, kerana ia bahasa pengaturcaraan, adalah mekanisme melalui mana kita boleh bercakap kepada pangkalan data. 

[00:12:03] Dan kita boleh membuat pertanyaan kepada pelayan lain seperti Yahoo dan pemrograman berbuat apa-apa benar-benar bahawa anda mungkin sebaliknya mahu memaksa komputer untuk melakukan. Jadi PHP membolehkan kita mulakan dinamik keluaran kandungan. Jadi dengan logik ini, saya tidak mempunyai sebuah laman web yang dinamik pada tahun 1998. 

[00:12:16] Itu hanya sebuah laman web statik. Kandungan saya terpaksa ditukar oleh manual dengan gedit atau setara. Tapi PHP adalah apa yang kita digunakan atau boleh digunakan, bukan, untuk sesuatu seperti yang Laman web Frosh IM, yang sepatutnya mengambil pendaftaran dan menguruskan senarai perkara-perkara yang users-- sebenarnya berubah dari masa, walaupun kita berlaku menggunakan Perl, yang berbeza bahasa pada masa itu. 

[00:12:35] Kemudian akhir sekali, kami memperkenalkan SQL-- Structured Query Language. Jadi belum bahasa lain yang digunakan untuk apa? Digunakan untuk apa? Bolehkah kita usaha slight-- OK, kita tidak akan untuk mendapatkan lebih jauh daripada orkestra di sini. PENONTON: Ini protokol digunakan untuk bercakap dengan pangkalan data. DAVID J. MALAN: Protokol digunakan untuk bercakap dengan pangkalan data. Biar saya tweak. Ini adalah bahasa alam yang digunakan bercakap dengan databases-- memilih dan menyisipkan dan menghapus dan kemas kini dan benar-benar lebih ciri-ciri yang kita belum pun menyelam ke dalam tetapi anda mungkin mahu mempunyai explore-- untuk mengeksplorasi, berkata, projek akhir. Jadi ada berbagai keping. 

[00:13:09] Dan mudah-mudahan Pset7, walaupun spesifikasinya agak panjang, itu sengaja lama untuk berjalan anda melalui bagaimana perkara-perkara ini semua boleh ditaip bersama-sama. Sekarang, pada hari Isnin, kita memperkenalkan bahasa terakhir kami bahawa kita secara rasmi akan memperkenalkan di course-- iaitu, JavaScript. Ini, seperti PHP, adalah bahasa ditafsirkan. 

[00:13:25] Tetapi perbezaan utama Saya mencadangkan pada hari Isnin adalah bahawa manakala PHP adalah melaksanakan atau ditafsirkan pada pelayan, yang dalam hal ini adalah perkakas CS50 ini, atau mungkin ada beberapa web komersial pelayan di internet, JavaScript umumnya adalah bahasa yang berjalan sebelah pelanggan bukan server side-- sehingga dalam pelayar. Atau dengan kata lain, sama seperti ketika saya membuka sehingga Facebook kod sumber dan mendapati semua file-file Js, implikasinya adalah bahawa apabila anda melawat Facebook atau paling laman web hari ini, anda akan mendapat bukan sahaja HTML, bukan sahaja CSS, tetapi sejumlah besar JavaScript kod sering dalam bentuk fail .js. Dan kemudian itu adalah browser-- anda sendiri Mac atau PC-- yang melaksanakan kod itu. 

[00:14:03] Tetapi pelayar anda melaksanakannya. Anda boleh berfikir dalam semacam bak pasir. Sehingga kod JavaScript tidak boleh dapat memadam fail pada komputer anda. Ia tidak akan dapat menghantar e-mel bagi pihak anda. Jenis pelayar anda menyekat apa yang anda boleh lakukan dengan itu. 

[00:14:17] Jadi, dalam hal ini, ia sedikit kurang kuat, mungkin, dari C. Tetapi JavaScript boleh, sebagai samping, digunakan di server, walaupun kita akan cenderung untuk tidak bercakap tentang hal itu dalam konteks itu. Jadi sekarang mari kita mengikat ini bersama-sama. Seminggu ditambah yang lalu, kami menyampaikan beberapa HTML pada left-- laman web super membosankan. 

[00:14:34] Hanya menyapa dunia. Kemudian saya dicadangkan ke atas hak kita jenis boleh mencuri idea-idea dari perbincangan kita tentang struktur data dalam C dan berfikir tentang bagaimana hierarki ini bahasa penanda di sebelah kiri dapat dibuat atau dilaksanakan dalam ingatan sebagai struktur pokok yang sebenarnya dengan nod dan petunjuk dan orang-orang jenis butiran. Di sebelah kanan, kita panggil bahawa Dokumen DOM-- Objek Model-- yang hanya cara yang mewah untuk mengatakan pokok. 

[00:14:56] Sekarang, mengapa ini berguna untuk berfikir dengan cara ini? Kerana sekarang dengan JavaScript, kerana kita mempunyai kod yang mendapat untuk bermain dalam ini persekitaran, HTML sebenar itu telah dihantar kepada browser sudah dan sudah telah dimuatkan ke dalam ingatan ku pelayar menjadi pokok dalam komputer anda RAM seperti ini, kita boleh menggunakan JavaScript untuk benar-benar melintasi atau berjalan atau carian atau menukar bahawa pokok DOM namun kami mahu. Jadi sebenarnya, jika anda berfikir tentang facebook.com, jika anda menggunakan ciri perbualan, jika anda penggunaan Gmail dan ciri gchat itu, apa-apa jua di mana anda perlu pesan yang datang sekali lagi dan sekali lagi dan sekali lagi, mesej-mesej mungkin, seperti, LI tag, tag Senarai Item, mungkin. 

[00:15:35] Atau mungkin mereka hanya divs yang terus muncul setiap kali anda mendapat mesej segera. Dan sebagainya itu hanya berarti apa Facebook atau Google lakukan adalah bila-bila masa anda mendapat mesej dari server, mereka mungkin menggunakan JavaScript hanya menambah node lain ini tree-- lain nod ini pokok yang kemudiannya visual hanya kelihatan seperti baris baru teks pada skrin anda. Tetapi mereka memasukkan ke dalam struktur data ini. 

[00:15:57] Jadi dalam kelas seperti CS124 dan lain-lain, anda akan benar-benar menulis kod lebih terhadap struktur data seperti ini. Tetapi buat masa ini dalam JavaScript, kita hanya akan menganggap kita akan mendapat semua fungsi ini secara percuma dari bahasa itu sendiri. Jadi mari kita lihat satu contoh. 

[00:16:09] Biar saya membuka fail yang dipanggil form.html. Ia sangat mudah. Ia hanya kelihatan seperti ini. 

[00:16:15] Tiada CSS, tiada pemikiran untuk estetika. Ini semata-mata berfungsi dan nampaknya saya meminta e-mel, kata laluan, kata laluan sekali lagi, dan kemudian cek bersetuju dengan beberapa terma dan syarat. Apa kod sumber untuk ini kelihatan seperti mungkin sesuatu yang anda sangka dengan sedikit pemikiran sekarang. Aku punya tag form di sini. 

[00:16:32] Sesuatu tindakan tampaknya akan pergi ke fail yang dipanggil login.php. Kaedah saya akan gunakan adalah mendapatkan. Dan kemudian saya telah mendapat teks bidang yang namanya e-mel. 

[00:16:40] Saya telah mendapat satu medan kata laluan yang namanya kata laluan. Saya telah mendapat satu lagi medan kata laluan yang namanya adalah pengesahan agak sewenang-wenangnya. Ia hanya satu lagi parameter HTTP. 

[00:16:49] Dan kemudian kita kita sudah tidak digunakan ini kecuali sejak IM Frosh demo di class-- kotak cek yang Jenis hanya sama dengan cek. Dan aku akan memanggil perjanjian itu. Jadi aku jenis sewenang-wenangnya tetapi mudah bernama bidang ini. Sehingga sekarang apabila borang ini mendapat dikemukakan, mari kita lihat apa yang berlaku. Jika saya melakukan malan@harvard.edu, Saya akan melakukan kata laluan merah. Saya akan melakukan apa-apa kata laluan. Mari kita tidak bekerjasama. 

[00:17:10] Dan saya tidak akan memeriksa kotak. Biar saya klik Register. Dan ia berkata, hm, anda berdaftar. Tidak juga. 

[00:17:16] Tetapi URL berubah. Jadi borang ini jelas dibenarkan untuk mengemukakan kepada login.php. Tetapi mungkin, saya harus menangkap beberapa kesalahan tersebut. Sekarang, dalam Pset7 dan beberapa contoh kuliah kita, biasanya kita akan mencetak mesej ralat berwarna merah yang besar di sini berkata, nama yang hilang, atau hilang kata laluan. Kami telah melakukan itu sebelumnya dan kami telah dilakukan pihak pelayan pengesanan ralat. 

[00:17:37] Tetapi banyak laman web hari ini melakukan klien pengesanan ralat sisi mana URL tidak berubah. Seluruh halaman tidak refresh. Anda akan mendapat maklum balas segera dari browser. Mungkin sesuatu yang tidak merah. 

[00:17:48] Mungkin anda mendapatkan bentuk pop up. Tetapi anda jangan buang masa penghantaran untuk data pelayan yang tidak lengkap. Jadi mari kita lihat bagaimana kita mungkin mencapai ciri itu juga. 

[00:17:56] Biar saya pergi ke form1.html, yang kelihatan sama. Tetapi jika kali ini saya lakukan malan@harvard.edu dan saya menaip merah dan saya tidak bekerjasama lagi tetapi klik Register, perhatikan sekarang. Ini bukan penyelesaian yang paling seksi. Saya telah sekurang-kurangnya menangkap kesalahan ini. Dan saya telah menggunakan amaran yang fungsi dalam JavaScript-- yang kita hanya menggunakan di dalam kelas. Secara umum, anda tidak perlu menggunakan ini kerana ia sangat cepat boleh keluar kawalan. Tetapi kata laluan tidak sepadan merupakan kesalahan. 

[00:18:19] Biar saya pergi ke depan dan klik OK. Tetapi apa takeaway kunci di sini ialah URL tidak berubah. Buang jadi saya tidak peduli waktu server bertanya itu soalan yang saya boleh tahu jawapan kepada diri saya sendiri. 

[00:18:30] Dan pengguna, walaupun telah bercakap tentang perkara ini lebih lama daripada pengguna ini akan berfikir tentang perkara ini, akan mempunyai maklum balas segera. Tidak ada latency dengan penyambungan rangkaian. Jadi mari kita lihat pada kod sumber ini. 

[00:18:40] Kelihatan Form1.html strukturnya sama di sini. Bentuknya yang sebenarnya yang sama. Tetapi mari kita lihat apa yang saya lakukan di sini. Dan ada cara yang berbeza untuk melakukan hal ini. Dan saya telah melakukan perkara yang paling lurus pengikut, dan bukan cara yang paling elegan lagi. Saya mempunyai tag script. Saya kemudian memanggil document.getElementById ('pendaftaran'). Dan saya menyimpan nilai yang dalam bentuk, variabel. 

[00:19:04] Jadi apa yang saya lakukan? Anda boleh memikirkan document.getElementById sebagai fungsi khusus yang JavaScript memberikan anda yang benar-benar tangan Anda pointer ke salah satu daripada nod atau empat persegi panjang di pokok ini. Jadi sekarang apa bentuk variabel kita dalam JavaScript sebenarnya menunjuk. 

[00:19:21] Jadi sekarang sintaks yang berbeza daripada C. Tetapi kita sedang melakukan beberapa perkara di sini. Satu, yang satu ini adalah sedikit aneh melihat, pasti berbanding C. Tapi lihat pada baris 35. Maka pada form.onsubmit kiri. Ingat onsubmit yang seperti bidang dalam struct. Jika anda berfikir dalam bentuk pembolehubah hanya menjadi struct C, ia mungkin mempunyai beberapa bidang. 

[00:19:42] Kembali pada hari, kami mempunyai pelajar nama, ID, rumah, orang-orang semacam bidang. Cuba fikirkan onsubmit sebagai bidang yang lain. Tetapi ia adalah satu bidang khusus kerana pelayar diprogram untuk mengharapkan .onsubmit untuk tidak menjadi nilai seperti nombor atau tali, tetapi untuk benar-benar menjadi satu majlis atau alamat fungsi dalam ingatan komputer. 

[00:20:02] Dan sesungguhnya, itulah yang kata kunci ini di sini tidak. Ini mengatakan, berikan aku satu fungsi baru. Tetapi apa yang namanya akan menjadi, rupanya? 

[00:20:09] Memikirkan kembali Isnin. Apakah nama ini fungsi berdasarkan sintaks ini? Tidak, maksud saya, ada jelas tiada nama associated-- pasti tidak apa yang saya menekankan di sini. 

[00:20:21] Tetapi itu sebenarnya OK. Ini adalah fungsi tanpa nama, atau fungsi lambda seperti beberapa mungkin menyebutnya. Dan itu hanya berarti ia masih fungsi. Hanya saja, anda tidak dapat menyebutnya dengan nama. Tetapi tidak apa-apa. Kerana sekali lagi, pelayar telah diprogram oleh syarikat-syarikat seperti Google atau Microsoft atau Mozilla atau orang lain untuk hanya tahu bahawa jika medan .onsubmit dalam elemen bentuk mempunyai nilai, memperlakukannya sebagai function-- yang fungsi pointer, jika anda akan. Dan menyebutnya ketika bentuk itu dikemukakan. 

[00:20:46] Jadi apa kod ini hendaklah dilaksanakan apabila bentuk itu dikemukakan? Rupa-rupanya, segala-galanya dalam brace keriting. Dan ini hanyalah gaya. 

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

[00:21:03] Jika form.email.value sama sama dengan tali yang kosong atau tidak, inilah peringatan di mana saya akan berkata, Anda harus menyediakan alamat e-mel anda, dan kemudian kembali palsu. Dan itu bahawa pulangan palsu yang menghalang bentuk dari yang dikemukakan. Sementara itu, jika nilai kata laluan kosong, saya akan menjerit pada pengguna dan berkata, anda mesti memberikan kata laluan. 

[00:21:21] Perkara Sementara itu mendapat yang sedikit lebih menarik di sini. Jika form.password.value tidak form.confirmation.value sama, bidang yang lain, berteriak pada pengguna bahawa kata laluan tidak sesuai kerana mereka tidak beberapa saat yang lalu. Dan kemudian satu ini adalah satu sedikit seksi kerana saya tahu saya tahu bahawa dari segi konsep diperiksa adalah nama sebuah kotak semak ini. 

[00:21:40] Jadi saya hanya boleh menggunakan satu tanda seru titik untuk mengatakan jika cek tidak checked-- itu Boolean nilai, benar atau false-- Saya akan menjerit pada pengguna kerana sebab itu. Jika tidak, jika kita melewati semua syarat-syarat ini, mari kita kembali benar. Mari borang yang dikemukakan. Dan ini akan berlaku. 

[00:21:56] Mari menaip merah. Mari kita memeriksa kotak, klik Register. Dan sekarang aku pergi ke destinasi. Sekarang, tidak ada pangkalan data di sana. Tidak ada yang menarik di login.php. Aku hanya perlu sesuatu untuk benar-benar bercakap dengan. Jadi, saya berhenti seketika, di sini. Sebarang pertanyaan mengenai apa yang baru saja kita lakukan atau apa beberapa sintaks baru ini? OK, ya? 

[00:22:17] PENONTON: Jadi setiap kotak secara automatik Boolean a. Anda tidak perlu untuk menyatakan seperti itu. 

[00:22:21] DAVID J. MALAN: Betul. Mana-mana kotak yang dihantar kepada anda dari bentuk HTML kod JavaScript anda akan dianggap, ya, sebagai Boolean value-- benar atau salah. Ia satu soalan yang baik. Manakala nilai-nilai lain, dari Sudah tentu, telah teks, string AKA. 

[00:22:36] Baiklah, jadi biarlah saya mundur sedikit lebih jauh. Apakah seluruh titik ini? Hanya untuk menjadi jelas. Seperti, kita sudah tahu, bahkan dari Pset7 dan bahkan dari kuliah minggu lepas contoh, bahawa kita jelas boleh menyemak $ _GET $ _POST Melihat jika pengguna memberi kita nilai kosong. Ingat fungsi yang kosong dalam PHP. 

[00:22:54] Jadi, untuk menjadi jelas, apa yang salah satu sebab kami juga mungkin ingin melakukan pemeriksaan kesalahan ini dalam browser? Apa motivasi di sini? Yeah. 

[00:23:06] PENONTON: Lebih cepat, dan anda tidak menghantar data yang tidak berguna kepada pelayan. DAVID J. MALAN: Baik. Ini lebih cepat. Anda tidak menghantar tidak berguna data ke server. 

[00:23:12] Jadi anda kembali yang lebih tindak balas serta-merta. Dan secara keseluruhan, pengguna pengalaman adalah lebih baik. Fikirkan tentang alternatif. 

[00:23:17] Jika untuk Gmail-- dan mana-mana yang bertahun-tahun yang lalu. Katakan anda mendapat e-mel baru Gmail anda akaun, tetapi satu-satunya jalan melalui untuk melihat bahawa adalah untuk, seperti, menambah nilai keseluruhan halaman. Atau kira anda klik pada link untuk membaca e-mel. 

[00:23:29] Semuanya mempunyai untuk memuat semula jadi bahawa anda boleh melihat e-mel. Atau Facebook-- anda mendapat mesej chat. Anda tidak melihatnya sehingga anda tambah nilai halaman atau klik link tertentu. 

[00:23:36] Seperti, ini akan menjadi sangat pengalaman pengganggu itu. Dan ini adalah apa yang ia adalah seperti, jelas, kembali apabila saya berlari untuk UC dan web adalah lebih kurang dinamik dan JavaScript tidak seperti yang dipopulerkan seperti sekarang. Dan hal-hal semakin jauh lebih dinamik dan banyak lagi pihak pelanggan dalam erti kata itu. 

[00:23:49] Tetapi ada tangkapan di sini, dan ini adalah jenis gotcha menjengkelkan. Hanya kerana anda menambah sisi klien pengesanan seperti ini tidak bermakna anda boleh atau harus meninggalkan pelayan pengesanan sampingan. Anda pada dasarnya mahu meletakkan anda kesalahan memeriksa di kedua-dua tempat. Oleh kerana apa yang salah pelajaran yang dipelajari dari artikel saya membaca beberapa petikan dari dengan ini CMS system-- bodoh Pengurusan System-- kandungan yang melaksanakan sistem pengesahan yang, log masuk melalui apa mekanisme? JavaScript. 

[00:24:20] PENONTON: JavaScript. DAVID J. MALAN: JavaScript, betul-betul, bukan? Ia telah menggunakan JavaScript. Dan benar-benar, kalian punya memainkan sedikit mungkin dengan Inspektor Chrome. Dan jika saya boleh merasa, memeriksa elemen. 

[00:24:30] Izinkanlah aku menyeberang untuk melakukan semua pilihan Chrome. Dan ini adalah bagaimana mudahnya untuk melumpuhkan JavaScript dalam penyemak imbas. Semak, tidak lebih JavaScript. 

[00:24:38] Jadi dalam keadilan, banyak dari web ini hanya akan pecah kerana Gmail dan sites-- lain Facebook-- menganggap bahawa JavaScript yang aktif. Tetapi jika anda sedang melakukan sesuatu yang bodoh seperti hanya mengesahkan input pengguna dan memeriksa untuk kesalahan di pihak pelanggan, musuh dengan mudah boleh melakukan ini. Dan kemudian bahkan lebih bijak musuh seperti kalian kini boleh menggunakan Telnet atau Curl atau perintah baris arahan hanya dan benar-benar menghantar mesej ke pelayan yang sama tidak kesesatan diperiksa. 

[00:25:05] Jadi, ini adalah lebih dari antara muka pengguna keputusan daripada itu adalah teknikal yang sebenarnya improvement-- melaksanakan sisi sesuatu pelanggan seperti ini. Jadi sekarang sekilas, tetapi kemudian Saya akan tunduk kepada berjalan kaki dalam talian melalui untuk yang satu ini. Dalam bentuk kedua, kita sebenarnya telah melalui dan dibersihkan kod sedikit. Tetapi saya menangguhkan kepada satu dari video yang kami akan kemungkinan embed di Pset8 yang hanya menunjukkan anda sintaksis yang sama dengan menggunakan perpustakaan yang dikenali sebagai jQuery, yang merupakan super, super perpustakaan popular di JavaScript yang terus terang kebanyakan orang hanya menggunakan hari ini malah mengelirukan sebagai makhluk JavaScript sendiri. 

[00:25:37] Dan ia cenderung untuk melibatkan beberapa tanda-tanda dolar dan kata kunci seperti dokumen dalam kurungan di sini. Tetapi sekali lagi, biarlah saya tunduk kepada beberapa tutorial perlahan talian daripada mendapatkan diikat hanya dalam sintaks. Mari kita beralih kepada sesuatu yang sedikit lebih dingin dari segi aplikasi ini. 

[00:25:50] Jadi, dalam tertentu, biarkan aku pergi ke depan dan membuka ini di sini. Datang pada. Di sana kami pergi. 

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

[00:26:13] Tetapi di sini adalah bagaimana sesuatu seperti Peta Google atau Google Earth berfungsi. Mari kita cuba ini dengan cepat, sebenarnya. Biar saya pergi ke hadapan dan membuka Chrome pada pelayar saya. 

[00:26:21] Dan biarkan aku masuk ke dalam, berkata, maps.google.com. Dan sebenarnya, jika anda sudah tua cukup untuk ingat apa, seperti, MapQuest seperti kembali pada hari itu, dan mungkin mereka masih bekerja seperti ini. Apabila anda digunakan untuk mencari something-- 33 Oxford Street, Cambridge, Mass, mari kita lakukan this-- anda akan benar-benar, jika anda ingin menyorot ke atas dan bawah, kiri dan kanan, Anda akan kelihatan seperti panah besar di atas, dan ia akan menunjukkan satu lagi bingkai peta di sini. Atau anda akan klik kiri dan anda akan pergi ke sini, atau klik lain dan anda akan pergi ke sini. Tetapi sebaliknya hari, kami sudah tentu hanya mengambil untuk diberikan bahawa kita boleh pergi sekitar Cambridge cukup cepat hanya dengan mengklik dan menyeret. Tetapi perhatikan ada beberapa gangguan. 

[00:26:59] Jika saya melakukan ini cukup pantas, apa yang seolah-olah akan berlaku seperti yang saya tarik sedikit terlalu cepat untuk komputer untuk bersaing? Apa yang anda lihat? Yeah. 

[00:27:07] PENONTON: Pixel jangan me-refresh. DAVID J. MALAN: The piksel jangan me-refresh. Ada actually-- dan anda dapat melihat ini, sebenarnya, jika anda sedang menonton dalam talian dan jeda ini atau sebenarnya melambatkan perkara turun untuk once-- Anda akan melihat bahawa terdapat jubin, empat segi, atau empat persegi panjang yang hilang dari peta sampai sedetik kemudian, lebih banyak data, lebih banyak gambar sebenarnya muncul pada skrin. Dan sebenarnya, jika kita melakukan ini dengan melihat sehingga Chrome's-- katakanlah, Chrome-- mari kita lihat. Kita tidak boleh melakukan itu. 

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

[00:27:36] Kembali kepada 33 Oxford Street. Apakah laman web saya pada baru-baru ini? Saya mempunyai ini, seperti, kata-kata kasar swasta untuk diri saya sendiri bahawa saya akan mesej kemudian segera kawan yang online yang mahu mendengarnya. Ada beberapa laman web. Saya rasa ia Comcast-- jadi ISP Amerika yang sangat besar. Anda boleh, apabila mendaftar untuk kabel baru perkhidmatan modem atau perkhidmatan TV kabel, mereka mempunyai bentuk yang sangat cukup di mana mereka meminta anda untuk alamat anda. Dan mempunyai menakjubkan ini fitur yang disebut auto lengkap, seperti Google, yang bermula untuk mengisi dalam jawapan kepada soalan anda. 

[00:28:04] Masalahnya ialah, mereka melakukan auto lengkap pada hal-hal pertama yang anda taip. Jadi, jika anda mula menaip dalam 33, ia akan menunjukkan kepada anda benar-benar setiap rumah di Amerika yang bermula dengan bilangan 33 sebelum anda mengharapkan anda untuk menaip lagi. Jadi jika anda menaip 33 Oxford, maka hal itu menunjukkan anda setiap jalan di Amerika yang mempunyai 33 Oxford pada namanya, tanpa mengira bandar bahawa anda berada dalam. 

[00:28:25] Dan kemudian anda terus menaip. Dan akhirnya, ia menyadari bahwa mereka tidak tawaran perkhidmatan ke rumah anda di Cambridge atau sesuatu seperti itu. Tapi yang penting, ini adalah yang paling pelaksanaan bodoh auto menyelesaikan lamanya. 

[00:28:34] Dan saya hanya pergi pada tangen ini lagi. Tapi ada cara yang baik untuk menggunakan JavaScript dan cara-cara yang tidak baik. Dan itu bukan semestinya yang terbaik. 

[00:28:40] Tapi yang penting di sini, sebelum ini omelan, adalah untuk membuka alat turun di sini dan membuka alat pemaju, seperti yang kita telah digalakkan sebelumnya, dan untuk menonton Rangkaian tab kerana saya benar-benar klik dengan cepat. Dan perhatikan sejumlah dari mendapatkan permintaan berlaku. Semua ini berlaku kerana saya diseret. 

[00:28:57] Dan kemungkinan besar, memang banyak baris ini sekarang adalah imej slash JPEG Jenis MIME atau jenis kandungan. Ini kerana apa yang krom adalah melakukan setiap kali saya klik dan seret, klik dan tarik, adalah itu menyedari, oh, saya perlu pergi meminta Google untuk jubin di peta itu di sini, cepat turun melalui HTTP, dan kemudian menambah kepada apa yang dipanggil DOM untuk pelayar web yang di pohon memori perwakilan supaya pengguna, saya, melihat bahawa jubin dikemaskini. Dan ini adalah kerana teknik yang disebut AJAX. Kembali pada hari itu, ia benar-benar adalah kes bahawa jika anda ingin mengubah apa yang pada skrin, Anda akan perlu klik ke atas, bawah, kiri, betul. Dan kemudian muka surat yang baru akan dibuka. Tetapi hari ini, segala-galanya lebih dinamik. Ia berlaku dalam cara kita manusia akan berharap ia akan benar-benar interaktif. Dan ia mencapai ini dengan cara teknik yang dipanggil AJAX, yang mungkin paling dijelaskan oleh satu contoh. Pertama, saya pergi ke depan dan membuka fail disebut quote.php di kod pengedaran hari ini. 

[00:29:53] Dan kemudian membiarkan saya melakukan ups symbol--. Biarkan aku melakukan simbol = GOOG hanya beberapa saham. Atau sebenarnya, mari kita lakukan satu dari Serangga PERCUMA. Enter. 

[00:30:05] Dan kini melihat apa yang saya peroleh kembali. Jadi, ini adalah benar-benar file PHP pendek yang saya menulis bahawa hanya meminjam kod daripada fungsi lookup Pset7 ini dan meludah keluar menggunakan pendakap kerinting ini dan sebut harga dan notasi usus besar, nampaknya, harga saham semasa untuk syarikat yang anda berikan melalui dapatkan. Jadi, ini adalah berbeza dari sebagian apa yang kita sudah dilakukan di dalam pemberitahuan saya harfiah menyemburkan apa yang kelihatan seperti kod JavaScript. 

[00:30:27] Malah, ini adalah objek JavaScript. Malah, hanya untuk lebih jelas, JavaScript Objek Notation-- JSON-- adalah cara mewah untuk mengatakan bahawa anda boleh mewakili data dalam JavaScript banyak seperti yang anda boleh dalam PHP menggunakan pasangan nilai utama. Jadi jika saya ingin menyatakan pembolehubah dalam JavaScript untuk mewakili Zamyla, untuk instance-- struct untuk Zamyla-- dan kami akan menyebutnya pelajar, variabel ini. ID nya adalah satu, rumah adalah Winthrop, dan nama adalah Zamyla. 

[00:30:53] Tetapi saya juga boleh mempunyai pelbagai objek. Jadi jika saya benar-benar ingin mempunyai array dalam JavaScript mengandungi beberapa objek seperti itu, ini masa yang mewakili kakitangan, Saya mungkin mempunyai ketiga-tiga potongan kod kembali untuk kembali ke belakang untuk ini tiga bekas kakitangan. Jadi sintaks, cukup sama dengan both-- untuk PHP. Tetapi ini adalah terutamanya JavaScript. Ini notasi objek. Jadi apa ini berguna untuk? 

[00:31:17] Jika saya menulis kod yang meludah JSON-- JavaScript Objek Notation-- hal-hal yang kelihatan seperti ini atau hal-hal yang kelihatan seperti struktur Zamyla ini, Saya benar-benar boleh menggunakan ini dalam program-program yang saya tulis. Biar saya pergi ke ajax0.html. Dan ini too-- tidak banyak pikir diberikan kepada estetika. Tetapi berhati-apa yang berlaku. 

[00:31:34] Biar saya pergi ke hadapan dan ketik percuma di sini. Klik mendapatkan penawaran. Dan perhatikan URL tidak berubah. Tapi aku mendapatkan pop up dengan rupanya harga saham sen hari ini sebanyak $ 0,15. Jadi tidak semua yang buruk. Tetapi perbezaannya adalah bahawa entah bagaimana, data ini kembali kepada saya secara langsung. Tapi mari kita mengambil satu langkah ke arah sesuatu yang lebih akrab. Dalam versi salah satu daripada ini, izinkan saya menaip bebas lagi, klik Dapatkan sebut harga, dan sekarang-- oh, ini adalah sebenarnya versi jQuery ini. Jadi mari me-- saya tidak maju cepat-agak cukup jauh. Biar saya pergi ke versi dua, yang mana saya mahu. Perhatikan apa yang saya lakukan di sini. Saya mempunyai web yang page-- super versi sederhana dari mana-mana halaman web Anda mungkin menggunakan hari ini dengan medan teks di sini secara percuma dan kemudian ternyata hanya teks. 

[00:32:14] Ini bukan bentuk yang di sini, rupanya. Tetapi jika saya klik mendapatkan kutipan, melihat laman web saya akan berubah seolah-olah saya hanya mendapat mesej segera baru atau seolah-olah saya baru pindah itu peta dan diperlukan untuk mendapatkan lebih banyak data ditambah secara dinamik ke laman web tanpa perubahan URL dan pengguna pengalaman mendapatkan terganggu. Malah, saya masih di tepat ajax2.html place-- sama. 

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

[00:32:44] Di sini, aku akan off auto lengkap. Kadang-kadang ia menjadi mengganggu jika browser sedang cuba untuk menunjukkan seluruh sejarah anda. Jadi, anda boleh melakukannya dalam HTML oleh hanya mengatakan auto menyelesaikan off. 

[00:32:53] Saya telah diberikan ini teks bidang yang symbol-- sebaliknya, ID simbol. Dan sekarang, ini adalah satu ciri yang menarik. Kami tidak bercakap tentang span, tetapi anda boleh berfikir tentang hal itu seperti tag perenggan atau tag div. Ia adalah apa yang disebut dalam talian unsur, yang ertinya anda tidak akan mendapatkan ayat yang break di atas dan di bawahnya. Ia hanya akan tinggal dalam talian tanpa memukul setara masuk. Jadi saya telah diberi potongan HTML ini yang akan ditentukan pengecam unik yang saya sewenang-wenangnya disebut harga. Dan saya mempunyai butang Submit. 

[00:33:21] Kerana kini sehingga sini-dan ini adalah sebenarnya super menakjubkan kod betapa sedikit anda boleh menulis untuk melakukan agak kemas things-- melihat apa yang saya lakukan di sini jika saya tatal ke atas kepada ketua halaman ini. Saya telah menyertakan pertama di kepala saya tag script yang benar-benar referensi JavaScript memfailkan di tempat lain. Ini dari organisasi yang menulis jQuery, dan ini hanya memberi anda terkini versi perpustakaan jQuery mereka. 

[00:33:42] Jadi ini adalah jenis seperti tajam termasuk dalam C atau memerlukan dalam PHP. Anda menggunakan tag skrip dengan atribut sumber. Tetapi sekarang kode sendiri adalah akan menjadi betul-betul di sini. 

[00:33:52] Perhatikan Aku mempunyai fungsi yang disebut Quotes. Dan ia kelihatan sedikit samar pada pandangan pertama. Tetapi mari kita menggoda ini terpisah. Beri aku URL variabel yang disebut. Menetapkan secara harfiah string ini. Jadi, tanda petikan tunggal, tanda kutip ganda dalam JavaScript hanya memberi saya string. Apa yang ditambah itu? Rangkaian. 

[00:34:08] Jadi ini sekarang adalah sintaks yang jQuery yang mengambil sedikit untuk membiasakan diri. Tetapi ini hanya berarti pergi mendapatkan saya DOM nod yang unik pengecam adalah simbol. Hashtag ada ertinya simbol pengenalan unik. 

[00:34:21] Tanda dolar dalam kurungan hanya berarti, bungkus ini di jQuery semacam sos rahsia jadi Anda mendapatkan fungsi tambahan. Dan kemudian .val nampaknya fungsi, atau seperti yang kita katakan sekarang, kaedah dalam buku ini yang hanya memberikan anda nilai. Jadi singkatnya, jelek dan mengelirukan kerana ini kelihatan pada pandangan pertama, ini hanya berarti mendapatkan dengan pengguna ditaip dalam, meletakkan ia pada akhir tali dengan menggabungkan ia. Itu sahaja. 

[00:34:43] Jadi sekarang, tiga baris terakhir. Anda boleh memerah banyak fungsi daripada tiga baris. Ini tanda dolar, sebagai samping, hanya nama panggilan untuk satu pemboleh ubah global khas disebut secara literal jQuery. 

[00:34:55] Tanda dolar hanya kelihatan sejuk. Jadi masyarakat jQuery hanya jenis dari menggunakannya sebagai simbol khusus mereka. Ia tidak bermakna apa artinya dalam PHP. Dalam JavaScript, tanda dolar adalah sama seperti huruf abjad atau nombor bagi variabel. 

[00:35:07] Anda hanya boleh memiliki sebagai nama. Hanya kelihatan sejuk. Jadi masyarakat diterima pakai sebagai nama panggilan untuk perpustakaan mereka sendiri dipanggil jQuery. 

[00:35:13] Dan ini sangat popular. Oleh itu JSON adalah yang tepat. Ini fungsi bahawa Orang-orang di jQuery menulis yang mendapat JSON dari server-- yang JavaScript Object Notation. Dari apa URL ia akan untuk mendapatkan maklumat itu? Rupa-rupanya dari URL ini di sini. 

[00:35:27] Dan apa yang harus browser lakukan sebagai tidak lama lagi kerana mendapat kembali tanggapan ini? Dan ini adalah keajaiban AJAX, sehingga untuk speak-- Asynchronous JavaScript dalam XML. Adalah sukar untuk melihat dengan apa-apa contoh mudah seperti yang kita telah di sini. 

[00:35:41] Tapi ini tak segerak dalam erti kata bahawa kod saya ketika dilaksanakan menghantar mesej kepada pelayan pergi mendapatkan saya beberapa JSON. Dan ia berlaku super cepat yang saya dapatkan jawapan. Tetapi apa yang menarik ialah ini garis kod tidak menggantung di komputer saya. 

[00:35:55] Saya tidak melihat ikon berputar. Saya tidak kehilangan kemampuan untuk memindahkan mouse saya. Browser saya sebenarnya baik-baik saja. 

[00:36:01] Oleh kerana cara JavaScript menangani respon dari server adalah seperti berikut. Anda mendaftarkan apa yang anda akan memanggil fungsi panggilan balik, yang hanya bermaksud, hey, JavaScript. Sebaik sahaja pelayan bertindak balas dengan JSON, hubungi fungsi tanpa nama ini. 

[00:36:18] Dan tolong berlalu ke dalam fungsi ini apa sahaja rentetan pelayan meludahkan sebagai hujah yang disebut data. Jadi, dalam yang lain, kata-kata, jika Saya memasang dinamik yang quote.php URL lulus dalam ini simbol seperti PERCUMA atau GOOG atau entah apa lagi, Saya kemudian memberitahu JavaScript pergi mendapatkan URL tersebut. Ingatlah bahawa pelayar akan kembali sesuatu yang kelihatan seperti yang kita lihat earlier-- ini. 

[00:36:42] Dan apa argumen kedua di sini untuk mendapatkan JSON mengatakan yang memanggil fungsi ini apabila server mendapat kembali apakah itu 10 milisaat dari sekarang atau 10 saat dari sekarang. Dan sebaik sahaja anda lakukan, menambahkan harga ke halaman. Sintaks ini di sini hanya ertinya pergi mendapatkan nod dari pohon yang pengecam unik adalah price-- bahawa jangka kita lihat sebelum ini. 

[00:37:01] Kaedah ini dikenali sebagai HTML hanya berkata, pergi menggantikan HTML yang ada di sana dengan data.price. Apa yang data.price? Nah, browser, ingat, menunjukkan kepada saya ini datang kembali. Jadi, ini adalah data. 

[00:37:14] Dan sebagainya ia sedikit samar untuk melihat koma di sini. Tetapi yang sebenarnya, biarlah saya melakukan ini. Biar saya paste ini sangat cepat ke dalam gedit dan menunjukkan ini seperti kita menunjukkan Struktur Zamyla sebelumnya. 

[00:37:27] Apa pelayan menghantar kembali adalah objek kecil yang kelihatan seperti ini. Dan sebagainya adalah data.price hanya memberi saya sebesar 0,1515. Jadi banyak bergerak bahagian-bahagian di sini sekaligus. 

[00:37:39] Tetapi takeaways utama adalah bahawa kita mempunyai kemampuan ini untuk membuat HTTP tambahan permintaan menggunakan JavaScript tanpa perlu memuat semula halaman. Dan kemudian kita boleh sebenarnya mengubah halaman web dengan cepat. Dan ternyata bahawa JavaScript dan bahasa-bahasa lain boleh digunakan sekarang tidak hanya bermutasi halaman web, tetapi untuk benar-benar menulis perisian dalam komputer yang sebenarnya, tidak hanya terbatas pada Chrome atau sejenisnya. 

[00:38:00] Malah, jika- Colton, yang anda ingin bergabung dengan kami kembali ke sini dengan kod makmal anda, dan Chang juga? Mari kita pergi ke depan, setelah berbicara tentang fungsi tanpa nama dan callback dan benar-benar menggoda nasib di sini dengan demo hidup dengan pendarahan teknologi terkini, salah satu alat-alat Elite Motion. Kini, peranti ini, ingat, adalah peranti USB kecil juga bahawa- itu beautiful-- yang dihubungkan ke port USB anda. 

[00:38:25] Dan kemudian ia akan memberi pendapat dalam bentuk gerak tubuh manusia dengan mengesan menggunakan sinar inframerah, pada dasarnya, gerakan dari lengan anda. Jadi sedangkan apa yang cuba Maria sebelum berotot, benar-benar merasakan apa yang berubah-ubah lengan anda, ini adalah berdasarkan inframerah. Jadi ia mencari gerakan dalam jenis lapisan satu kaki atau lebih peranti itu sendiri. 

[00:38:46] Jadi kenapa tidak saya mengambil menusuk ini dulu? Dan mari kita pergi ke depan dan melemparkan Anda di atas di atas kepala di sini. Jadi mari kita meletakkan laptop Colton ini di sini. Kami telah mendapat Andrew pada TV. Dan apa yang anda ingin saya lakukan dahulu? 

[00:39:00] COLTON: Pergi ke depan dan hanya meletakkan tangan anda ke atas lelaki ini dan anda akan melihat beberapa perhiasannya yang hebat. 

[00:39:04] DAVID J. MALAN: Very nice. Ini semua berlaku dalam masa nyata. OK. Baiklah, dan Yap. Begitu baik. Baiklah, apa lagi yang boleh kita lakukan? 

[00:39:15] COLTON: Pergi ke skrin seterusnya dan melihat. 

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

[00:39:19] COLTON: permainan menyeronokkan sedikit di mana anda boleh membuat robot. 

[00:39:21] DAVID J. MALAN: Baiklah, jadi ini adalah tangan palsu menunjukkan kepada saya apa yang perlu dilakukan. COLTON: Ya, jadi pergi ke depan dan ambil salah satu blok dan meletakkannya di atas tubuh yang robot. DAVID J. MALAN: Oh, ada tangan saya. Oh. OK, menggemaskan. Tunggu dulu, 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. Sial! Apabila kita mengamalkan ini terakhir malam, anda tahu apa ini diserahkan ke? 

[00:39:51] Seperti ini. OK. Yang berikutnya? 

[00:39:55] COLTON: Tentu. 

[00:39:56] DAVID J. MALAN: Baiklah, dan ada yang ketiga. Baik. COLTON: Dan dalam satu ini, anda akan mendapat supaya- DAVID J. MALAN: Oh, yang satu ini indah. COLTON: --yeah, memilih selain bunga ini. DAVID J. MALAN: OK. Tidak? Tak 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 sukarelawan di sini yang ingin datang ke atas. Bagaimana pula di sana di hijau, bukan? 

[00:40:27] Baiklah, dan mari kita have-- bukan melakukan hal itu, ada di antara kamu dapat mengetahui permainan ini di sini- memotong tali, mungkin? Mari kita lihat. Kami mempunyai gelas kami di lebih dari di sini? 

[00:40:37] OK. Matur nuwun. Siapa nama anda? 

[00:40:39] PENONTON: Laura. 

[00:40:40] DAVID J. MALAN: Laura? Nice untuk melihat. Jika anda tidak keberatan meletakkan Google Glass lebih cermin mata anda. Ini adalah Colton. 

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

[00:40:48] DAVID J. MALAN: OK, datang sekitar. Baiklah, jadi apa yang anda akan lakukan di sini, setelah bermain sebelum ini, diletakkan tanganmu ke atas Motion Leap sini. Dan sekarang anak panah anda harus bergerak. Oh, tidak. 

[00:40:57] PENONTON: No. 

[00:40:58] DAVID J. MALAN: Kami tidak mahu berhenti lagi. OK, tunggu. Di sini. Jadi melihat seperti anda memegang anda jari atas sesuatu, tetikus mula turun ke hijau, yang adalah bagaimana anda klik. 

[00:41:06] Jadi membawa lebih Main. Dan hanya satu jari baik-baik saja. Dan sekarang klik pada sedikit lelaki hijau di sebelah kiri. Dan kini memegang sehingga ia mengisi hijau. Baik. Sekarang, seperti, tingkat satu di bagian atas. 

[00:41:16] PENONTON: Ya, kami mahu tingkat satu, di sini. 

[00:41:20] DAVID J. MALAN: Baik. OK, jadi apa yang anda perlu lakukan adalah memotong tali. Kursor anda orangnya putih di bawah sana. 

[00:41:28] Sangat bagus. Baiklah, itu kira-kira untuk mendapatkan lebih keras. Yang demikian, berpegang jari ke depan sekarang. Baik. Yang ini keras. 

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

[00:41:44] DAVID J. MALAN: Ya. Tujuan kedua adalah untuk mendapatkan semua bintang. Baiklah, akan datang. 

[00:41:53] Mari kita lihat apakah anda boleh mendapatkan satu pertiga ini. Baik. OK, pergi ke sana. 

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

[00:42:11] Jadi kenapa pula kita tidak menangguhkan sini hari ini? Biar ada yang datang ke atas yang ingin bermain. Terima kasih banyak untuk Laura sukarela kami. Dan kita akan melihat anda pada hari Isnin. 

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

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