1 00:00:00,000 --> 00:00:39,630 2 00:00:39,630 --> 00:00:41,880 DAVID J. Malan: Baiklah, jadi ini di sini adalah lengan Myo 3 00:00:41,880 --> 00:00:44,450 Band, pasangan yang kita memiliki untuk proyek-proyek akhir CS50. 4 00:00:44,450 --> 00:00:47,533 Dan itu adalah demonstrasi kita antri Anda di muka mana dasarnya 5 00:00:47,533 --> 00:00:51,120 lengan cukup ketat band ini di sini mendengarkan gerakan otot Anda 6 00:00:51,120 --> 00:00:54,280 yang kemudian dipetakan dalam perangkat lunak untuk laptop Colton atas sini yang 7 00:00:54,280 --> 00:00:57,230 memiliki iTunes dan lagu sudah antri. 8 00:00:57,230 --> 00:01:00,270 Daripada saya demoing ini, Colton sudah di laboratorium 9 00:01:00,270 --> 00:01:04,129 jelas sepanjang minggu mendapatkan demonstrasi siap untuk satu relawan berani. 10 00:01:04,129 --> 00:01:07,430 Jika seseorang ingin datang di up-- melihat tangan Anda terlebih dahulu. 11 00:01:07,430 --> 00:01:09,540 Ayo up. 12 00:01:09,540 --> 00:01:12,530 >> Baik. 13 00:01:12,530 --> 00:01:13,886 Dan siapa nama Anda? 14 00:01:13,886 --> 00:01:14,800 >> AUDIENCE: Uh, Maria. 15 00:01:14,800 --> 00:01:16,550 >> DAVID J. Malan: Maria, bagus untuk melihat Anda. 16 00:01:16,550 --> 00:01:17,310 Ayo ke sini. 17 00:01:17,310 --> 00:01:19,550 Mari saya perkenalkan Anda untuk Colton. 18 00:01:19,550 --> 00:01:21,290 Colton, ini adalah Maria. 19 00:01:21,290 --> 00:01:23,050 >> COLTON: Hi, nice to meet you. 20 00:01:23,050 --> 00:01:24,330 >> DAVID J. Malan: Semua benar, jadi langkah pertama, kami 21 00:01:24,330 --> 00:01:26,204 akan memiliki Anda meletakkan ini pada lengan bawah Anda 22 00:01:26,204 --> 00:01:29,280 sehingga cukup ketat di dekat siku Anda. 23 00:01:29,280 --> 00:01:31,940 Dan sementara itu, mari kita memakai Kaca Google kami 24 00:01:31,940 --> 00:01:33,720 dan kami akan mencampur teknologi saat ini. 25 00:01:33,720 --> 00:01:36,340 >> COLTON: Pertama kita harus menghubungkan ini ke hal-hal. 26 00:01:36,340 --> 00:01:37,170 >> DAVID J. Malan: OK. 27 00:01:37,170 --> 00:01:39,795 Sebenarnya, mari kita menempatkan lengan Anda sebagai dekat dengan kabel ini mungkin 28 00:01:39,795 --> 00:01:41,160 sehingga kita pertama sinkron itu. 29 00:01:41,160 --> 00:01:42,740 >> COLTON: Mari kita lakukan ini. 30 00:01:42,740 --> 00:01:46,500 >> DAVID J. Malan: Dan sementara itu, sehingga bahwa setiap orang bisa mendapatkan sekilas lebih dekat, 31 00:01:46,500 --> 00:01:50,290 kita akan melemparkan kamera Andrew di layar ada. 32 00:01:50,290 --> 00:01:54,460 Jadi kita memiliki kabel USB yang yang terpasang ke ban Maria. 33 00:01:54,460 --> 00:02:00,230 Dan biarkan aku melemparkan layar Colton pada proyektor berikutnya. 34 00:02:00,230 --> 00:02:06,000 >> Jadi Colton mendaftarkan perangkat sekarang sebagai Myo terhubung ke kabel ini. 35 00:02:06,000 --> 00:02:08,060 Dan sekarang apa yang Maria akan melakukan sejenak 36 00:02:08,060 --> 00:02:10,120 sebenarnya berjalan melalui langkah-langkah kalibrasi 37 00:02:10,120 --> 00:02:12,830 dan mengajar perangkat lunak bagaimana otot-ototnya menanggapi 38 00:02:12,830 --> 00:02:16,070 ketika dia memastikan telah ditetapkan menunjuk bahwa perangkat lunak mengerti. 39 00:02:16,070 --> 00:02:17,910 Jika Anda ingin pergi di depan layar. 40 00:02:17,910 --> 00:02:26,840 41 00:02:26,840 --> 00:02:30,090 OK, terus mencoba. 42 00:02:30,090 --> 00:02:31,860 >> COLTON: Pergi seperti ini. 43 00:02:31,860 --> 00:02:32,970 Dan seperti itu. 44 00:02:32,970 --> 00:02:34,563 Dan semua jalan ke kanan. 45 00:02:34,563 --> 00:02:35,922 Kembali. 46 00:02:35,922 --> 00:02:37,740 >> DAVID J. Malan: OK. 47 00:02:37,740 --> 00:02:38,960 Perspektif yang berbeda. 48 00:02:38,960 --> 00:02:39,620 Ini bukan Anda. 49 00:02:39,620 --> 00:02:40,350 Ini kita. 50 00:02:40,350 --> 00:02:41,749 >> MARIA: OK. 51 00:02:41,749 --> 00:02:42,540 DAVID J. Malan: No. 52 00:02:42,540 --> 00:02:46,720 53 00:02:46,720 --> 00:02:51,540 Mari kita bergerak lebih tinggi sehingga lebih dekat dengan siku Anda, atau bahkan lebih ketat. 54 00:02:51,540 --> 00:02:52,680 Baik. 55 00:02:52,680 --> 00:02:53,270 >> Di sini kita pergi. 56 00:02:53,270 --> 00:02:56,780 Ini akan menjadi waktu yang baik untuk CS52X. 57 00:02:56,780 --> 00:02:57,670 Di sana kami pergi. 58 00:02:57,670 --> 00:02:58,760 >> Sangat bagus. 59 00:02:58,760 --> 00:03:01,170 OK. 60 00:03:01,170 --> 00:03:02,790 Thumb untuk pinky. 61 00:03:02,790 --> 00:03:03,380 >> Sangat bagus. 62 00:03:03,380 --> 00:03:05,140 Sebarkan jari Anda. 63 00:03:05,140 --> 00:03:06,240 Baik. 64 00:03:06,240 --> 00:03:06,910 Gelombang tepat. 65 00:03:06,910 --> 00:03:15,052 66 00:03:15,052 --> 00:03:17,010 Ini anehnya menunjukkan Anda dengan hand-- kiri 67 00:03:17,010 --> 00:03:19,665 >> COLTON: Ya, itu aneh. 68 00:03:19,665 --> 00:03:21,790 DAVID J. Malan: Wave untuk hak dan bergerak maju. 69 00:03:21,790 --> 00:03:22,998 Fast forward ke melewati atau berikutnya. 70 00:03:22,998 --> 00:03:25,020 Itu OK Gelombang benar. 71 00:03:25,020 --> 00:03:26,650 >> MARIA: Saya don't-- menunggu. 72 00:03:26,650 --> 00:03:28,430 >> DAVID J. Malan: Butuh bantuan? 73 00:03:28,430 --> 00:03:30,027 >> COLTON: Jadi Anda akan seperti ini. 74 00:03:30,027 --> 00:03:31,860 MARIA: Ini membalikkan Hal lain, meskipun. 75 00:03:31,860 --> 00:03:32,390 COLTON: Ini adalah. 76 00:03:32,390 --> 00:03:34,250 DAVID J. Malan: Ya saya tidak tahu mengapa hal itu menunjukkan Anda leftie a. 77 00:03:34,250 --> 00:03:36,458 COLTON: Mengapa kau tidak try-- hanya mencoba akan seperti ini. 78 00:03:36,458 --> 00:03:38,910 79 00:03:38,910 --> 00:03:40,090 >> DAVID J. Malan: No? 80 00:03:40,090 --> 00:03:42,580 Mungkin mencapai lengan Anda keluar sedikit lebih tegak 81 00:03:42,580 --> 00:03:46,070 dan membuatnya lebih tiba-tiba seperti ini. 82 00:03:46,070 --> 00:03:48,176 Yeah, OK, ayolah. 83 00:03:48,176 --> 00:03:49,670 >> MARIA: Maafkan aku. 84 00:03:49,670 --> 00:03:51,170 DAVID J. Malan: Ini bukan salahmu. 85 00:03:51,170 --> 00:03:53,018 COLTON: Tidak apa-apa. 86 00:03:53,018 --> 00:03:55,430 DAVID J. Malan: All Right. 87 00:03:55,430 --> 00:03:56,220 Well-- 88 00:03:56,220 --> 00:03:57,620 >> MARIA: Haruskah kita lewati ini, maka? 89 00:03:57,620 --> 00:03:59,620 DAVID J. Malan: Ya, mari kita membiarkan Anda lolos. 90 00:03:59,620 --> 00:04:03,130 Jadi jika ada yang ingin melakukan tugas akhir menggunakan canggih ini 91 00:04:03,130 --> 00:04:07,707 hardware, menyadari hal itu mungkin hanya mengambil sedikit membiasakan diri. 92 00:04:07,707 --> 00:04:10,290 Dan this-- kenyataannya adalah ini sebenarnya sangat pendarahan tepi. 93 00:04:10,290 --> 00:04:12,040 >> Ini adalah apa yang disebut kit pengembang, yang 94 00:04:12,040 --> 00:04:14,956 dimaksudkan untuk menjadi dasarnya pre-release sehingga masyarakat dapat melakukan apa 95 00:04:14,956 --> 00:04:18,690 this-- berjuang dengan itu, angka bagaimana tubuh manusia bekerja 96 00:04:18,690 --> 00:04:19,980 dengan teknologi. 97 00:04:19,980 --> 00:04:21,750 Jadi jika Anda ingin setelah itu, setelah kuliah, 98 00:04:21,750 --> 00:04:23,750 kita dapat membiarkan Anda datang dan mengambil menusuk lain di dalamnya. 99 00:04:23,750 --> 00:04:26,970 Tapi sebaliknya, tepuk tangan, jika kita bisa, untuk Maria untuk datang ke atas. 100 00:04:26,970 --> 00:04:28,770 >> MARIA: Terima kasih. 101 00:04:28,770 --> 00:04:30,390 >> DAVID J. Malan: Terima kasih. 102 00:04:30,390 --> 00:04:34,945 Kami akan bertahan pada ini, tapi kami akan memberikan you-- bagaimana bola stres di sini? 103 00:04:34,945 --> 00:04:38,620 Oh, dan-- if-- ya, terima kasih. 104 00:04:38,620 --> 00:04:39,715 Baik. 105 00:04:39,715 --> 00:04:45,750 Jadi bagi yang penasaran, jika Anda terbiasa dengan pilihan suara 106 00:04:45,750 --> 00:04:47,670 bahwa kita dibuat di sana sebelumnya, sebuah TV menakjubkan 107 00:04:47,670 --> 00:04:50,210 menunjukkan bahwa Anda harus benar-benar menjadi pesta-menonton di Netflix 108 00:04:50,210 --> 00:04:51,110 adalah salah satu ini di sini. 109 00:04:51,110 --> 00:04:54,472 >> SPEAKER 1: Ladies and gentlemen, pesulap bernama Josh. 110 00:04:54,472 --> 00:05:04,710 111 00:05:04,710 --> 00:05:08,050 >> DAVID J. Malan: Dan ternyata, itu hal untuk teks saya selama kuliah sekarang. 112 00:05:08,050 --> 00:05:11,190 Saya diberitahu bahwa Maria memiliki ulang tahun kemarin. 113 00:05:11,190 --> 00:05:14,095 Jadi selamat ulang tahun dari CS50 ke Maria juga. 114 00:05:14,095 --> 00:05:18,720 115 00:05:18,720 --> 00:05:22,090 >> Jadi Anda mungkin telah membaca di bulan terakhir bahwa tuan-tuan ini di sini, Steve 116 00:05:22,090 --> 00:05:25,260 Ballmer, yang sebenarnya kelas 1977 di kampus, 117 00:05:25,260 --> 00:05:27,170 baru saja pensiun untuk Microsoft. 118 00:05:27,170 --> 00:05:29,620 Dia adalah seorang sarjana sini, kemudian beberapa tahun kemudian 119 00:05:29,620 --> 00:05:31,910 menemukan dirinya di Stanford Business School 120 00:05:31,910 --> 00:05:34,160 ketika ia menerima telepon panggilan dari seorang teman yang nya 121 00:05:34,160 --> 00:05:36,516 telah hidup menyusuri lorong dari dia di sini di Harvard. 122 00:05:36,516 --> 00:05:38,640 Nama teman adalah Bill Gates, dan pada saat itu, 123 00:05:38,640 --> 00:05:42,700 ia berusaha untuk merekrut Steve menjadi orang bisnis yang pertama, benar-benar, 124 00:05:42,700 --> 00:05:45,720 di sebuah perusahaan kecil nama Microsoft. 125 00:05:45,720 --> 00:05:48,960 >> Sebuah cerita panjang pendek, Steve akhirnya menang atas, 126 00:05:48,960 --> 00:05:52,130 bergabung dengan Microsoft ketika mereka memiliki hanya 30 karyawan. 127 00:05:52,130 --> 00:05:54,300 Dan pada saat dia pensiun baru-baru ini, 128 00:05:54,300 --> 00:05:58,100 perusahaan memiliki 100.000 karyawan selama beberapa tahun terakhir. 129 00:05:58,100 --> 00:06:01,171 Dan situs web yang dikenal sebagai The Verge disiapkan penghargaan ini pada video 130 00:06:01,171 --> 00:06:02,920 bahwa kami pikir kami akan bersama yang memberi Anda 131 00:06:02,920 --> 00:06:08,380 rasa berapa banyak energi Steve membawa ke presentasi ia memberikan. 132 00:06:08,380 --> 00:06:11,884 133 00:06:11,884 --> 00:06:12,550 [VIDEO PLAYBACK] 134 00:06:12,550 --> 00:06:16,220 -Microsoft Seperti anak keempat. 135 00:06:16,220 --> 00:06:18,260 Anak-anak melakukan meninggalkan rumah. 136 00:06:18,260 --> 00:06:21,875 Dalam hal ini, saya kira Aku meninggalkan rumah. 137 00:06:21,875 --> 00:06:23,270 Hey Bill, whazzap? 138 00:06:23,270 --> 00:06:24,200 >> -Wazzap? 139 00:06:24,200 --> 00:06:25,320 >> Hei, wazzap? 140 00:06:25,320 --> 00:06:28,590 Kami telah diberi peluang besar. 141 00:06:28,590 --> 00:06:30,210 Dan Bill memberi kami kesempatan itu. 142 00:06:30,210 --> 00:06:35,520 143 00:06:35,520 --> 00:06:36,770 Saya ingin berterima kasih Bill untuk itu. 144 00:06:36,770 --> 00:06:39,630 Aku ingin kau juga. 145 00:06:39,630 --> 00:06:42,500 Kecepatan inovasi tidak akan memperlambat. 146 00:06:42,500 --> 00:06:45,140 >> Itu akan bisa lebih cepat dan lebih cepat. 147 00:06:45,140 --> 00:06:50,165 Mungkin ada beberapa pesaing yang sayangnya dieliminasi! 148 00:06:50,165 --> 00:06:54,337 149 00:06:54,337 --> 00:06:59,564 >> Saya mencintai perusahaan ini. 150 00:06:59,564 --> 00:07:00,064 Ya! 151 00:07:00,064 --> 00:07:03,452 152 00:07:03,452 --> 00:07:08,250 Saya PC, dan aku mencintai perusahaan ini! 153 00:07:08,250 --> 00:07:13,090 >> Pengembang, pengembang, pengembang, pengembang, pengembang, pengembang, 154 00:07:13,090 --> 00:07:14,560 pengembang, pengembang. 155 00:07:14,560 --> 00:07:17,500 156 00:07:17,500 --> 00:07:18,970 Ya! 157 00:07:18,970 --> 00:07:19,950 Pengembang web! 158 00:07:19,950 --> 00:07:21,420 >> Pengembang web! 159 00:07:21,420 --> 00:07:22,890 Pengembang web! 160 00:07:22,890 --> 00:07:25,830 161 00:07:25,830 --> 00:07:28,770 Dengarkan apa pun yang Anda dapatkan tanpa biaya tambahan! 162 00:07:28,770 --> 00:07:31,960 >> MS-DOS eksekutif, janji kalender, tumpukan kartu, buku catatan, 163 00:07:31,960 --> 00:07:33,750 jam, panel kontrol. 164 00:07:33,750 --> 00:07:35,461 Dan, bisa Anda percaya? 165 00:07:35,461 --> 00:07:35,960 Reversie! 166 00:07:35,960 --> 00:07:37,270 >> Membakar mereka ke CD! 167 00:07:37,270 --> 00:07:38,660 Mempostingnya ke MSN! 168 00:07:38,660 --> 00:07:40,422 Anda mail ke teman-teman! 169 00:07:40,422 --> 00:07:41,790 >> Semua dengan satu kali klik! 170 00:07:41,790 --> 00:07:48,670 Satu Microsoft, salah satu strategi, satu team-- fokus, disiplin, profesional, 171 00:07:48,670 --> 00:07:50,610 dan ahli dalam semua yang kita lakukan. 172 00:07:50,610 --> 00:07:52,670 Membiarkan saya menggunakan garis dari sebuah film lama. 173 00:07:52,670 --> 00:07:54,810 >> Hubungan seperti hiu. 174 00:07:54,810 --> 00:07:57,480 Mereka bergerak maju atau mereka mati. 175 00:07:57,480 --> 00:08:01,470 Saya benar-benar berpikir tech perusahaan yang sama. 176 00:08:01,470 --> 00:08:04,801 >> [END VIDEO PLAYBACK] 177 00:08:04,801 --> 00:08:08,050 DAVID J. Malan: Jadi kami sangat senang untuk mengumumkan bahwa Steve akan bergabung dengan kita 178 00:08:08,050 --> 00:08:13,320 di sini di CS50 Rabu depan di tempat biasa dan waktu di sini. 179 00:08:13,320 --> 00:08:14,750 Ruang kemungkinan akan terbatas. 180 00:08:14,750 --> 00:08:19,650 Dan untuk bergabung dengan kami secara langsung, silahkan kepala hari ini atau segera sesudahnya 181 00:08:19,650 --> 00:08:22,600 untuk cs50.harvard.edu/register. 182 00:08:22,600 --> 00:08:25,780 >> Dan kami akan menindaklanjuti dengan Selasa mengkonfirmasikan tempat. 183 00:08:25,780 --> 00:08:29,900 Berharap untuk yang berikutnya Rabu selama kuliah di CS50. 184 00:08:29,900 --> 00:08:33,706 Sekarang, dalam berita lainnya, kebetulan saya menemukan ini di The Crimson hanya 185 00:08:33,706 --> 00:08:34,289 hari yang lain. 186 00:08:34,289 --> 00:08:37,370 >> Ternyata bahwa salah satu staf CS50 ini dan setidaknya salah satu dari mahasiswa CS50 ini 187 00:08:37,370 --> 00:08:40,299 saat ini berjalan untuk UC presiden dan wakil presiden, 188 00:08:40,299 --> 00:08:42,950 yang membawa saya kembali untuk hari-hari saya sendiri kembali 189 00:08:42,950 --> 00:08:45,920 ketika saya kalah dalam pemilihan UC sedih. 190 00:08:45,920 --> 00:08:48,210 Tapi hikmahnya dalam yang saya selalu 191 00:08:48,210 --> 00:08:50,604 menceritakan kisah ini adalah bahwa salah satu saya yakin 192 00:08:50,604 --> 00:08:52,770 banyak alasan saya kehilangan Pemilu adalah kurangnya lengkap 193 00:08:52,770 --> 00:08:54,103 dari bakat untuk berbicara di depan umum. 194 00:08:54,103 --> 00:08:56,950 Dan cukup jujur, itu mendorong saya, pengalaman itu 195 00:08:56,950 --> 00:09:02,235 Saya pikir tahun pertama saya, untuk benar-benar menandatangani untuk Harvard Computer Society, yang 196 00:09:02,235 --> 00:09:04,610 adalah kelompok di kampus yang memegang berbagai pembicaraan teknis 197 00:09:04,610 --> 00:09:05,318 dan hal-hal lain. 198 00:09:05,318 --> 00:09:08,117 Dan saya mengambil alih mengajar mereka seminar dan karena itu 199 00:09:08,117 --> 00:09:09,950 memiliki kesempatan, suatu kesempatan yang sangat bagus, 200 00:09:09,950 --> 00:09:12,620 untuk mulai bekerja pada persis ini. 201 00:09:12,620 --> 00:09:15,000 Tapi juga, saya memiliki kesempatan selama pengalaman ini 202 00:09:15,000 --> 00:09:16,930 untuk mengajar diri sendiri semua lebih HTML. 203 00:09:16,930 --> 00:09:21,080 Dan jadi saya menunda-nunda malam lalu oleh melihat melalui website berbasis HTML 204 00:09:21,080 --> 00:09:28,066 Aku dibuat seperti tahun 1997, '98, untuk saya kampanye yang terlihat seperti ini di sini. 205 00:09:28,066 --> 00:09:29,920 Aku tahu. 206 00:09:29,920 --> 00:09:33,340 >> Because-- dan tentu saja, pemberitahuan ini keputusan desain yang menakjubkan pada tahun 1998 207 00:09:33,340 --> 00:09:33,850 atau entah apa lagi. 208 00:09:33,850 --> 00:09:36,475 Hal pertama yang Anda ingin pengguna lakukan setelah mengunjungi website Anda 209 00:09:36,475 --> 00:09:39,860 adalah harus mengklik link lain hanya untuk memasukkan website Anda di sini dengan biarawan 210 00:09:39,860 --> 00:09:43,940 belakang seperti tirai terselubung mana rupanya Platform kampanye saya. 211 00:09:43,940 --> 00:09:46,330 Dan ini adalah semua yang Anda akan mendapatkan hari ini adalah hanya screenshot. 212 00:09:46,330 --> 00:09:49,500 Tapi aku membaca, seperti, poster kampanye saya tadi malam 213 00:09:49,500 --> 00:09:50,490 dan platform saya. 214 00:09:50,490 --> 00:09:52,960 >> Dan aku sangat marah pada saat itu. 215 00:09:52,960 --> 00:09:55,380 Platform saya was-- itu menarik. 216 00:09:55,380 --> 00:09:57,730 Jadi saya sudah tenang sejak saat itu. 217 00:09:57,730 --> 00:10:03,550 Tapi suatu hari nanti, aku akan berjalan lagi dan mudah-mudahan lebih baik saat ini. 218 00:10:03,550 --> 00:10:07,265 >> Jadi HTML, bahasa yang saya buat bahwa in-- Anda akan segera membuat banyak more-- 219 00:10:07,265 --> 00:10:09,140 adalah sesuatu yang kita sudah berbicara tentang akhir-akhir ini 220 00:10:09,140 --> 00:10:12,460 dan sebagian besar taking untuk diberikan sekarang bahwa kami telah pindah ke bahasa lain. 221 00:10:12,460 --> 00:10:15,650 Tapi mari kita berhenti untuk sesaat dan menaruh beberapa hal-hal ini dalam konteks. 222 00:10:15,650 --> 00:10:18,040 Jadi dalam sebuah kalimat, apa HTML? 223 00:10:18,040 --> 00:10:19,370 >> Atau, apa yang digunakan untuk? 224 00:10:19,370 --> 00:10:20,208 Siapa? 225 00:10:20,208 --> 00:10:20,708 Ya. 226 00:10:20,708 --> 00:10:22,002 >> AUDIENCE: Markup untuk situs web. 227 00:10:22,002 --> 00:10:23,460 DAVID J. Malan: Markup untuk website. 228 00:10:23,460 --> 00:10:27,100 Jadi itu adalah bahasa markup yang memungkinkan Anda menyusun sebuah halaman web. 229 00:10:27,100 --> 00:10:30,040 Header naik di sini, judul goes here, tubuh goes here. 230 00:10:30,040 --> 00:10:33,280 Hal ini tebal, ini adalah italics-- semacam detail. 231 00:10:33,280 --> 00:10:33,830 >> OK, baik. 232 00:10:33,830 --> 00:10:37,620 Jadi CSS memungkinkan you-- dan saya mengambil beberapa kebebasan di sana 233 00:10:37,620 --> 00:10:40,990 dengan berani menghadap dan miring karena yang lebih baik diimplementasikan dengan ini. 234 00:10:40,990 --> 00:10:42,096 CSS is-- apa? 235 00:10:42,096 --> 00:10:42,845 Katakanlah dalam sebuah kalimat. 236 00:10:42,845 --> 00:10:46,000 237 00:10:46,000 --> 00:10:46,720 Siapapun sama sekali. 238 00:10:46,720 --> 00:10:46,870 Ya. 239 00:10:46,870 --> 00:10:49,286 >> AUDIENCE: hiasan dan hal, seperti bagaimana desain itu. 240 00:10:49,286 --> 00:10:51,769 241 00:10:51,769 --> 00:10:52,810 DAVID J. Malan: OK, baik. 242 00:10:52,810 --> 00:10:55,420 Hiasan yang memungkinkan Anda untuk merancang atau menyesuaikan dgn mode itu 243 00:10:55,420 --> 00:10:59,540 dengan hal-hal seperti huruf tebal dan huruf miring dan warna dan juga lebih baik 244 00:10:59,540 --> 00:11:01,330 positioning grained elemen. 245 00:11:01,330 --> 00:11:04,520 Ini semacam memungkinkan Anda mengambil hal-hal yang last mile sehingga jika, misalnya, 246 00:11:04,520 --> 00:11:08,130 di Pset7, Anda mungkin telah melihat pada Anda Halaman portofolio jika Anda saat ini 247 00:11:08,130 --> 00:11:12,270 sudah bahwa tabel default yang Anda membuat menampilkan kepemilikan saham pengguna 248 00:11:12,270 --> 00:11:15,740 dan uang tunai mungkin terlihat cukup mengerikan secara default tanpa spasi. 249 00:11:15,740 --> 00:11:18,420 Jenis Semuanya dari berdesakan bersama-sama dalam baris dan kolom. 250 00:11:18,420 --> 00:11:20,662 >> Nah, dengan sedikit CSS, karena Anda mungkin menyadari, 251 00:11:20,662 --> 00:11:23,870 Anda benar-benar dapat men-tweak itu dan membuatnya sesuatu yang jauh lebih akrab dan banyak 252 00:11:23,870 --> 00:11:24,870 cantik untuk melihat. 253 00:11:24,870 --> 00:11:27,730 Jadi CSS adalah tentang stilisasi situs web. 254 00:11:27,730 --> 00:11:31,970 Tapi kemudian kami memperkenalkan lagi bahasa, PHP, yang memungkinkan kita melakukan apa? 255 00:11:31,970 --> 00:11:36,400 256 00:11:36,400 --> 00:11:37,590 >> Mari kita melakukan apa? 257 00:11:37,590 --> 00:11:38,177 Siapa pun. 258 00:11:38,177 --> 00:11:40,010 Harus usaha di luar pasangan pertama baris. 259 00:11:40,010 --> 00:11:40,260 Ya. 260 00:11:40,260 --> 00:11:41,719 >> AUDIENCE: Menghasilkan konten dinamis. 261 00:11:41,719 --> 00:11:42,718 DAVID J. Malan: Perfect. 262 00:11:42,718 --> 00:11:43,850 Menghasilkan konten dinamis. 263 00:11:43,850 --> 00:11:45,808 Dan Anda dapat melakukan ini di sejumlah bahasa. 264 00:11:45,808 --> 00:11:50,120 Kami kebetulan menggunakan PHP karena di bagian sehingga mirip dengan C sintaks. 265 00:11:50,120 --> 00:11:52,000 >> Tapi PHP tidak tepat itu. 266 00:11:52,000 --> 00:11:54,620 Ini memungkinkan Anda secara dinamis menghasilkan output. 267 00:11:54,620 --> 00:11:57,890 Dan beberapa output yang bisa HTML, seperti yang kita biasanya lakukan. 268 00:11:57,890 --> 00:12:00,160 Dan itu juga, karena itu bahasa pemrograman, adalah 269 00:12:00,160 --> 00:12:03,240 Mekanisme melalui mana kita dapat berbicara dengan database. 270 00:12:03,240 --> 00:12:05,730 >> Dan kita bisa membuat query untuk server lain seperti Yahoo 271 00:12:05,730 --> 00:12:08,660 dan pemrograman melakukan apa-apa benar-benar bahwa Anda mungkin dinyatakan 272 00:12:08,660 --> 00:12:10,400 ingin memaksa komputer untuk dilakukan. 273 00:12:10,400 --> 00:12:13,580 Jadi PHP memungkinkan kita mulai dinamis keluaran konten. 274 00:12:13,580 --> 00:12:16,900 Jadi dengan logika ini, aku tidak punya website dinamis kembali pada tahun 1998. 275 00:12:16,900 --> 00:12:18,460 >> Itu hanya sebuah halaman web statis. 276 00:12:18,460 --> 00:12:22,250 Konten saya harus diubah oleh manual dengan gedit atau setara. 277 00:12:22,250 --> 00:12:25,290 Tapi PHP adalah apa yang kita digunakan atau bisa digunakan, lebih tepatnya, 278 00:12:25,290 --> 00:12:27,260 untuk sesuatu seperti Situs Frosh IM, yang 279 00:12:27,260 --> 00:12:31,160 seharusnya mengambil pendaftaran dan mengelola daftar hal-hal yang users-- 280 00:12:31,160 --> 00:12:33,550 sebenarnya berubah dari waktu, meskipun kita terjadi 281 00:12:33,550 --> 00:12:35,990 menggunakan Perl, berbeda bahasa pada saat itu. 282 00:12:35,990 --> 00:12:40,350 >> Dan kemudian terakhir, kami memperkenalkan SQL-- Structured Query Language. 283 00:12:40,350 --> 00:12:43,845 Jadi belum bahasa lain yang digunakan untuk apa? 284 00:12:43,845 --> 00:12:46,660 285 00:12:46,660 --> 00:12:47,639 Digunakan untuk apa? 286 00:12:47,639 --> 00:12:49,430 Bisakah kita usaha slight-- OK, kita tidak akan 287 00:12:49,430 --> 00:12:51,263 untuk mendapatkan lebih jauh dari orkestra di sini. 288 00:12:51,263 --> 00:12:53,432 AUDIENCE: Ini protokol digunakan untuk berbicara dengan database. 289 00:12:53,432 --> 00:12:55,640 DAVID J. Malan: protokol A digunakan untuk berbicara dengan database. 290 00:12:55,640 --> 00:12:56,181 Mari saya men-tweak. 291 00:12:56,181 --> 00:12:59,280 Ini adalah bahasa alami yang digunakan untuk berbicara dengan databases-- memilih 292 00:12:59,280 --> 00:13:01,280 dan menyisipkan dan menghapus dan update dan benar-benar 293 00:13:01,280 --> 00:13:03,840 bahkan lebih banyak fitur yang kita bahkan belum menyelam 294 00:13:03,840 --> 00:13:07,920 menjadi tetapi Anda mungkin ingin explore-- memiliki untuk mengeksplorasi, misalnya, proyek akhir. 295 00:13:07,920 --> 00:13:09,560 Jadi ada berbagai potongan. 296 00:13:09,560 --> 00:13:13,100 >> Dan mudah-mudahan Pset7, meskipun spesifikasinya cukup panjang, 297 00:13:13,100 --> 00:13:15,990 itu sengaja lama untuk memandu Anda melalui bagaimana hal ini dapat semua 298 00:13:15,990 --> 00:13:17,210 diketik bersama-sama. 299 00:13:17,210 --> 00:13:20,300 Sekarang, pada hari Senin, kita memperkenalkan bahasa terakhir kami 300 00:13:20,300 --> 00:13:23,430 bahwa kita secara resmi akan memperkenalkan di yang course-- yaitu, JavaScript. 301 00:13:23,430 --> 00:13:25,720 Ini, seperti PHP, adalah ditafsirkan bahasa. 302 00:13:25,720 --> 00:13:28,110 >> Tapi perbedaan utama Saya mengusulkan pada Senin 303 00:13:28,110 --> 00:13:32,730 adalah bahwa sementara PHP mengeksekusi atau diinterpretasikan pada server, yang 304 00:13:32,730 --> 00:13:35,990 dalam hal ini adalah alat CS50, atau mungkin ada beberapa web komersial 305 00:13:35,990 --> 00:13:39,370 server di internet, JavaScript umumnya 306 00:13:39,370 --> 00:13:43,650 adalah bahasa yang berjalan sisi klien bukan server side-- sehingga dalam browser. 307 00:13:43,650 --> 00:13:46,970 Yang mengatakan, seperti ketika saya membuka up source code Facebook dan menemukan semua 308 00:13:46,970 --> 00:13:51,510 file-file js, implikasinya adalah bahwa ketika Anda mengunjungi Facebook atau sebagian 309 00:13:51,510 --> 00:13:54,810 website hari ini, Anda mendapatkan tidak hanya HTML, tidak hanya CSS, 310 00:13:54,810 --> 00:13:59,370 tetapi sejumlah besar JavaScript kode sering dalam bentuk file js. 311 00:13:59,370 --> 00:14:03,970 Dan kemudian itu adalah browser-- Anda sendiri Mac atau PC-- yang mengeksekusi kode tersebut. 312 00:14:03,970 --> 00:14:05,990 >> Tapi browser Anda mengeksekusinya. 313 00:14:05,990 --> 00:14:08,070 Anda dapat berpikir dalam semacam bak pasir. 314 00:14:08,070 --> 00:14:12,420 Sehingga kode JavaScript tidak boleh mampu menghapus file pada komputer Anda. 315 00:14:12,420 --> 00:14:14,730 Seharusnya tidak mampu mengirim email atas nama Anda. 316 00:14:14,730 --> 00:14:17,760 Jenis browser Anda dari Membatasi apa yang dapat Anda lakukan dengan itu. 317 00:14:17,760 --> 00:14:20,630 >> Jadi dalam hal ini, itu sedikit kurang kuat, mungkin, dari C. 318 00:14:20,630 --> 00:14:24,030 Tapi JavaScript bisa, sebagai samping, digunakan pada server, 319 00:14:24,030 --> 00:14:27,740 meskipun kita akan cenderung untuk tidak berbicara tentang hal itu dalam konteks itu. 320 00:14:27,740 --> 00:14:29,740 Jadi sekarang mari kita mengikat ini bersama-sama. 321 00:14:29,740 --> 00:14:34,000 Seminggu ditambah lalu, kami disajikan beberapa HTML pada left-- halaman web yang super membosankan. 322 00:14:34,000 --> 00:14:35,000 >> Hanya menyapa dunia. 323 00:14:35,000 --> 00:14:38,110 Dan kemudian aku mengusulkan pada benar kita dapat jenis mencuri ide-ide 324 00:14:38,110 --> 00:14:41,470 dari diskusi kami struktur data di C 325 00:14:41,470 --> 00:14:45,270 dan berpikir tentang bagaimana hirarkis ini bahasa markup di sebelah kiri 326 00:14:45,270 --> 00:14:49,720 dapat ditarik atau diimplementasikan dalam memori sebagai struktur pohon yang sebenarnya dengan node 327 00:14:49,720 --> 00:14:51,400 dan pointer dan orang-orang jenis rincian. 328 00:14:51,400 --> 00:14:53,820 Di sebelah kanan, kita sebut bahwa Dokumen DOM-- 329 00:14:53,820 --> 00:14:56,800 Obyek Model-- yang hanya cara mewah untuk mengatakan pohon. 330 00:14:56,800 --> 00:14:59,520 >> Sekarang, mengapa ini berguna untuk memikirkan dengan cara ini? 331 00:14:59,520 --> 00:15:01,680 Karena sekarang dengan JavaScript, karena kita memiliki 332 00:15:01,680 --> 00:15:05,810 kode yang akan bermain dalam hal ini lingkungan, HTML sebenarnya yang 333 00:15:05,810 --> 00:15:08,360 telah dikirim ke browser sudah dan sudah 334 00:15:08,360 --> 00:15:12,690 telah dimuat ke memori oleh browser ke sebuah pohon di komputer Anda 335 00:15:12,690 --> 00:15:18,270 RAM seperti ini, kita dapat menggunakan JavaScript untuk benar-benar melintasi atau berjalan atau pencarian 336 00:15:18,270 --> 00:15:21,800 atau mengubah pohon DOM namun kami inginkan. 337 00:15:21,800 --> 00:15:24,040 Jadi sebenarnya, jika Anda berpikir tentang facebook.com, 338 00:15:24,040 --> 00:15:27,660 jika Anda menggunakan fitur chat, jika Anda Penggunaan Gmail dan fitur gchat, 339 00:15:27,660 --> 00:15:30,540 apa pun di mana Anda memiliki pesan yang datang lagi dan lagi 340 00:15:30,540 --> 00:15:35,880 dan lagi, pesan tersebut mungkin, seperti, LI tag, Daftar Item tag, mungkin. 341 00:15:35,880 --> 00:15:37,940 >> Atau mungkin mereka hanya divs yang terus muncul 342 00:15:37,940 --> 00:15:39,770 setiap kali Anda mendapatkan pesan instan. 343 00:15:39,770 --> 00:15:42,960 Dan itu hanya berarti apa Facebook atau Google melakukan 344 00:15:42,960 --> 00:15:45,200 adalah setiap kali Anda mendapatkan pesan dari server, 345 00:15:45,200 --> 00:15:48,740 mereka mungkin menggunakan JavaScript hanya menambahkan node lain 346 00:15:48,740 --> 00:15:52,700 ini tree-- node lain untuk ini pohon yang kemudian secara visual hanya terlihat 347 00:15:52,700 --> 00:15:54,570 seperti baris baru teks pada layar Anda. 348 00:15:54,570 --> 00:15:57,100 Tapi mereka memasukkan ke struktur data. 349 00:15:57,100 --> 00:15:59,742 >> Jadi dalam kelas seperti CS124 dan lain-lain, Anda akan 350 00:15:59,742 --> 00:16:02,200 benar-benar menulis kode lebih terhadap struktur data seperti ini. 351 00:16:02,200 --> 00:16:04,310 Tetapi untuk sekarang di JavaScript, kita hanya akan menganggap 352 00:16:04,310 --> 00:16:07,920 kita mendapatkan semua fungsi ini secara gratis dari bahasa itu sendiri. 353 00:16:07,920 --> 00:16:09,210 Jadi mari kita lihat sebuah contoh. 354 00:16:09,210 --> 00:16:13,120 >> Mari saya membuka sebuah file yang bernama form.html. 355 00:16:13,120 --> 00:16:14,601 Ini super sederhana. 356 00:16:14,601 --> 00:16:15,600 Itu hanya tampak seperti ini. 357 00:16:15,600 --> 00:16:17,860 >> Tidak ada CSS, tidak ada pemikiran untuk estetika. 358 00:16:17,860 --> 00:16:19,810 Ini murni fungsional dan ternyata aku 359 00:16:19,810 --> 00:16:24,000 meminta email, password, sandi lagi, dan kemudian cek 360 00:16:24,000 --> 00:16:26,150 untuk menyetujui beberapa syarat dan ketentuan. 361 00:16:26,150 --> 00:16:28,740 Apa kode sumber untuk ini Sepertinya mungkin sesuatu 362 00:16:28,740 --> 00:16:31,030 Anda bisa menebak dengan sedikit pemikiran sekarang. 363 00:16:31,030 --> 00:16:32,840 Aku punya tag form di sini. 364 00:16:32,840 --> 00:16:36,190 >> Suatu tindakan tampaknya akan pergi ke sebuah file yang bernama register.php. 365 00:16:36,190 --> 00:16:37,870 Metode saya akan menggunakan adalah mendapatkan. 366 00:16:37,870 --> 00:16:40,880 Dan kemudian aku punya teks bidang yang namanya email. 367 00:16:40,880 --> 00:16:43,340 >> Aku punya bidang sandi yang namanya password. 368 00:16:43,340 --> 00:16:45,420 Aku punya yang lain bidang sandi yang namanya 369 00:16:45,420 --> 00:16:47,342 adalah konfirmasi agak sewenang-wenang. 370 00:16:47,342 --> 00:16:49,690 Hanya saja parameter HTTP lain. 371 00:16:49,690 --> 00:16:54,430 >> Dan kemudian kita kita sudah tidak digunakan ini kecuali sejak Frosh IM demo di class-- 372 00:16:54,430 --> 00:16:56,692 kotak centang yang hanya jenis sama dengan cek. 373 00:16:56,692 --> 00:16:57,900 Dan aku akan menelepon perjanjian itu. 374 00:16:57,900 --> 00:17:00,700 Jadi saya sudah agak sewenang-wenang tetapi nyaman bernama bidang ini. 375 00:17:00,700 --> 00:17:03,450 Sehingga sekarang ketika formulir ini mendapat disampaikan, mari kita lihat apa yang terjadi. 376 00:17:03,450 --> 00:17:07,290 Jika saya melakukannya malan@harvard.edu, Aku akan melakukan password merah. 377 00:17:07,290 --> 00:17:09,530 Aku akan melakukan password apa-apa. 378 00:17:09,530 --> 00:17:10,910 Mari kita tidak bekerja sama. 379 00:17:10,910 --> 00:17:12,280 >> Dan aku tidak akan memeriksa kotak. 380 00:17:12,280 --> 00:17:13,940 Mari saya klik Daftar. 381 00:17:13,940 --> 00:17:15,420 Dan ia mengatakan, hm, kau terdaftar. 382 00:17:15,420 --> 00:17:16,069 Tidak benar-benar. 383 00:17:16,069 --> 00:17:17,450 >> Tetapi URL berubah. 384 00:17:17,450 --> 00:17:22,280 Jadi bentuk ini jelas diperbolehkan untuk tunduk register.php. 385 00:17:22,280 --> 00:17:25,160 Tapi mungkin, aku harus menangkap beberapa kesalahan ini. 386 00:17:25,160 --> 00:17:27,569 Sekarang, di Pset7 dan beberapa contoh kuliah kami, 387 00:17:27,569 --> 00:17:30,130 kita umumnya akan mencetak pesan kesalahan merah besar di sini 388 00:17:30,130 --> 00:17:33,760 mengatakan, nama hilang, atau hilang password. 389 00:17:33,760 --> 00:17:37,680 Kami telah melakukan itu sebelumnya dan kami telah dilakukan deteksi kesalahan sisi server. 390 00:17:37,680 --> 00:17:41,580 >> Tapi banyak situs hari ini melakukan klien deteksi kesalahan sisi 391 00:17:41,580 --> 00:17:42,810 di mana URL tidak berubah. 392 00:17:42,810 --> 00:17:44,101 Seluruh halaman tidak refresh. 393 00:17:44,101 --> 00:17:46,940 Anda mendapatkan umpan balik instan dari browser. 394 00:17:46,940 --> 00:17:48,070 Mungkin sesuatu yang berwarna merah. 395 00:17:48,070 --> 00:17:49,190 >> Mungkin Anda mendapatkan pop up. 396 00:17:49,190 --> 00:17:53,240 Tapi Anda tidak membuang waktu pengiriman ke data server yang tidak lengkap. 397 00:17:53,240 --> 00:17:56,050 Jadi mari kita lihat bagaimana kita mungkin mencapai fitur itu juga. 398 00:17:56,050 --> 00:17:59,660 >> Biarkan aku pergi ke form1.html, yang tampak sama. 399 00:17:59,660 --> 00:18:03,530 Tapi kalau kali ini saya lakukan malan@harvard.edu dan saya ketik merah 400 00:18:03,530 --> 00:18:07,350 dan saya tidak bekerja sama lebih lanjut tapi klik Register, perhatikan sekarang. 401 00:18:07,350 --> 00:18:08,940 Ini bukan solusi yang paling seksi. 402 00:18:08,940 --> 00:18:10,900 Aku sudah setidaknya tertangkap kesalahan ini. 403 00:18:10,900 --> 00:18:12,900 Dan aku telah menggunakan waspada fungsi dalam JavaScript-- 404 00:18:12,900 --> 00:18:14,090 yang kami hanya menggunakan di kelas. 405 00:18:14,090 --> 00:18:16,430 Secara umum, Anda tidak harus menggunakan ini karena bisa sangat cepat keluar 406 00:18:16,430 --> 00:18:17,160 kendali. 407 00:18:17,160 --> 00:18:19,180 Tetapi password tidak cocok adalah kesalahan. 408 00:18:19,180 --> 00:18:21,120 >> Biarkan aku pergi ke depan dan klik OK. 409 00:18:21,120 --> 00:18:25,040 Tapi apa yang takeaway kunci di sini adalah bahwa URL tidak berubah. 410 00:18:25,040 --> 00:18:27,960 Wasting jadi aku tidak terganggu waktu server meminta itu 411 00:18:27,960 --> 00:18:30,750 pertanyaan yang aku bisa memiliki tahu jawabannya untuk diriku sendiri. 412 00:18:30,750 --> 00:18:33,210 >> Dan pengguna, meskipun telah berbicara tentang hal ini 413 00:18:33,210 --> 00:18:35,264 lebih lama dari pengguna akan berpikir tentang hal ini, 414 00:18:35,264 --> 00:18:36,680 akan memiliki umpan balik instan. 415 00:18:36,680 --> 00:18:39,044 Tidak ada latency dengan konektivitas jaringan. 416 00:18:39,044 --> 00:18:40,460 Jadi mari kita lihat kode sumber ini. 417 00:18:40,460 --> 00:18:45,600 >> Terlihat Form1.html struktural mirip di sini. 418 00:18:45,600 --> 00:18:46,810 Bentuknya yang sebenarnya sama. 419 00:18:46,810 --> 00:18:48,330 Tapi mari kita lihat apa yang saya lakukan di sini. 420 00:18:48,330 --> 00:18:49,913 Dan ada berbagai cara untuk melakukan hal ini. 421 00:18:49,913 --> 00:18:53,690 Dan saya sudah melakukan yang paling lurus follower tapi tidak cara yang paling elegan namun. 422 00:18:53,690 --> 00:18:54,869 Saya memiliki tag script. 423 00:18:54,869 --> 00:18:57,035 Saya kemudian memanggil document.getElementById ('pendaftaran'). 424 00:18:57,035 --> 00:19:00,090 425 00:19:00,090 --> 00:19:04,420 Dan aku menyimpan nilai yang dalam bentuk, variabel. 426 00:19:04,420 --> 00:19:05,520 >> Jadi apa yang saya lakukan? 427 00:19:05,520 --> 00:19:08,960 Anda dapat menganggap document.getElementById sebagai 428 00:19:08,960 --> 00:19:11,200 fungsi khusus yang JavaScript memberi Anda 429 00:19:11,200 --> 00:19:14,400 yang benar-benar tangan Anda pointer ke salah satu node 430 00:19:14,400 --> 00:19:16,520 atau empat persegi panjang di pohon ini. 431 00:19:16,520 --> 00:19:21,470 Jadi sekarang itulah yang variabel formulir kami di JavaScript sebenarnya menunjuk. 432 00:19:21,470 --> 00:19:25,120 >> Jadi sekarang sintaks yang berbeda dari C. Tapi kami melakukan beberapa hal di sini. 433 00:19:25,120 --> 00:19:30,360 Satu, yang satu ini agak aneh mencari, tentu dibandingkan C. 434 00:19:30,360 --> 00:19:32,180 Tapi lihat pada baris 35. 435 00:19:32,180 --> 00:19:35,130 Jadi pada form.onsubmit kiri. 436 00:19:35,130 --> 00:19:38,060 Ingat onsubmit yang seperti lapangan di struct. 437 00:19:38,060 --> 00:19:41,480 Jika Anda berpikir tentang variabel bentuk hanya menjadi struct C, 438 00:19:41,480 --> 00:19:42,600 itu mungkin memiliki beberapa bidang. 439 00:19:42,600 --> 00:19:46,410 >> Kembali pada hari, kami memiliki nama siswa, ID, rumah, orang-orang semacam ladang. 440 00:19:46,410 --> 00:19:48,520 Hanya memikirkan onsubmit sebagai bidang lain. 441 00:19:48,520 --> 00:19:53,380 Tapi itu adalah bidang khusus karena Browser diprogram untuk mengharapkan 442 00:19:53,380 --> 00:19:57,530 .onsubmit untuk tidak menjadi nilai seperti nomor atau string, 443 00:19:57,530 --> 00:20:01,180 tapi untuk benar-benar menjadi fungsi atau alamat dari suatu fungsi 444 00:20:01,180 --> 00:20:02,570 di memori komputer. 445 00:20:02,570 --> 00:20:04,740 >> Dan memang, itulah yang kata kunci ini di sini tidak. 446 00:20:04,740 --> 00:20:06,710 Ini mengatakan, beri saya fungsi baru. 447 00:20:06,710 --> 00:20:09,390 Tapi apa namanya akan, rupanya? 448 00:20:09,390 --> 00:20:10,800 >> Berpikir kembali ke hari Senin. 449 00:20:10,800 --> 00:20:13,430 450 00:20:13,430 --> 00:20:17,170 Apa nama ini fungsi berdasarkan sintaks ini? 451 00:20:17,170 --> 00:20:19,784 Tidak, maksudku, ada jelas tidak ada nama associated-- pasti 452 00:20:19,784 --> 00:20:21,200 tidak apa yang saya disorot di sini. 453 00:20:21,200 --> 00:20:22,560 >> Tapi itu benar-benar OK. 454 00:20:22,560 --> 00:20:25,840 Ini adalah fungsi anonim, atau fungsi lambda sebagai beberapa mungkin menyebutnya. 455 00:20:25,840 --> 00:20:27,589 Dan itu hanya berarti itu masih fungsi. 456 00:20:27,589 --> 00:20:29,400 Hanya saja, Anda tidak dapat menyebutnya dengan nama. 457 00:20:29,400 --> 00:20:30,057 Tapi itu OK. 458 00:20:30,057 --> 00:20:33,140 Karena sekali lagi, browser telah diprogram oleh perusahaan seperti Google 459 00:20:33,140 --> 00:20:38,540 atau Microsoft atau Mozilla atau orang lain untuk hanya tahu bahwa jika bidang .onsubmit 460 00:20:38,540 --> 00:20:43,400 dalam elemen bentuk memiliki nilai, memperlakukannya sebagai sebuah function-- 461 00:20:43,400 --> 00:20:44,750 fungsi pointer, jika Anda mau. 462 00:20:44,750 --> 00:20:46,910 Dan menyebutnya ketika formulir dikirimkan. 463 00:20:46,910 --> 00:20:50,350 >> Jadi apa kode yang harus dieksekusi ketika formulir dikirimkan? 464 00:20:50,350 --> 00:20:52,526 Rupanya, semuanya bagian dalam kurung kurawal. 465 00:20:52,526 --> 00:20:53,650 Dan ini hanya gaya. 466 00:20:53,650 --> 00:20:55,626 >> Anda bisa melakukan ini seperti kita cenderung untuk dilakukan di CS50. 467 00:20:55,626 --> 00:20:58,250 Namun dalam JavaScript, kebanyakan orang cenderung untuk tetap pada baris yang sama 468 00:20:58,250 --> 00:21:01,960 hanya karena lebih jelas adalah terkait dengan fungsi kata kunci. 469 00:21:01,960 --> 00:21:03,240 Jadi sekarang apa yang saya lakukan? 470 00:21:03,240 --> 00:21:08,616 >> Jika form.email.value sama equals string kosong atau tidak, inilah 471 00:21:08,616 --> 00:21:11,490 peringatan di mana aku akan mengatakan, Anda harus memberikan alamat email Anda, 472 00:21:11,490 --> 00:21:12,690 dan kemudian kembali palsu. 473 00:21:12,690 --> 00:21:15,720 Dan itu adalah bahwa return false yang mencegah bentuk dari yang diajukan. 474 00:21:15,720 --> 00:21:19,480 Sementara itu, jika nilai password kosong, aku akan berteriak pada pengguna 475 00:21:19,480 --> 00:21:21,150 dan berkata, Anda harus memberikan password. 476 00:21:21,150 --> 00:21:23,700 >> Hal Sementara itu semakin sedikit lebih menarik di sini. 477 00:21:23,700 --> 00:21:29,160 Jika form.password.value tidak form.confirmation.value sama, 478 00:21:29,160 --> 00:21:31,680 bidang lain, berteriak pengguna bahwa password 479 00:21:31,680 --> 00:21:33,860 tidak cocok karena mereka tidak beberapa saat yang lalu. 480 00:21:33,860 --> 00:21:35,780 Dan kemudian yang satu ini adalah sedikit lebih seksi karena aku 481 00:21:35,780 --> 00:21:40,470 tahu aku tahu konseptual yang diperiksa adalah nama kotak centang ini. 482 00:21:40,470 --> 00:21:45,680 >> Jadi saya hanya bisa menggunakan tanda seru titik untuk mengatakan jika cek tersebut tidak 483 00:21:45,680 --> 00:21:48,040 checked-- itu Boolean yang nilai, benar atau false-- 484 00:21:48,040 --> 00:21:49,700 Aku akan berteriak pada pengguna untuk alasan itu. 485 00:21:49,700 --> 00:21:52,300 Jika tidak, jika kita melewati semua kondisi ini, 486 00:21:52,300 --> 00:21:53,270 mari kita kembali benar. 487 00:21:53,270 --> 00:21:54,700 Biarkan formulir diserahkan. 488 00:21:54,700 --> 00:21:56,560 Dan ini akan terjadi. 489 00:21:56,560 --> 00:21:57,740 >> Mari kita ketik merah. 490 00:21:57,740 --> 00:22:00,230 Mari memeriksa kotak, klik Daftar. 491 00:22:00,230 --> 00:22:01,979 Dan sekarang aku pergi melalui ke tujuan. 492 00:22:01,979 --> 00:22:03,270 Sekarang, tidak ada database yang ada. 493 00:22:03,270 --> 00:22:05,370 Tidak ada yang menarik di register.php. 494 00:22:05,370 --> 00:22:07,980 Aku hanya butuh sesuatu untuk benar-benar berbicara dengan. 495 00:22:07,980 --> 00:22:09,140 Jadi biarkan aku berhenti sejenak, di sini. 496 00:22:09,140 --> 00:22:16,270 Ada pertanyaan tentang apa yang baru saja kita lakukan atau apa yang beberapa sintaks baru ini? 497 00:22:16,270 --> 00:22:17,640 OK, ya? 498 00:22:17,640 --> 00:22:20,025 >> AUDIENCE: Jadi kotak centang apapun secara otomatis Boolean a. 499 00:22:20,025 --> 00:22:21,650 Anda tidak harus menyatakan seperti itu. 500 00:22:21,650 --> 00:22:22,649 >> DAVID J. Malan: Benar. 501 00:22:22,649 --> 00:22:29,340 Setiap kotak centang yang dikirim kepada Anda dari bentuk HTML ke kode JavaScript Anda 502 00:22:29,340 --> 00:22:31,760 akan diperlakukan, ya, sebagai Boolean value-- benar atau salah. 503 00:22:31,760 --> 00:22:32,635 Ini adalah pertanyaan yang bagus. 504 00:22:32,635 --> 00:22:36,080 Sedangkan nilai-nilai lain, dari Tentu saja, telah teks, AKA string. 505 00:22:36,080 --> 00:22:38,500 >> Baiklah, jadi biar mundur sedikit lebih jauh. 506 00:22:38,500 --> 00:22:39,900 Apa inti dari ini? 507 00:22:39,900 --> 00:22:41,400 Hanya untuk menjadi jelas. 508 00:22:41,400 --> 00:22:44,940 Seperti, kita sudah tahu, bahkan dari Pset7 dan bahkan dari kuliah minggu lalu 509 00:22:44,940 --> 00:22:51,120 contoh, bahwa kita jelas dapat memeriksa $ _GET $ _POST Melihat apakah pengguna memberi kita 510 00:22:51,120 --> 00:22:52,200 nilai kosong. 511 00:22:52,200 --> 00:22:54,400 Ingat fungsi kosong di PHP. 512 00:22:54,400 --> 00:22:58,040 >> Jadi hanya harus jelas, apa salah satu alasan kita mungkin juga 513 00:22:58,040 --> 00:23:00,535 ingin melakukan pengecekan error ini dalam browser? 514 00:23:00,535 --> 00:23:03,350 515 00:23:03,350 --> 00:23:06,080 Apa motivasi di sini? 516 00:23:06,080 --> 00:23:06,580 Ya. 517 00:23:06,580 --> 00:23:09,735 >> AUDIENCE: Lebih cepat, dan Anda tidak mengirim data yang tidak berguna ke server. 518 00:23:09,735 --> 00:23:10,610 DAVID J. Malan: Baik. 519 00:23:10,610 --> 00:23:11,170 Ini lebih cepat. 520 00:23:11,170 --> 00:23:12,920 Anda tidak mengirim berguna data ke server. 521 00:23:12,920 --> 00:23:14,670 >> Jadi Anda mendapatkan kembali lebih tanggapan langsung. 522 00:23:14,670 --> 00:23:16,560 Dan secara keseluruhan, pengguna pengalaman lebih baik. 523 00:23:16,560 --> 00:23:17,900 Pikirkan tentang alternatif. 524 00:23:17,900 --> 00:23:21,160 >> Jika untuk Gmail-- dan kasus beberapa tahun yang lalu. 525 00:23:21,160 --> 00:23:24,160 Misalkan Anda punya email baru Gmail Anda rekening, tapi satu-satunya jalan melalui 526 00:23:24,160 --> 00:23:26,510 untuk melihat bahwa adalah, seperti, reload seluruh halaman. 527 00:23:26,510 --> 00:23:29,030 Atau misalkan Anda klik link untuk membaca email. 528 00:23:29,030 --> 00:23:31,600 >> Semuanya harus reload jadi bahwa Anda dapat melihat email. 529 00:23:31,600 --> 00:23:33,380 Atau Facebook-- Anda mendapatkan pesan chat. 530 00:23:33,380 --> 00:23:36,000 Anda tidak melihat itu sampai Anda memuat ulang halaman atau klik beberapa tautan. 531 00:23:36,000 --> 00:23:38,380 >> Seperti, ini akan menjadi sangat pengalaman pengguna menjengkelkan. 532 00:23:38,380 --> 00:23:41,300 Dan ini adalah bagaimana rasanya, jelas, kembali ketika aku berlari untuk UC 533 00:23:41,300 --> 00:23:44,760 dan web jauh kurang dinamis dan JavaScript tidak seperti yang dipopulerkan 534 00:23:44,760 --> 00:23:45,601 seperti sekarang. 535 00:23:45,601 --> 00:23:47,850 Dan hal semakin banyak lebih dinamis dan banyak lagi 536 00:23:47,850 --> 00:23:49,900 sisi klien dalam arti itu. 537 00:23:49,900 --> 00:23:54,370 >> Tapi ada menangkap di sini, dan ini adalah jenis Gotcha menjengkelkan. 538 00:23:54,370 --> 00:23:58,720 Hanya karena Anda menambahkan sisi client deteksi seperti ini tidak berarti 539 00:23:58,720 --> 00:24:01,430 Anda dapat atau harus meninggalkan deteksi sisi server. 540 00:24:01,430 --> 00:24:04,080 Anda pada dasarnya ingin menempatkan Anda kesalahan memeriksa kedua tempat. 541 00:24:04,080 --> 00:24:05,830 Karena apa yang salah dari pelajaran 542 00:24:05,830 --> 00:24:10,270 dari artikel yang saya baca beberapa kutipan dari dengan system-- CMS bodoh ini 543 00:24:10,270 --> 00:24:14,410 Content Management System-- yang menerapkan sistem otentikasi, 544 00:24:14,410 --> 00:24:16,790 Login nya melalui apa mekanisme? 545 00:24:16,790 --> 00:24:19,515 546 00:24:19,515 --> 00:24:20,469 JavaScript. 547 00:24:20,469 --> 00:24:21,499 >> AUDIENCE: JavaScript. 548 00:24:21,499 --> 00:24:23,290 DAVID J. Malan: JavaScript, tepatnya, kan? 549 00:24:23,290 --> 00:24:24,610 Itu menggunakan JavaScript. 550 00:24:24,610 --> 00:24:27,120 Dan secara harfiah, kalian punya memainkan sedikit mungkin 551 00:24:27,120 --> 00:24:28,700 dengan Inspektur Chrome. 552 00:24:28,700 --> 00:24:30,890 Dan jika saya dapat menemukannya, memeriksa elemen. 553 00:24:30,890 --> 00:24:33,670 >> Biarkan aku pergi untuk melakukan semua pilihan Chrome. 554 00:24:33,670 --> 00:24:37,080 Dan ini adalah bagaimana mudahnya untuk menonaktifkan JavaScript pada browser. 555 00:24:37,080 --> 00:24:38,950 Lihat, tidak ada lagi JavaScript. 556 00:24:38,950 --> 00:24:41,070 >> Jadi dalam keadilan, banyak web hari ini 557 00:24:41,070 --> 00:24:43,430 hanya akan patah karena Gmail dan sites-- lainnya 558 00:24:43,430 --> 00:24:46,140 Facebook-- berasumsi bahwa JavaScript diaktifkan. 559 00:24:46,140 --> 00:24:50,180 Tapi jika Anda melakukan sesuatu yang bodoh seperti hanya memvalidasi pengguna masukan 560 00:24:50,180 --> 00:24:52,520 dan memeriksa untuk kesalahan pada sisi client, 561 00:24:52,520 --> 00:24:54,940 musuh dengan mudah bisa melakukan ini. 562 00:24:54,940 --> 00:24:57,180 Dan kemudian bahkan lebih cerdas musuh seperti kalian 563 00:24:57,180 --> 00:25:01,120 sekarang bisa menggunakan Telnet atau Curl atau hanya perintah perintah baris 564 00:25:01,120 --> 00:25:05,300 dan benar-benar mengirim pesan ke server yang sama tidak kesalahan diperiksa. 565 00:25:05,300 --> 00:25:08,380 >> Jadi ini lebih dari keputusan user interface 566 00:25:08,380 --> 00:25:13,060 daripada aktual teknis improvement-- menerapkan 567 00:25:13,060 --> 00:25:14,410 sisi client sesuatu seperti ini. 568 00:25:14,410 --> 00:25:16,800 Jadi sekarang sekilas, tapi kemudian Saya akan tunduk kepada berjalan secara online 569 00:25:16,800 --> 00:25:17,674 melalui untuk yang satu ini. 570 00:25:17,674 --> 00:25:21,480 Dalam bentuk dua, kami benar-benar pergi melalui dan dibersihkan kode sedikit. 571 00:25:21,480 --> 00:25:23,650 Tapi biarkan aku tunduk kepada satu video kita akan cenderung 572 00:25:23,650 --> 00:25:27,970 embed di Pset8 yang hanya menunjukkan Anda sintaks mirip dengan sebuah perpustakaan yang disebut 573 00:25:27,970 --> 00:25:32,320 jQuery, yang merupakan super, super Perpustakaan populer di JavaScript 574 00:25:32,320 --> 00:25:34,510 yang terus terang kebanyakan orang hanya menggunakan hari ini 575 00:25:34,510 --> 00:25:37,070 dan bahkan membingungkan sebagai makhluk JavaScript itu sendiri. 576 00:25:37,070 --> 00:25:38,950 >> Dan cenderung melibatkan beberapa tanda-tanda dolar 577 00:25:38,950 --> 00:25:41,350 dan kata kunci seperti dokumen dalam tanda kurung di sini. 578 00:25:41,350 --> 00:25:44,480 Tapi sekali lagi, biarkan aku tunduk kepada beberapa tutorial online lebih lambat 579 00:25:44,480 --> 00:25:46,750 daripada mendapatkan diikat hanya dalam sintaks. 580 00:25:46,750 --> 00:25:48,630 Mari kita beralih ke sesuatu sedikit lebih dingin 581 00:25:48,630 --> 00:25:50,520 dalam hal aplikasi ini. 582 00:25:50,520 --> 00:25:57,730 >> Jadi secara khusus, biarkan aku pergi depan dan membuka ini di sini. 583 00:25:57,730 --> 00:25:58,340 Ayo. 584 00:25:58,340 --> 00:25:59,380 Di sana kami pergi. 585 00:25:59,380 --> 00:26:01,500 >> Mari saya membuka gambar ini di sini. 586 00:26:01,500 --> 00:26:03,450 Tidak perlu rumit mencari, tetapi 587 00:26:03,450 --> 00:26:07,880 menjelaskan teknik yang disebut AJAX-- Asynchronous JavaScript and XML, di mana 588 00:26:07,880 --> 00:26:10,530 X untuk XML sebenarnya tidak lagi benar-benar digunakan. 589 00:26:10,530 --> 00:26:13,430 Hal ini cenderung untuk menggunakan sesuatu lain disebut JSON. 590 00:26:13,430 --> 00:26:16,560 >> Tapi di sini adalah bagaimana sesuatu seperti Google Maps atau Google Earth bekerja. 591 00:26:16,560 --> 00:26:18,060 Mari kita coba ini dengan cepat, benar-benar. 592 00:26:18,060 --> 00:26:21,590 Biarkan aku pergi ke depan dan membuka Chrome pada browser saya. 593 00:26:21,590 --> 00:26:26,236 >> Dan biarkan aku masuk ke dalam, mengatakan, maps.google.com. 594 00:26:26,236 --> 00:26:29,260 595 00:26:29,260 --> 00:26:31,930 Dan sebenarnya, jika Anda tua cukup untuk mengingat apa, 596 00:26:31,930 --> 00:26:35,600 seperti, MapQuest seperti kembali pada hari, dan mungkin mereka masih bekerja seperti ini. 597 00:26:35,600 --> 00:26:38,870 Bila Anda digunakan untuk mencari something-- 33 Oxford Street, Cambridge, Mass, 598 00:26:38,870 --> 00:26:40,650 mari kita lakukan this-- Anda benar-benar akan, jika Anda 599 00:26:40,650 --> 00:26:43,000 ingin menggeser naik dan bawah, kiri dan kanan, 600 00:26:43,000 --> 00:26:44,920 Anda akan terlihat seperti panah besar di atas, dan itu 601 00:26:44,920 --> 00:26:46,921 akan menampilkan lain kerangka peta di sini. 602 00:26:46,921 --> 00:26:49,753 Atau Anda akan klik kiri dan Anda akan pergi ke sini, atau klik lain 603 00:26:49,753 --> 00:26:51,000 dan Anda akan pergi ke sini. 604 00:26:51,000 --> 00:26:53,000 Tapi bukannya ini hari, kita tentu saja 605 00:26:53,000 --> 00:26:55,970 mengambil begitu saja bahwa kita bisa pergi sekitar Cambridge cukup cepat 606 00:26:55,970 --> 00:26:57,550 hanya dengan mengklik dan menyeret. 607 00:26:57,550 --> 00:26:59,130 Tapi perhatikan ada beberapa gangguan. 608 00:26:59,130 --> 00:27:02,160 >> Jika saya melakukan ini cukup cepat, apa yang tampaknya terjadi 609 00:27:02,160 --> 00:27:05,960 seperti yang saya tarik sedikit terlalu cepat untuk komputer untuk menjaga? 610 00:27:05,960 --> 00:27:07,160 Apa yang Anda lihat? 611 00:27:07,160 --> 00:27:07,660 Ya. 612 00:27:07,660 --> 00:27:09,232 >> AUDIENCE: Pixel jangan me-refresh. 613 00:27:09,232 --> 00:27:10,940 DAVID J. Malan: The piksel jangan me-refresh. 614 00:27:10,940 --> 00:27:12,870 Ada actually-- dan Anda bisa melihat ini, sebenarnya, 615 00:27:12,870 --> 00:27:15,360 jika Anda menonton secara online dan jeda ini atau benar-benar memperlambat segalanya 616 00:27:15,360 --> 00:27:18,600 untuk once-- Anda akan melihat bahwa ada ubin, kotak, atau persegi panjang yang 617 00:27:18,600 --> 00:27:22,040 hilang dari peta sampai sepersekian detik kemudian, lebih banyak data, 618 00:27:22,040 --> 00:27:24,390 lebih gambar sebenarnya muncul di layar. 619 00:27:24,390 --> 00:27:29,810 Dan pada kenyataannya, jika kita melakukan ini dengan melihat up Chrome's-- katakanlah, Chrome-- 620 00:27:29,810 --> 00:27:30,310 mari kita lihat. 621 00:27:30,310 --> 00:27:31,090 Kami tidak bisa melakukan itu. 622 00:27:31,090 --> 00:27:31,860 >> Oh, whoops. 623 00:27:31,860 --> 00:27:34,761 Mari kita membuka maps.google.com. 624 00:27:34,761 --> 00:27:36,660 Mari saya membuat jendela yang lebih besar lagi. 625 00:27:36,660 --> 00:27:38,836 >> Kembali ke 33 Oxford Street. 626 00:27:38,836 --> 00:27:42,010 627 00:27:42,010 --> 00:27:43,760 Apa situs aku berada di baru-baru ini? 628 00:27:43,760 --> 00:27:46,440 Aku punya ini, seperti, kata-kata kasar swasta untuk diri sendiri bahwa saya akan kemudian instant message 629 00:27:46,440 --> 00:27:48,470 setiap teman yang online yang ingin mendengarnya. 630 00:27:48,470 --> 00:27:49,345 Ada beberapa situs web. 631 00:27:49,345 --> 00:27:52,680 Saya pikir itu Comcast-- jadi ISP Amerika sangat besar. 632 00:27:52,680 --> 00:27:56,355 Anda dapat, saat mendaftar untuk kabel baru layanan modem atau layanan TV kabel, 633 00:27:56,355 --> 00:27:59,230 mereka memiliki bentuk sangat cukup di mana mereka meminta Anda untuk alamat Anda. 634 00:27:59,230 --> 00:28:01,450 Dan memiliki menakjubkan ini fitur yang disebut auto complete, 635 00:28:01,450 --> 00:28:04,600 seperti Google, yang mulai mengisi dalam jawaban atas pertanyaan Anda. 636 00:28:04,600 --> 00:28:08,090 >> Masalahnya adalah, mereka melakukan auto complete pada hal-hal pertama yang Anda ketik. 637 00:28:08,090 --> 00:28:12,890 Jadi jika Anda mulai mengetik di 33, itu akan menunjukkan Anda benar-benar setiap rumah 638 00:28:12,890 --> 00:28:15,790 di Amerika yang dimulai dengan nomor 33 639 00:28:15,790 --> 00:28:17,920 sebelum melanjutkan ke mengharapkan Anda untuk mengetik lebih. 640 00:28:17,920 --> 00:28:20,660 Jadi jika Anda mengetik 33 Oxford, maka hal itu menunjukkan Anda setiap jalan 641 00:28:20,660 --> 00:28:24,726 di Amerika yang memiliki 33 Oxford di namanya, terlepas dari kota 642 00:28:24,726 --> 00:28:25,350 bahwa Anda berada di. 643 00:28:25,350 --> 00:28:26,320 >> Dan kemudian Anda terus mengetik. 644 00:28:26,320 --> 00:28:28,930 Dan akhirnya, ia menyadari bahwa mereka tidak menawarkan layanan ke rumah Anda di Cambridge 645 00:28:28,930 --> 00:28:29,920 atau sesuatu seperti itu. 646 00:28:29,920 --> 00:28:33,410 Tapi yang penting, ini adalah yang paling pelaksanaan bodoh auto 647 00:28:33,410 --> 00:28:34,140 menyelesaikan pernah. 648 00:28:34,140 --> 00:28:36,400 >> Dan aku hanya pergi di singgung ini lagi. 649 00:28:36,400 --> 00:28:39,040 Tapi ada cara yang baik untuk menggunakan JavaScript dan cara-cara yang buruk. 650 00:28:39,040 --> 00:28:40,750 Dan itu belum tentu yang terbaik. 651 00:28:40,750 --> 00:28:46,360 >> Tapi titik di sini, sebelum ini omelan, adalah untuk membuka alat di sini 652 00:28:46,360 --> 00:28:49,480 dan membuka alat pengembang, seperti yang telah kita didorong sebelumnya, 653 00:28:49,480 --> 00:28:52,840 dan untuk menonton Jaringan tab seperti yang saya klik sangat cepat. 654 00:28:52,840 --> 00:28:55,400 Dan melihat seluruh bunch dari mendapatkan permintaan yang terjadi. 655 00:28:55,400 --> 00:28:57,310 Semua ini terjadi sejak aku diseret. 656 00:28:57,310 --> 00:29:00,170 >> Dan kemungkinan besar, memang banyak baris ini 657 00:29:00,170 --> 00:29:04,060 sekarang adalah gambar slash JPEG Jenis MIME atau jenis konten. 658 00:29:04,060 --> 00:29:07,750 Itu karena apa krom lakukan setiap kali saya klik dan drag, klik 659 00:29:07,750 --> 00:29:11,650 dan drag, adalah itu menyadari, oh, saya perlu pergi meminta Google untuk ubin 660 00:29:11,650 --> 00:29:15,080 di peta itu di sini, cepat download melalui HTTP, 661 00:29:15,080 --> 00:29:19,550 dan kemudian menambahkannya ke apa yang disebut DOM ke browser web di pohon memori 662 00:29:19,550 --> 00:29:24,430 representasi sehingga pengguna, saya, melihat bahwa ubin diperbarui. 663 00:29:24,430 --> 00:29:26,795 Dan ini adalah karena teknik yang disebut AJAX. 664 00:29:26,795 --> 00:29:28,920 Kembali pada hari, itu benar-benar adalah kasus bahwa jika Anda 665 00:29:28,920 --> 00:29:33,050 ingin mengubah apa yang ada di layar, Anda harus klik atas, bawah, kiri, 666 00:29:33,050 --> 00:29:33,550 benar. 667 00:29:33,550 --> 00:29:34,740 Dan kemudian halaman baru akan terbuka. 668 00:29:34,740 --> 00:29:36,531 Tapi hari ini, semuanya lebih dinamis. 669 00:29:36,531 --> 00:29:40,490 Hal ini terjadi dalam cara kita manusia akan berharap itu benar-benar akan secara interaktif. 670 00:29:40,490 --> 00:29:43,210 Dan itu mencapai ini dengan cara teknik yang disebut 671 00:29:43,210 --> 00:29:46,170 AJAX, yang mungkin terbaik dijelaskan oleh contoh. 672 00:29:46,170 --> 00:29:49,730 Pertama, biarkan aku pergi ke depan dan membuka file 673 00:29:49,730 --> 00:29:53,540 disebut quote.php di kode distribusi hari ini. 674 00:29:53,540 --> 00:29:56,200 >> Dan kemudian membiarkan saya melakukan whoops symbol--. 675 00:29:56,200 --> 00:30:02,399 Biarkan aku melakukan simbol = GOOG untuk hanya beberapa saham. 676 00:30:02,399 --> 00:30:04,440 Atau sebenarnya, mari kita lakukan salah satu dari Pset GRATIS. 677 00:30:04,440 --> 00:30:05,270 Enter. 678 00:30:05,270 --> 00:30:06,580 >> Dan sekarang melihat apa yang saya dapatkan kembali. 679 00:30:06,580 --> 00:30:09,210 Jadi ini adalah benar-benar file PHP pendek yang saya 680 00:30:09,210 --> 00:30:13,210 menulis bahwa hanya meminjam kode dari fungsi lookup Pset7 ini 681 00:30:13,210 --> 00:30:17,830 dan meludah keluar menggunakan penjepit keriting ini dan kutipan dan notasi usus besar, tampaknya, 682 00:30:17,830 --> 00:30:22,747 harga saham saat ini untuk perusahaan yang Anda lulus dalam melalui get. 683 00:30:22,747 --> 00:30:24,580 Jadi ini berbeda dari sebagian besar dari apa yang kita sudah 684 00:30:24,580 --> 00:30:26,496 dilakukan dalam bahwa pemberitahuan saya harfiah menyemburkan 685 00:30:26,496 --> 00:30:27,870 apa yang tampak seperti kode JavaScript. 686 00:30:27,870 --> 00:30:30,020 >> Bahkan, ini adalah objek JavaScript. 687 00:30:30,020 --> 00:30:34,130 Bahkan, hanya untuk lebih jelas, JavaScript Object Notation-- JSON-- 688 00:30:34,130 --> 00:30:38,330 adalah cara mewah untuk mengatakan bahwa Anda dapat mewakili data dalam JavaScript jauh 689 00:30:38,330 --> 00:30:41,660 seperti Anda dapat dalam PHP menggunakan pasangan nilai kunci. 690 00:30:41,660 --> 00:30:44,270 Jadi jika saya ingin menyatakan variabel dalam JavaScript 691 00:30:44,270 --> 00:30:47,872 untuk mewakili Zamyla, untuk instance-- struct untuk Zamyla-- 692 00:30:47,872 --> 00:30:49,580 dan kita akan menyebutnya mahasiswa, variabel ini. 693 00:30:49,580 --> 00:30:53,060 ID nya adalah satu, rumah Winthrop, dan namanya Zamyla. 694 00:30:53,060 --> 00:30:55,490 >> Tapi saya juga dapat memiliki sebuah array dari objek. 695 00:30:55,490 --> 00:30:58,710 Jadi jika saya benar-benar ingin memiliki array dalam JavaScript yang berisi 696 00:30:58,710 --> 00:31:01,740 beberapa objek seperti, ini waktu mewakili staf, 697 00:31:01,740 --> 00:31:04,910 Saya mungkin memiliki ketiga potongan kode kembali 698 00:31:04,910 --> 00:31:08,560 untuk kembali ke belakang untuk ini tiga mantan anggota staf. 699 00:31:08,560 --> 00:31:12,201 Jadi sintaks, cukup mirip dengan both-- ke PHP. 700 00:31:12,201 --> 00:31:13,700 Tapi ini sangat JavaScript. 701 00:31:13,700 --> 00:31:15,940 Ini notasi objek. 702 00:31:15,940 --> 00:31:17,240 Jadi apa ini berguna untuk? 703 00:31:17,240 --> 00:31:21,580 >> Jika saya menulis kode yang meludah keluar JSON-- JavaScript Object Notation-- hal-hal yang 704 00:31:21,580 --> 00:31:24,670 terlihat seperti ini atau hal-hal yang terlihat seperti struktur Zamyla ini, 705 00:31:24,670 --> 00:31:27,730 Aku benar-benar dapat menggunakan ini dalam program saya menulis. 706 00:31:27,730 --> 00:31:30,660 Biarkan aku pergi ke ajax0.html. 707 00:31:30,660 --> 00:31:33,310 Dan ini too-- tidak banyak pikir diberikan kepada estetika. 708 00:31:33,310 --> 00:31:34,660 Tapi lihat apa yang terjadi. 709 00:31:34,660 --> 00:31:37,050 >> Biarkan aku pergi ke depan dan ketik gratis di sini. 710 00:31:37,050 --> 00:31:38,490 Klik mendapatkan penawaran. 711 00:31:38,490 --> 00:31:41,060 Dan perhatikan URL belum berubah. 712 00:31:41,060 --> 00:31:47,250 Tapi aku mendapatkan pop up dengan rupanya harga saham penny hari ini $ 0,15. 713 00:31:47,250 --> 00:31:49,062 Jadi tidak semua yang buruk. 714 00:31:49,062 --> 00:31:52,020 Tetapi perbedaannya adalah bahwa entah bagaimana, Data ini kembali ke saya secara langsung. 715 00:31:52,020 --> 00:31:54,250 Tapi mari kita mengambil langkah menuju sesuatu yang lebih familiar. 716 00:31:54,250 --> 00:31:58,900 Dalam versi satu ini, izinkan saya ketik gratis lagi, klik Dapatkan kutipan, 717 00:31:58,900 --> 00:32:01,146 dan sekarang-- oh, ini adalah sebenarnya versi jQuery. 718 00:32:01,146 --> 00:32:03,270 Jadi mari me-- aku tidak cepat maju cukup jauh. 719 00:32:03,270 --> 00:32:05,830 Biarkan aku pergi ke versi dua, yang mana saya ingin. 720 00:32:05,830 --> 00:32:07,260 Perhatikan apa yang saya lakukan di sini. 721 00:32:07,260 --> 00:32:10,370 Aku punya web page-- super Versi sederhana dari setiap halaman web 722 00:32:10,370 --> 00:32:14,260 Anda mungkin menggunakan hari ini dengan field teks di sini secara gratis dan kemudian tampaknya hanya 723 00:32:14,260 --> 00:32:14,880 teks. 724 00:32:14,880 --> 00:32:16,860 >> Ini bukan bentuk di sini, rupanya. 725 00:32:16,860 --> 00:32:19,360 Tapi kalau aku klik mendapatkan kutipan, perhatikan halaman web saya 726 00:32:19,360 --> 00:32:22,760 akan berubah seolah-olah saya baru saja mendapat pesan cepat baru 727 00:32:22,760 --> 00:32:25,360 atau seolah-olah aku baru saja pindah peta dan diperlukan untuk mendapatkan lebih banyak data 728 00:32:25,360 --> 00:32:29,220 ditambahkan secara dinamis ke halaman web tanpa perubahan URL dan pengguna 729 00:32:29,220 --> 00:32:30,980 Pengalaman mendapatkan terganggu. 730 00:32:30,980 --> 00:32:35,750 Memang, aku masih di persis ajax2.html place-- sama. 731 00:32:35,750 --> 00:32:39,080 >> Jadi mari kita lihat hanya pada contoh ini dan melihat bagaimana hal ini terjadi. 732 00:32:39,080 --> 00:32:42,490 Biarkan aku pergi ke ajax2.html. 733 00:32:42,490 --> 00:32:44,770 Dan perhatikan bentuk pertama. 734 00:32:44,770 --> 00:32:47,092 >> Di sini, aku berubah off otomatis lengkap. 735 00:32:47,092 --> 00:32:48,800 Kadang-kadang mendapat menjengkelkan jika browser 736 00:32:48,800 --> 00:32:50,508 mencoba menampilkan Seluruh sejarah Anda. 737 00:32:50,508 --> 00:32:53,450 Jadi Anda bisa melakukannya di HTML oleh hanya mengatakan auto menyelesaikan off. 738 00:32:53,450 --> 00:32:57,290 >> Aku telah diberi teks ini lapangan symbol-- lebih tepatnya, sebuah ID simbol. 739 00:32:57,290 --> 00:32:58,977 Dan sekarang, ini adalah fitur yang menarik. 740 00:32:58,977 --> 00:33:01,310 Kami belum berbicara tentang rentang, tetapi Anda dapat berpikir tentang hal ini 741 00:33:01,310 --> 00:33:03,177 seperti tag paragraf atau tag div. 742 00:33:03,177 --> 00:33:05,010 Ini apa yang disebut in-line elemen, yang 743 00:33:05,010 --> 00:33:07,415 berarti Anda tidak akan mendapatkan paragraf istirahat di atas dan di bawahnya. 744 00:33:07,415 --> 00:33:11,530 Ini hanya akan tinggal in-line tanpa memukul setara masukkan. 745 00:33:11,530 --> 00:33:17,980 Jadi saya telah memberikan potongan ini HTML akan ditentukan pengenal unik 746 00:33:17,980 --> 00:33:20,130 bahwa saya sewenang-wenang disebut harga. 747 00:33:20,130 --> 00:33:21,560 Dan aku punya tombol Submit. 748 00:33:21,560 --> 00:33:25,420 >> Karena sekarang sampai di sini-dan ini adalah sebenarnya sangat menakjubkan kode betapa sedikit 749 00:33:25,420 --> 00:33:27,660 Anda dapat menulis untuk melakukan relatif rapi things-- 750 00:33:27,660 --> 00:33:31,800 melihat apa yang saya lakukan di sini jika saya gulir ke atas ke kepala halaman ini. 751 00:33:31,800 --> 00:33:34,970 Saya telah menyertakan pertama dalam kepalaku tag script 752 00:33:34,970 --> 00:33:37,410 yang benar-benar referensi JavaScript mengajukan tempat lain. 753 00:33:37,410 --> 00:33:39,702 Ini dari organisasi yang menulis jQuery, 754 00:33:39,702 --> 00:33:42,660 dan ini hanya memberikan Anda terbaru Versi perpustakaan jQuery mereka. 755 00:33:42,660 --> 00:33:46,305 >> Jadi ini adalah jenis seperti tajam termasuk di C atau butuhkan dalam PHP. 756 00:33:46,305 --> 00:33:48,900 Anda menggunakan tag script dengan atribut sumber. 757 00:33:48,900 --> 00:33:52,030 Tapi sekarang kode sendiri adalah akan menjadi benar di sini. 758 00:33:52,030 --> 00:33:54,170 >> Perhatikan Saya memiliki fungsi yang disebut Quotes. 759 00:33:54,170 --> 00:33:56,180 Dan itu terlihat sedikit samar pada pandangan pertama. 760 00:33:56,180 --> 00:33:57,305 Tapi mari kita menggoda ini terpisah. 761 00:33:57,305 --> 00:33:59,090 Beri aku sebuah variabel yang disebut URL. 762 00:33:59,090 --> 00:34:01,390 Menetapkan harfiah string ini. 763 00:34:01,390 --> 00:34:04,530 Jadi, tanda kutip tunggal, tanda kutip ganda di JavaScript hanya memberi saya sebuah string. 764 00:34:04,530 --> 00:34:06,900 Apa plus lakukan? 765 00:34:06,900 --> 00:34:08,199 Rangkaian. 766 00:34:08,199 --> 00:34:12,610 >> Jadi sekarang ini adalah sintaks jQuery yang membutuhkan sedikit membiasakan diri. 767 00:34:12,610 --> 00:34:18,310 Tapi ini hanya berarti pergi mendapatkan saya DOM simpul yang identifier unik adalah simbol. 768 00:34:18,310 --> 00:34:21,929 Hashtag ada artinya simbol identifikasi unik. 769 00:34:21,929 --> 00:34:24,929 >> Tanda dolar di Kurung hanya berarti, membungkus ini 770 00:34:24,929 --> 00:34:28,510 di jQuery semacam saus rahasia sehingga Anda mendapatkan fungsi tambahan. 771 00:34:28,510 --> 00:34:31,880 Dan kemudian val tampaknya fungsi, atau seperti yang kita katakan sekarang, 772 00:34:31,880 --> 00:34:35,219 metode dalam node ini yang hanya memberi Anda nilai. 773 00:34:35,219 --> 00:34:38,896 Jadi singkatnya, jelek dan membingungkan karena hal ini terlihat pada pandangan pertama, 774 00:34:38,896 --> 00:34:42,020 ini hanya berarti mendapatkan dengan pengguna mengetik di, letakkan di bagian akhir string 775 00:34:42,020 --> 00:34:42,880 dengan menggabungkan itu. 776 00:34:42,880 --> 00:34:43,739 Itu saja. 777 00:34:43,739 --> 00:34:46,070 >> Jadi sekarang, tiga baris terakhir. 778 00:34:46,070 --> 00:34:48,690 Anda dapat memeras banyak fungsi dari tiga baris. 779 00:34:48,690 --> 00:34:52,199 Tanda dolar ini, sebagai samping, hanya nama panggilan 780 00:34:52,199 --> 00:34:55,800 untuk variabel global khusus disebut harfiah jQuery. 781 00:34:55,800 --> 00:34:57,060 >> Dolar tanda hanya terlihat keren. 782 00:34:57,060 --> 00:35:00,080 Jadi masyarakat jQuery hanya jenis digunakan sebagai simbol khusus mereka. 783 00:35:00,080 --> 00:35:02,470 Ini tidak berarti apa artinya dalam PHP. 784 00:35:02,470 --> 00:35:06,356 Dalam JavaScript, tanda dolar adalah hanya seperti huruf alfabet 785 00:35:06,356 --> 00:35:07,480 atau nomor untuk variabel. 786 00:35:07,480 --> 00:35:09,000 >> Anda hanya dapat memilikinya sebagai nama. 787 00:35:09,000 --> 00:35:09,770 Hanya terlihat keren. 788 00:35:09,770 --> 00:35:11,890 Jadi masyarakat diadopsi sebagai nama panggilan 789 00:35:11,890 --> 00:35:13,390 untuk perpustakaan mereka sendiri yang disebut jQuery. 790 00:35:13,390 --> 00:35:15,060 >> Dan itu super populer. 791 00:35:15,060 --> 00:35:17,620 Jadi bisa JSON adalah persis seperti itu. 792 00:35:17,620 --> 00:35:19,920 Ini fungsi yang Orang-orang di jQuery menulis 793 00:35:19,920 --> 00:35:23,340 yang mendapat JSON dari server-- sebuah JavaScript Object Notation. 794 00:35:23,340 --> 00:35:25,680 Dari apa URL itu akan untuk mendapatkan informasi tersebut? 795 00:35:25,680 --> 00:35:27,790 Rupanya dari URL ini di sini. 796 00:35:27,790 --> 00:35:31,180 >> Dan apa yang harus browser lakukan sebagai Begitu mendapat kembali respon ini? 797 00:35:31,180 --> 00:35:36,500 Dan ini adalah keajaiban AJAX, sehingga untuk speak-- Asynchronous JavaScript di XML. 798 00:35:36,500 --> 00:35:41,320 Sulit untuk melihat dengan seperti contoh sederhana seperti yang kita punya di sini. 799 00:35:41,320 --> 00:35:44,730 >> Tapi ini asynchronous dalam arti bahwa kode saya ketika 800 00:35:44,730 --> 00:35:48,530 dieksekusi mengirim pesan ke server untuk pergi mendapatkan saya beberapa JSON. 801 00:35:48,530 --> 00:35:51,340 Dan itu terjadi super cepat bahwa saya mendapat respons. 802 00:35:51,340 --> 00:35:55,130 Namun yang menarik adalah bahwa ini baris kode tidak menggantung komputer saya. 803 00:35:55,130 --> 00:35:56,550 >> Aku tidak melihat ikon berputar. 804 00:35:56,550 --> 00:35:59,200 Aku tidak kehilangan kemampuan untuk menggerakkan mouse saya. 805 00:35:59,200 --> 00:36:01,340 Browser saya adalah benar-benar baik-baik saja. 806 00:36:01,340 --> 00:36:06,290 >> Karena cara JavaScript menangani respon dari server adalah sebagai berikut. 807 00:36:06,290 --> 00:36:09,740 Anda mendaftar apa yang Anda sebut fungsi callback, yang 808 00:36:09,740 --> 00:36:12,830 hanya berarti, hei, JavaScript. 809 00:36:12,830 --> 00:36:16,100 Begitu server merespon dengan JSON, 810 00:36:16,100 --> 00:36:18,750 hubungi fungsi anonim ini. 811 00:36:18,750 --> 00:36:23,910 >> Dan tolong masuk ke fungsi ini tali apa pun server meludahkan 812 00:36:23,910 --> 00:36:26,080 sebagai argumen disebut data. 813 00:36:26,080 --> 00:36:28,360 Jadi lain, kata-kata, jika Aku perakitan secara dinamis 814 00:36:28,360 --> 00:36:33,370 sebuah quote.php URL lewat di ini simbol seperti GRATIS atau GOOG atau entah apa lagi, 815 00:36:33,370 --> 00:36:36,830 Saya kemudian memberitahu JavaScript pergi mendapatkan URL itu. 816 00:36:36,830 --> 00:36:39,080 Ingat bahwa browser akan kembali sesuatu 817 00:36:39,080 --> 00:36:42,680 yang terlihat seperti kita melihat earlier-- ini. 818 00:36:42,680 --> 00:36:45,940 >> Dan apa argumen kedua di sini untuk mendapatkan JSON mengatakan 819 00:36:45,940 --> 00:36:48,450 adalah memanggil fungsi ini ketika server akan kembali 820 00:36:48,450 --> 00:36:52,440 apakah itu 10 milidetik dari sekarang atau 10 detik dari sekarang. 821 00:36:52,440 --> 00:36:55,840 Dan segera setelah Anda lakukan, menambahkan harga ke halaman. 822 00:36:55,840 --> 00:36:58,030 Sintaks ini di sini hanya berarti pergi mendapatkan node 823 00:36:58,030 --> 00:37:01,940 dari pohon yang identifier unik adalah price-- bahwa rentang kita lihat sebelumnya. 824 00:37:01,940 --> 00:37:04,320 >> Metode ini disebut HTML hanya mengatakan, pergi menggantikan 825 00:37:04,320 --> 00:37:08,770 HTML yang ada dengan data.price. 826 00:37:08,770 --> 00:37:10,200 Apa data.price? 827 00:37:10,200 --> 00:37:12,850 Nah, browser, ingat, kepadaku datang kembali. 828 00:37:12,850 --> 00:37:14,540 Jadi ini adalah data. 829 00:37:14,540 --> 00:37:18,100 >> Dan jadi agak samar untuk melihat koma di sini. 830 00:37:18,100 --> 00:37:19,350 Namun pada kenyataannya, biarkan aku melakukan ini. 831 00:37:19,350 --> 00:37:22,890 Biarkan aku hanya paste ini sangat cepat dalam gedit 832 00:37:22,890 --> 00:37:27,240 dan menunjukkan hal ini seperti kita menunjukkan Struktur Zamyla sebelumnya. 833 00:37:27,240 --> 00:37:31,610 >> Apa server mengirimkan kembali adalah sedikit objek yang terlihat seperti ini. 834 00:37:31,610 --> 00:37:37,140 Dan data.price adalah hanya memberi saya 0,1515. 835 00:37:37,140 --> 00:37:39,310 Jadi banyak bergerak bagian di sini sekaligus. 836 00:37:39,310 --> 00:37:41,860 >> Tapi takeaways kunci bahwa kita memiliki kemampuan ini 837 00:37:41,860 --> 00:37:44,600 untuk membuat HTTP tambahan permintaan menggunakan JavaScript 838 00:37:44,600 --> 00:37:46,090 tanpa harus kembali halaman tersebut. 839 00:37:46,090 --> 00:37:49,580 Dan kemudian kita benar-benar dapat mengubah halaman web dengan cepat. 840 00:37:49,580 --> 00:37:51,850 Dan ternyata bahwa JavaScript dan bahasa lainnya 841 00:37:51,850 --> 00:37:54,510 dapat digunakan sekarang tidak hanya bermutasi halaman web, 842 00:37:54,510 --> 00:37:57,960 tapi untuk benar-benar menulis perangkat lunak dalam komputer yang sebenarnya, 843 00:37:57,960 --> 00:38:00,240 tidak hanya terbatas pada Chrome atau sejenisnya. 844 00:38:00,240 --> 00:38:03,530 >> Bahkan, if-- Colton, akan Anda ingin bergabung dengan kami kembali ke sini 845 00:38:03,530 --> 00:38:06,100 dengan kode lab, dan Chang juga? 846 00:38:06,100 --> 00:38:09,140 Mari kita pergi ke depan, setelah berbicara tentang fungsi anonim dan callback 847 00:38:09,140 --> 00:38:13,090 dan benar-benar menggoda nasib di sini dengan live demo dengan perdarahan 848 00:38:13,090 --> 00:38:16,480 teknologi mutakhir, salah satu perangkat Elite Gerak ini. 849 00:38:16,480 --> 00:38:18,940 Sekarang, perangkat ini, ingat, adalah perangkat USB kecil 850 00:38:18,940 --> 00:38:25,620 serta itu-- itu beautiful-- yang tancapkan ke port USB Anda. 851 00:38:25,620 --> 00:38:29,120 >> Dan kemudian memberikan masukan dalam bentuk gerakan manusia 852 00:38:29,120 --> 00:38:32,560 dengan mendeteksi menggunakan sinar inframerah, dasarnya, gerakan dari lengan Anda. 853 00:38:32,560 --> 00:38:35,150 Jadi sementara apa yang Maria mencoba sebelum berotot, 854 00:38:35,150 --> 00:38:39,000 benar-benar merasakan apa yang berubah lengan Anda, ini adalah inframerah berbasis. 855 00:38:39,000 --> 00:38:44,390 Jadi itu mencari gerakan dalam jenis bola dari kaki atau lebih 856 00:38:44,390 --> 00:38:46,190 dari perangkat itu sendiri. 857 00:38:46,190 --> 00:38:48,950 >> Jadi kenapa tidak saya ambil menusuk pertama ini? 858 00:38:48,950 --> 00:38:53,100 Dan mari kita pergi ke depan dan melemparkan Anda sampai pada overhead sini. 859 00:38:53,100 --> 00:38:56,250 Jadi mari kita menempatkan laptop Colton di sini. 860 00:38:56,250 --> 00:38:58,360 Kami punya Andrew di TV. 861 00:38:58,360 --> 00:39:00,160 Dan apa yang Anda ingin saya lakukan pertama? 862 00:39:00,160 --> 00:39:02,409 >> COLTON: Pergi ke depan dan hanya menempatkan tangan di atas orang ini 863 00:39:02,409 --> 00:39:04,430 dan Anda akan melihat beberapa kilau yang luar biasa. 864 00:39:04,430 --> 00:39:07,230 >> DAVID J. Malan: Very nice. 865 00:39:07,230 --> 00:39:11,110 Ini semua terjadi secara real time. 866 00:39:11,110 --> 00:39:11,889 OK. 867 00:39:11,889 --> 00:39:12,680 Baiklah, dan yep. 868 00:39:12,680 --> 00:39:14,119 Begitu baik. 869 00:39:14,119 --> 00:39:15,410 Baiklah, apa lagi yang bisa kita lakukan? 870 00:39:15,410 --> 00:39:17,900 >> COLTON: Pergi ke layar berikutnya dan melihat. 871 00:39:17,900 --> 00:39:19,136 >> DAVID J. Malan: Baiklah. 872 00:39:19,136 --> 00:39:21,780 >> COLTON: Sebuah permainan kecil yang menyenangkan di mana Anda bisa membuat robot. 873 00:39:21,780 --> 00:39:24,738 >> DAVID J. Malan: Baiklah, jadi ini adalah tangan palsu menunjukkan kepada saya apa yang harus dilakukan. 874 00:39:24,738 --> 00:39:27,920 COLTON: Ya Jadi silakan dan ambil salah satu blok 875 00:39:27,920 --> 00:39:30,637 dan meletakkannya di atas tubuh yang robot. 876 00:39:30,637 --> 00:39:32,137 DAVID J. Malan: Oh, ada tanganku. 877 00:39:32,137 --> 00:39:34,000 Oh. 878 00:39:34,000 --> 00:39:34,780 OK, menggemaskan. 879 00:39:34,780 --> 00:39:37,500 880 00:39:37,500 --> 00:39:38,650 Tunggu sebentar, OK. 881 00:39:38,650 --> 00:39:41,320 Di sana kami pergi. 882 00:39:41,320 --> 00:39:43,590 >> COLTON: Saya membuat satu kecelakaan. 883 00:39:43,590 --> 00:39:45,423 >> DAVID J. Malan: OK, saya akan mendapatkan orang ini. 884 00:39:45,423 --> 00:39:45,923 Sialan! 885 00:39:45,923 --> 00:39:48,467 886 00:39:48,467 --> 00:39:51,550 Ketika kami berlatih terakhir ini malam, Anda tahu apa ini diserahkan ke? 887 00:39:51,550 --> 00:39:54,285 >> Seperti ini. 888 00:39:54,285 --> 00:39:55,490 OK. 889 00:39:55,490 --> 00:39:55,990 Berikutnya satu? 890 00:39:55,990 --> 00:39:56,860 >> COLTON: Tentu. 891 00:39:56,860 --> 00:39:58,818 >> DAVID J. Malan: Baiklah, dan ada yang ketiga. 892 00:39:58,818 --> 00:40:01,130 893 00:40:01,130 --> 00:40:01,674 Baik. 894 00:40:01,674 --> 00:40:03,215 COLTON: Dan dalam satu ini, Anda mendapatkan to-- 895 00:40:03,215 --> 00:40:04,923 DAVID J. Malan: Oh, satu ini indah. 896 00:40:04,923 --> 00:40:06,650 COLTON: --yeah, memilih selain bunga ini. 897 00:40:06,650 --> 00:40:07,441 DAVID J. Malan: OK. 898 00:40:07,441 --> 00:40:11,170 899 00:40:11,170 --> 00:40:11,670 Tidak ada? 900 00:40:11,670 --> 00:40:14,515 Terjawab. 901 00:40:14,515 --> 00:40:15,570 >> COLTON: Oh, di sana Anda pergi. 902 00:40:15,570 --> 00:40:18,680 >> DAVID J. Malan: Ah, Lihat itu. 903 00:40:18,680 --> 00:40:19,830 Sangat bagus. 904 00:40:19,830 --> 00:40:22,470 Nah, kenapa tidak 'kita mengambil keluar satu relawan di sini 905 00:40:22,470 --> 00:40:24,180 yang ingin datang ke atas. 906 00:40:24,180 --> 00:40:27,500 Bagaimana di sana di hijau, apakah itu? 907 00:40:27,500 --> 00:40:30,540 >> Baiklah, dan mari kita have-- bukannya melakukan itu, beberapa dari Anda 908 00:40:30,540 --> 00:40:34,590 mungkin tahu game ini di sini- memotong tali, mungkin? 909 00:40:34,590 --> 00:40:35,100 Mari kita lihat. 910 00:40:35,100 --> 00:40:37,320 Kami memiliki gelas kami di lebih dari sini? 911 00:40:37,320 --> 00:40:38,625 >> OK. 912 00:40:38,625 --> 00:40:39,270 Terima kasih. 913 00:40:39,270 --> 00:40:39,380 Siapa namamu? 914 00:40:39,380 --> 00:40:40,350 >> AUDIENCE: Laura. 915 00:40:40,350 --> 00:40:41,266 >> DAVID J. Malan: Laura? 916 00:40:41,266 --> 00:40:42,120 Bagus untuk melihat. 917 00:40:42,120 --> 00:40:45,600 Jika Anda tidak keberatan menempatkan Google Glass lebih dari kacamata Anda. 918 00:40:45,600 --> 00:40:46,970 Ini adalah Colton. 919 00:40:46,970 --> 00:40:47,650 >> COLTON: Hi. 920 00:40:47,650 --> 00:40:48,140 Senang kenalan dengan anda. 921 00:40:48,140 --> 00:40:49,600 >> DAVID J. Malan: OK, ayolah sekitar. 922 00:40:49,600 --> 00:40:52,516 Baiklah, jadi apa yang Anda akan lakukan di sini, setelah bermain ini sebelumnya, 923 00:40:52,516 --> 00:40:55,650 adalah meletakkan tangan Anda di atas Leap Gerak sini. 924 00:40:55,650 --> 00:40:57,210 Dan sekarang panah harus bergerak. 925 00:40:57,210 --> 00:40:57,710 Oh, nggak. 926 00:40:57,710 --> 00:40:58,066 >> AUDIENCE: No. 927 00:40:58,066 --> 00:40:58,780 >> DAVID J. Malan: Kami tidak ingin berhenti belum. 928 00:40:58,780 --> 00:40:59,280 OK, tunggu. 929 00:40:59,280 --> 00:41:01,200 Di sini. 930 00:41:01,200 --> 00:41:03,530 Jadi perhatikan saat menahan Anda jari atas sesuatu, 931 00:41:03,530 --> 00:41:06,750 mouse mulai go green, yang adalah bagaimana Anda klik. 932 00:41:06,750 --> 00:41:08,980 >> Jadi membawa lebih Play. 933 00:41:08,980 --> 00:41:10,970 Dan hanya satu jari baik-baik saja. 934 00:41:10,970 --> 00:41:13,869 Dan sekarang klik pada sedikit orang hijau di sebelah kiri. 935 00:41:13,869 --> 00:41:15,410 Dan sekarang terus sampai itu mengisi hijau. 936 00:41:15,410 --> 00:41:15,640 Baik. 937 00:41:15,640 --> 00:41:16,990 Sekarang, seperti, tingkat satu di bagian atas. 938 00:41:16,990 --> 00:41:20,190 >> AUDIENCE: Ya, kita ingin tingkat satu, di sini. 939 00:41:20,190 --> 00:41:21,660 >> DAVID J. Malan: Baik. 940 00:41:21,660 --> 00:41:25,500 OK, jadi semua yang Anda miliki lakukan adalah memotong tali. 941 00:41:25,500 --> 00:41:28,240 Kursor Anda adalah satu putih di sana. 942 00:41:28,240 --> 00:41:28,880 >> Sangat bagus. 943 00:41:28,880 --> 00:41:31,290 944 00:41:31,290 --> 00:41:32,790 Baiklah, ini tentang mendapatkan lebih keras. 945 00:41:32,790 --> 00:41:34,800 Jadi tahan jari Anda di atas berikutnya sekarang. 946 00:41:34,800 --> 00:41:37,370 947 00:41:37,370 --> 00:41:39,030 Baik. 948 00:41:39,030 --> 00:41:39,999 Yang satu ini sulit. 949 00:41:39,999 --> 00:41:40,966 >> AUDIENCE: Oh crap. 950 00:41:40,966 --> 00:41:41,466 OK. 951 00:41:41,466 --> 00:41:42,466 Ia ingin pergi ke arah sana. 952 00:41:42,466 --> 00:41:44,890 Oh crap, itu-- 953 00:41:44,890 --> 00:41:47,120 >> DAVID J. Malan: Ya. 954 00:41:47,120 --> 00:41:50,700 Tujuan sekunder adalah untuk mendapatkan semua bintang. 955 00:41:50,700 --> 00:41:53,920 Baiklah, berikutnya. 956 00:41:53,920 --> 00:41:57,504 >> Mari kita lihat apakah Anda bisa mendapatkan sepertiga ini. 957 00:41:57,504 --> 00:41:58,004 Baik. 958 00:41:58,004 --> 00:42:05,980 959 00:42:05,980 --> 00:42:06,840 OK, pergi ke sana. 960 00:42:06,840 --> 00:42:08,850 >> Tentu. 961 00:42:08,850 --> 00:42:11,230 Oh, sangat bagus. 962 00:42:11,230 --> 00:42:11,930 Baik. 963 00:42:11,930 --> 00:42:13,534 >> Jadi kenapa tidak kita menunda sini hari ini? 964 00:42:13,534 --> 00:42:15,200 Biarkan orang datang up yang ingin bermain. 965 00:42:15,200 --> 00:42:16,880 Terima kasih banyak untuk Laura relawan kami. 966 00:42:16,880 --> 00:42:18,730 Dan kita akan melihat Anda pada hari Senin. 967 00:42:18,730 --> 00:42:21,190 >> AUDIENCE: Anda mungkin ingin ini kembali. 968 00:42:21,190 --> 00:42:23,640 >> SPEAKER 2: Pada CS50-- berikutnya 969 00:42:23,640 --> 00:42:35,222