1 00:00:00,000 --> 00:00:02,862 >> [MUSIC PLAYING] 2 00:00:02,862 --> 00:00:10,030 3 00:00:10,030 --> 00:00:11,580 >> DAVID Malan: Ini adalah CS50. 4 00:00:11,580 --> 00:00:12,880 Ini adalah awal minggu sembilan. 5 00:00:12,880 --> 00:00:15,797 Dan ini adalah apa yang akan menjadi ulang tahun ke-200 Mr. Boole. 6 00:00:15,797 --> 00:00:17,630 Jadi ini adalah fellows kepada siapa kita singgung sudah 7 00:00:17,630 --> 00:00:21,800 beberapa kali tentang menggunakan Variabel boolean benar dan yang salah, 8 00:00:21,800 --> 00:00:22,910 1 dan 0 dan semacamnya. 9 00:00:22,910 --> 00:00:25,270 Dan ini adalah Google upeti kepadanya hari ini. 10 00:00:25,270 --> 00:00:26,489 Dia akan berbalik 200. 11 00:00:26,489 --> 00:00:28,280 Jadi jika Anda ingin bergabung dengan kami untuk CS50 makan siang, 12 00:00:28,280 --> 00:00:30,279 lihatlah link di website kursus ini. 13 00:00:30,279 --> 00:00:33,580 Dan wajah seperti dan teman-teman sebagai ini menanti Anda di sini di Cambridge. 14 00:00:33,580 --> 00:00:35,360 Wajah seperti ini menanti Anda di New Haven. 15 00:00:35,360 --> 00:00:37,800 Dan, pada kenyataannya, Ken di New Haven ramah membuat 16 00:00:37,800 --> 00:00:41,594 apa yang disebut sebuah animasi GIF dari Eli di sini di baru-baru ini lunch-- GIF adalah belum 17 00:00:41,594 --> 00:00:44,260 format lain file grafis, dengan yang Anda familiar-- yang 18 00:00:44,260 --> 00:00:46,300 terlihat sedikit sesuatu seperti ini. 19 00:00:46,300 --> 00:00:48,179 Jadi hanya urutan of-- OK. 20 00:00:48,179 --> 00:00:49,720 Tidak ada satu di sini di Cambridge tertawa. 21 00:00:49,720 --> 00:00:51,720 Tapi di New Haven, ini benar-benar lucu, bukan? 22 00:00:51,720 --> 00:00:52,350 Baiklah. 23 00:00:52,350 --> 00:00:53,940 >> Jadi jangan bergabung dengan kami di sana. 24 00:00:53,940 --> 00:00:55,900 Di sini, di Harvard, khusus, Rabu ini, 25 00:00:55,900 --> 00:00:59,480 jika Anda seorang mahasiswa atau mahasiswa even-- atau bahkan berpikir junior-- pembuatan 26 00:00:59,480 --> 00:01:01,563 switch ke komputer ilmu pengetahuan, tahu bahwa ada akan 27 00:01:01,563 --> 00:01:04,440 akan CS menasihati adil ini Rabu, tak lama setelah kelas 28 00:01:04,440 --> 00:01:08,040 di 4:00 di komputer bangunan ilmu Maxwell Dworkin. 29 00:01:08,040 --> 00:01:11,890 Kami akan menempatkan ini di lapangan ini situs besok, juga. 30 00:01:11,890 --> 00:01:14,430 Donat, aku diberitahu, akan dilayani. 31 00:01:14,430 --> 00:01:15,180 >> Baiklah. 32 00:01:15,180 --> 00:01:18,790 Story-- jadi lucu saya menusuk di internet, 33 00:01:18,790 --> 00:01:23,575 dan saya menemukan beberapa arsip lama mantan website saya. 34 00:01:23,575 --> 00:01:25,950 Dan ternyata out-- sekitar ini waktu, tampaknya sangat tepat waktu 35 00:01:25,950 --> 00:01:28,910 karena saya mengumpulkan bahwa pemilihan UC sekitar untuk gigi lagi. 36 00:01:28,910 --> 00:01:32,230 Jadi aku berlari untuk UC, hilang total. 37 00:01:32,230 --> 00:01:34,770 Dan mungkin ini adalah di bagian sebabnya. 38 00:01:34,770 --> 00:01:37,600 Jadi ini adalah website saya pada saat itu. 39 00:01:37,600 --> 00:01:40,477 Untuk beberapa alasan, saya pikir itu ide yang baik, sebelum memberitahu orang-orang 40 00:01:40,477 --> 00:01:43,310 apa platform saya dan mengapa mereka harus memilih saya, bahwa mereka memiliki 41 00:01:43,310 --> 00:01:47,770 klik untuk masuk untuk mengetahui bahwa informasi, yang dalam retrospeksi adalah 42 00:01:47,770 --> 00:01:48,660 jenis menyeramkan. 43 00:01:48,660 --> 00:01:50,910 Saya tidak benar-benar tahu apa itu. 44 00:01:50,910 --> 00:01:53,140 >> Tapi itu pasti tidak membantu kampanye saya. 45 00:01:53,140 --> 00:01:56,874 Saya juga menemukan bahwa dengan seniornya year-- Aku punya kalender Muppet ini. 46 00:01:56,874 --> 00:01:58,540 Muppets yang agak dalam mode saat itu. 47 00:01:58,540 --> 00:01:59,456 Atau mungkin mereka tidak. 48 00:01:59,456 --> 00:02:01,790 Aku punya kalender Muppet saat itu. 49 00:02:01,790 --> 00:02:04,860 Dan saya pikir itu akan keren untuk nama komputer saya di jaringan Harvard 50 00:02:04,860 --> 00:02:07,460 frogman.student.harvard.edu. 51 00:02:07,460 --> 00:02:10,370 Pada saat itu, kita semua memiliki unik nama host diidentifikasi. 52 00:02:10,370 --> 00:02:13,150 Dan Anda bisa memilih beberapa kesombongan nama bukan nama Anda sendiri. 53 00:02:13,150 --> 00:02:15,580 Dan aku pergi dengan manusia katak untuk beberapa alasan. 54 00:02:15,580 --> 00:02:19,040 >> Dan kemudian saya started-- saya menghabiskan banyak waktu mengklik link ini 55 00:02:19,040 --> 00:02:20,280 pagi ini. 56 00:02:20,280 --> 00:02:24,690 Dan ini adalah halaman tentang saya, yang sekarang jenis tampaknya menggemaskan. 57 00:02:24,690 --> 00:02:28,210 Tetapi juga memberi kesaksian untuk hanya seberapa jauh teknologi telah datang. 58 00:02:28,210 --> 00:02:30,310 Maksudku, kembali pada hari, 486 adalah sesuatu. 59 00:02:30,310 --> 00:02:34,090 Hari-hari ini, itu super, super, super lambat dan kurang baik 60 00:02:34,090 --> 00:02:36,216 daripada yang mungkin Anda miliki di Anda kantong sendiri hari ini. 61 00:02:36,216 --> 00:02:38,465 Ada lebih dari yang ada bahkan lebih memalukan. 62 00:02:38,465 --> 00:02:39,770 Jadi saya akan berhenti di situ. 63 00:02:39,770 --> 00:02:42,640 Tapi itu adalah pertama saya terjun ke web-- oh, tidak. 64 00:02:42,640 --> 00:02:43,180 Itu tidak. 65 00:02:43,180 --> 00:02:47,000 Saya terjun nyata pertama ke pemrograman web adalah situs ini, yang saya hanya lupa. 66 00:02:47,000 --> 00:02:50,620 Di beberapa titik, saya belajar bagaimana membuat gambar latar belakang berulang-ulang. 67 00:02:50,620 --> 00:02:55,260 Dan jadi aku menemukan ubin ini efektif, seperti pemain hoki, sepak bola, dan golf 68 00:02:55,260 --> 00:02:58,040 bola, atau apa pun yang untuk situs Frosh IM. 69 00:02:58,040 --> 00:03:01,390 Dan ini benar-benar, benar-benar yang proyek berbasis web pertama saya mengambil on-- 70 00:03:01,390 --> 00:03:03,880 Saya pikir mungkin sophomore tahun, year-- junior 71 00:03:03,880 --> 00:03:07,622 setelah mengambil CS50 dan CS51, satu dari kelas tindak-on umum. 72 00:03:07,622 --> 00:03:09,330 Aku melihat di cari melalui arsip 73 00:03:09,330 --> 00:03:12,150 bahwa salah satu penerus saya dan teman, Lee, jenis berubah 74 00:03:12,150 --> 00:03:13,480 hak cipta pada dirinya sendiri. 75 00:03:13,480 --> 00:03:17,520 Tapi ini memang sesuatu yang Saya harus memiliki rasa malu untuk. 76 00:03:17,520 --> 00:03:19,370 Tapi pada saat itu, ini adalah situs web pertama, 77 00:03:19,370 --> 00:03:22,220 seperti yang saya katakan beberapa minggu yang lalu, dimana mahasiswa bisa 78 00:03:22,220 --> 00:03:24,350 mendaftar untuk olahraga intramural sini. 79 00:03:24,350 --> 00:03:27,950 Dan ternyata bahwa gambar latar belakang 80 00:03:27,950 --> 00:03:29,530 seperti yang bukan ide yang baik. 81 00:03:29,530 --> 00:03:31,840 Tapi web baru, dan kami semua bereksperimen. 82 00:03:31,840 --> 00:03:34,310 Dan ini adalah apa yang saya tampaknya melakukan pada saat itu. 83 00:03:34,310 --> 00:03:34,810 Baiklah. 84 00:03:34,810 --> 00:03:38,020 Jadi tanpa basa-basi lagi, kami beralih bersiap hari ini untuk memberikan, benar-benar, 85 00:03:38,020 --> 00:03:42,250 bagian akhir yang Anda mungkin menemukan sangat berguna untuk proyek-proyek akhir 86 00:03:42,250 --> 00:03:44,780 tetapi juga yang akan mulai membuat wide seluruh dunia 87 00:03:44,780 --> 00:03:46,680 merasa sedikit lebih dimengerti. 88 00:03:46,680 --> 00:03:49,460 Memang, kita akan memperkenalkan satu bahasa pemrograman yang lebih 89 00:03:49,460 --> 00:03:52,474 disebut JavaScript yang mirip dan berbeda dengan cara yang berbeda 90 00:03:52,474 --> 00:03:54,140 dari bahasa kita telah melihat sejauh ini. 91 00:03:54,140 --> 00:03:55,807 >> Jadi C, ingat, adalah bahasa yang dikompilasi ini. 92 00:03:55,807 --> 00:03:57,473 Anda harus menjalankannya melalui compiler. 93 00:03:57,473 --> 00:03:59,810 Anda mendapatkan kode sumber untuk objek kode, atau nol dan yang. 94 00:03:59,810 --> 00:04:03,000 Dan mereka adalah nol dan orang-orang yang CPU Anda, Central Processing Unit, 95 00:04:03,000 --> 00:04:04,360 benar-benar mengerti. 96 00:04:04,360 --> 00:04:06,610 PHP, sebaliknya, tidak bahasa yang dikompilasi. 97 00:04:06,610 --> 00:04:08,772 Ini adalah apa? 98 00:04:08,772 --> 00:04:09,980 Ini bahasa ditafsirkan. 99 00:04:09,980 --> 00:04:11,750 Jadi ada beberapa program yang disebut interpreter yang 100 00:04:11,750 --> 00:04:13,708 harus membaca atas itu-- untuk bawah, kiri ke right-- 101 00:04:13,708 --> 00:04:16,519 dan mencari tahu apa semua sintaks Anda tidak dan berarti, 102 00:04:16,519 --> 00:04:20,200 apakah itu loop atau kondisi atau nomor lain dari pemrograman 103 00:04:20,200 --> 00:04:20,740 konstruksi. 104 00:04:20,740 --> 00:04:22,210 Jadi itulah bahasa ditafsirkan. 105 00:04:22,210 --> 00:04:23,910 >> Kemudian kami memperkenalkan HTML. 106 00:04:23,910 --> 00:04:26,440 Dan HTML bahkan bukan bahasa pemrograman. 107 00:04:26,440 --> 00:04:28,110 Kami akan menyebutnya apa? 108 00:04:28,110 --> 00:04:31,650 Sebuah bahasa markup, yang hanya semacam cara mewah untuk mengatakan itu 109 00:04:31,650 --> 00:04:35,820 tidak memiliki konstruksi pemrograman seperti kami melihat bahkan kembali hari Scratch. 110 00:04:35,820 --> 00:04:36,720 Tidak ada loop. 111 00:04:36,720 --> 00:04:37,920 Tidak ada kondisi. 112 00:04:37,920 --> 00:04:40,820 Itu benar-benar bahasa tentang menandai up data Anda 113 00:04:40,820 --> 00:04:43,620 dan format atau penataan dalam beberapa cara. 114 00:04:43,620 --> 00:04:46,147 >> CSS, sementara itu, sama bukan bahasa pemrograman. 115 00:04:46,147 --> 00:04:47,730 Itu bahkan lebih estetis berorientasi. 116 00:04:47,730 --> 00:04:50,470 Dan memungkinkan Anda untuk mengurutkan dari menyempurnakan hal-hal seperti ukuran font dan warna 117 00:04:50,470 --> 00:04:51,850 dan penempatan dan semua itu. 118 00:04:51,850 --> 00:04:52,370 Kemudian kami memiliki 119 00:04:52,370 --> 00:04:53,160 >> SQL. 120 00:04:53,160 --> 00:04:56,010 Jadi SQL memang pemrograman bahasa dalam arti tertentu, 121 00:04:56,010 --> 00:04:59,330 meskipun disesuaikan khusus untuk database. 122 00:04:59,330 --> 00:05:03,347 Tapi meskipun kami hanya memperkenalkan Anda ke memilih dan menyisipkan dan menghapus dan memperbarui 123 00:05:03,347 --> 00:05:05,430 dan beberapa orang lain, ternyata Anda benar-benar bisa 124 00:05:05,430 --> 00:05:07,380 menulis fungsi atau prosedur, karena mereka 125 00:05:07,380 --> 00:05:11,270 disebut, di SQL yang terlihat dan bertindak cukup seperti PHP dan C fungsi. 126 00:05:11,270 --> 00:05:12,390 Jadi tahu bahwa mereka ada. 127 00:05:12,390 --> 00:05:15,348 Tapi kita tidak repot-repot dengan mereka karena kami hanya menggores permukaan di sini. 128 00:05:15,348 --> 00:05:18,600 Dan kemudian JavaScript, yang terakhir dari bahasa kita resmi diperkenalkan. 129 00:05:18,600 --> 00:05:21,029 Jadi JavaScript, juga, adalah bahasa ditafsirkan. 130 00:05:21,029 --> 00:05:23,070 Dan mereka yang akrab, lakukan Anda ingin membedakannya 131 00:05:23,070 --> 00:05:26,960 dengan beberapa karakteristik dari kedua C dan PHP? 132 00:05:26,960 --> 00:05:28,300 Apa yang membuatnya berbeda? 133 00:05:28,300 --> 00:05:29,650 >> AUDIENCE: Ini tidak dikompilasi. 134 00:05:29,650 --> 00:05:29,930 >> DAVID Malan: Katakanlah lagi? 135 00:05:29,930 --> 00:05:31,200 >> AUDIENCE: Ini tidak dikompilasi. 136 00:05:31,200 --> 00:05:31,930 >> DAVID Malan: Ini tidak dikompilasi. 137 00:05:31,930 --> 00:05:33,450 Jadi, terlalu, ditafsirkan. 138 00:05:33,450 --> 00:05:34,760 Jadi itu tidak disusun. 139 00:05:34,760 --> 00:05:37,210 Tapi yang membuatnya sedikit seperti PHP. 140 00:05:37,210 --> 00:05:39,545 Tapi itu masih berbeda dari PHP dalam beberapa cara mencolok, 141 00:05:39,545 --> 00:05:40,920 setidaknya dalam cara kita akan menggunakannya. 142 00:05:40,920 --> 00:05:41,205 Ya? 143 00:05:41,205 --> 00:05:41,940 >> AUDIENCE: Ini berjalan sisi klien. 144 00:05:41,940 --> 00:05:44,000 >> DAVID Malan: Ini berjalan sisi klien, biasanya. 145 00:05:44,000 --> 00:05:47,190 Itu memang membedakan dengan karakteristik bagi kita sekarang. 146 00:05:47,190 --> 00:05:51,170 C adalah server-side dalam arti bahwa kita melakukan segala sesuatu di CS50 IDE. 147 00:05:51,170 --> 00:05:53,630 PHP sejauh ini telah server-side sejauh 148 00:05:53,630 --> 00:05:56,550 karena, juga, mendapat interpreted-- tidak dikompilasi, tetapi interpreted-- 149 00:05:56,550 --> 00:06:00,690 dalam CS50 IDE, yang tentu saja hanya server atau server di awan. 150 00:06:00,690 --> 00:06:03,070 >> Tapi JavaScript, bahkan meskipun Anda Anda akan 151 00:06:03,070 --> 00:06:07,000 untuk mulai menulis untuk, katakanlah, pset delapan dan mungkin akhir projects-- Anda 152 00:06:07,000 --> 00:06:09,620 akan ke kanan di CS50 IDE dan menyimpannya 153 00:06:09,620 --> 00:06:14,760 di file dalam CS50 IDE, CS50 IDE dan, pada gilirannya, server cloud 154 00:06:14,760 --> 00:06:19,160 yang itu host, tidak akan untuk menafsirkan atau mengeksekusi kode Anda. 155 00:06:19,160 --> 00:06:23,880 Sebaliknya, itu akan dikirim di bentuk berubah ke browser. 156 00:06:23,880 --> 00:06:26,990 Dan itu kemudian akan menjadi IE atau Chrome atau Firefox atau Safari 157 00:06:26,990 --> 00:06:30,697 atau apa pun yang benar-benar menafsirkan itu, atas ke bawah, kiri ke kanan. 158 00:06:30,697 --> 00:06:32,780 Jadi yang membedakan kunci karakteristik untuk hari ini 159 00:06:32,780 --> 00:06:36,110 adalah bahwa JavaScript adalah sisi klien dan PHP, misalnya, 160 00:06:36,110 --> 00:06:37,690 memiliki pernah server-side. 161 00:06:37,690 --> 00:06:40,920 Sekarang, ini memiliki implikasi yang menarik untuk, seperti, kekayaan intelektual 162 00:06:40,920 --> 00:06:42,660 dan yang bisa benar-benar melihat kode Anda. 163 00:06:42,660 --> 00:06:44,860 Dan memang, Anda bisa pergi di web dan melihat sebagian 164 00:06:44,860 --> 00:06:47,530 kode bahwa seseorang memiliki ditulis dalam JavaScript. 165 00:06:47,530 --> 00:06:50,230 Kadang-kadang itu dapat dibaca, kadang-kadang itu dikaburkan. 166 00:06:50,230 --> 00:06:52,550 Tetapi lebih pada pada waktunya. 167 00:06:52,550 --> 00:06:57,530 >> Jadi JavaScript, cukup baik, adalah Super serupa, sintaksis, untuk C. 168 00:06:57,530 --> 00:06:59,364 Dan banyak seperti PHP, tidak ada fungsi utama. 169 00:06:59,364 --> 00:07:02,113 Jika Anda ingin memulai menulis Kode JavaScript, seperti yang Anda lihat hari ini, 170 00:07:02,113 --> 00:07:03,270 Anda hanya mulai menulis itu. 171 00:07:03,270 --> 00:07:06,910 Tetapi, Anda akan melihat, terutama berguna dalam konteks web browser. 172 00:07:06,910 --> 00:07:09,820 Namun, sedikit saya disclaimer-- biasanya earlier-- 173 00:07:09,820 --> 00:07:13,790 adalah untuk mengatakan bahwa Anda bisa semakin saat ini menggunakan server-side JavaScript 174 00:07:13,790 --> 00:07:17,655 menggunakan kerangka mewah disebut Node.js bahwa beberapa aplikasi CS50 sendiri 175 00:07:17,655 --> 00:07:18,280 yang ditulis dalam. 176 00:07:18,280 --> 00:07:20,640 Periksa 50 benar-benar menggunakan Node.js. 177 00:07:20,640 --> 00:07:24,140 Tapi kami akan fokus pada JavaScript sisi klien sini di luar. 178 00:07:24,140 --> 00:07:26,750 >> Jadi di sini adalah seperangkat kondisi di PHP. 179 00:07:26,750 --> 00:07:29,350 Maaf, in-- sebenarnya, yang Pernyataan juga benar. 180 00:07:29,350 --> 00:07:32,200 Berikut juga satu set kondisi dalam JavaScript. 181 00:07:32,200 --> 00:07:35,560 Sintaksis, itu adalah identik dengan C dan PHP. 182 00:07:35,560 --> 00:07:39,040 Ekspresi Mr. Boole adalah, sama, sintaksis 183 00:07:39,040 --> 00:07:41,190 identik dengan kedua C dan PHP. 184 00:07:41,190 --> 00:07:44,100 Kami juga memiliki switch di JavaScript yang terlihat identik. 185 00:07:44,100 --> 00:07:46,350 Kami memiliki untuk loop yang terstruktur identik, 186 00:07:46,350 --> 00:07:48,140 sementara loop, lakukan sementara loop. 187 00:07:48,140 --> 00:07:49,980 >> Yang satu ini sedikit berbeda. 188 00:07:49,980 --> 00:07:53,120 PHP memiliki untuk setiap konstruk Anda mungkin menggunakan 189 00:07:53,120 --> 00:07:55,320 atau akan digunakan dalam pset tujuh, mungkin. 190 00:07:55,320 --> 00:07:59,460 JavaScript memiliki versi khusus untuk mana Anda benar-benar mengatakan sesuatu 191 00:07:59,460 --> 00:08:03,864 seperti kunci variabel dalam objek, yang adalah cara yang sangat singkat mengatakan, 192 00:08:03,864 --> 00:08:06,780 jika saya punya sebuah object-- dan kami akan berbicara tentang ini lagi di moment-- sebuah 193 00:08:06,780 --> 00:08:10,370 dan saya ingin iterate atas semua dari nilai pasangan kunci di dalam, 194 00:08:10,370 --> 00:08:13,620 Saya tidak harus mencari cara untuk Indeks numerik mereka dengan nol, satu, 195 00:08:13,620 --> 00:08:14,580 dua tiga. 196 00:08:14,580 --> 00:08:15,900 >> Aku benar-benar bisa mengatakan ini. 197 00:08:15,900 --> 00:08:20,740 Dan pada setiap iterasi, JavaScript bagi saya akan memperbarui kunci variabel 198 00:08:20,740 --> 00:08:24,810 menjadi kunci pertama, kemudian tombol berikutnya, maka kunci berikutnya, maka kunci berikutnya, 199 00:08:24,810 --> 00:08:25,510 Dan seterusnya. 200 00:08:25,510 --> 00:08:30,000 Dan saya bisa mendapatkan nilai sebesar mengobati obyek dalam JavaScript, seperti yang kita lihat, 201 00:08:30,000 --> 00:08:32,584 seolah-olah itu adalah array asosiatif di PHP. 202 00:08:32,584 --> 00:08:35,750 Memang, jika Anda akhirnya dibungkus Anda keberatan sekitar apa array asosiatif adalah 203 00:08:35,750 --> 00:08:40,140 PHP, Anda bisa memikirkan untuk saat ini sebagai identik dengan obyek dalam JavaScript. 204 00:08:40,140 --> 00:08:42,030 Tapi itu sedikit terlalu menyederhanakan. 205 00:08:42,030 --> 00:08:47,230 >> Array terlihat, cukup baik, identik untuk PHP kecuali untuk satu karakter. 206 00:08:47,230 --> 00:08:51,425 Ada satu hal yang hilang di sini bahwa kita memang melihat minggu lalu dengan PHP. 207 00:08:51,425 --> 00:08:52,050 Apa yang dihilangkan? 208 00:08:52,050 --> 00:08:53,310 Ya? 209 00:08:53,310 --> 00:08:54,090 Tidak ada tanda dolar. 210 00:08:54,090 --> 00:08:56,240 Jadi kita kembali ke dunia lebih normal di mana 211 00:08:56,240 --> 00:08:58,050 variabel tidak memiliki tanda-tanda dolar. 212 00:08:58,050 --> 00:09:00,810 Tapi Anda awalan mereka dengan var, biasanya. 213 00:09:00,810 --> 00:09:02,230 Dan var berarti variabel. 214 00:09:02,230 --> 00:09:06,440 Dan banyak seperti PHP adalah longgar typed-- dimana ada jenis, 215 00:09:06,440 --> 00:09:10,120 ada angka dan string dan mengapung dan forth-- 216 00:09:10,120 --> 00:09:11,570 JavaScript sama memiliki jenis. 217 00:09:11,570 --> 00:09:15,470 Tapi itu longgar diketik dalam bahwa kita yang programmer tidak harus menentukan mereka. 218 00:09:15,470 --> 00:09:18,980 Kami hanya harus menyadari bahwa berbagai jenis ada. 219 00:09:18,980 --> 00:09:21,690 >> Variabel, meanwhile-- inilah cara kita mungkin mendeklarasikan "halo, dunia" 220 00:09:21,690 --> 00:09:22,230 sebagai string. 221 00:09:22,230 --> 00:09:24,890 Perhatikan itu identik dengan PHP tetapi tidak ada tanda dolar. 222 00:09:24,890 --> 00:09:27,120 Dan ini adalah sesuatu yang kita akan mulai melihat lebih hari ini, 223 00:09:27,120 --> 00:09:30,990 dimana Anda memiliki objek dengan kunci dan nilai-nilai. 224 00:09:30,990 --> 00:09:32,990 Dan jika Anda ingin mencoba untuk menyimpulkan dari week-- lalu 225 00:09:32,990 --> 00:09:34,730 sintaks ini sedikit berbeda. 226 00:09:34,730 --> 00:09:39,740 Tapi kewarasan sedikit check-- berapa banyak Kunci yang objek ini tampaknya memiliki? 227 00:09:39,740 --> 00:09:40,850 Jadi saya melihat empat. 228 00:09:40,850 --> 00:09:43,560 Saya melihat dua. 229 00:09:43,560 --> 00:09:44,680 >> Jadi itu benar-benar dua. 230 00:09:44,680 --> 00:09:47,260 Jadi ini adalah koleksi dua pasangan kunci-nilai. 231 00:09:47,260 --> 00:09:49,820 Kuncinya adalah simbol yang nilainya FB. 232 00:09:49,820 --> 00:09:52,620 Kuncinya adalah harga yang nilainya 101,53. 233 00:09:52,620 --> 00:09:54,230 Jadi mereka adalah dua pasangan kunci-nilai. 234 00:09:54,230 --> 00:09:58,120 Dan ingat, PHP-- dan ini lagi hanya semacam perbedaan sintaksis. 235 00:09:58,120 --> 00:10:00,170 Ini tidak semua yang intelektual yang menarik. 236 00:10:00,170 --> 00:10:04,610 PHP mungkin telah menulis ini sama Hal seperti kutipan follows--, sama. 237 00:10:04,610 --> 00:10:06,730 Dan saya mengubah ini untuk kurung persegi. 238 00:10:06,730 --> 00:10:11,240 Dan kemudian saya mengubahnya ke kata dikutip, "harga." 239 00:10:11,240 --> 00:10:12,500 Dan kemudian saya tidak menggunakan titik dua. 240 00:10:12,500 --> 00:10:15,060 Apa yang saya gunakan minggu lalu? 241 00:10:15,060 --> 00:10:18,290 Ya, tanda sama panah notasi funky. 242 00:10:18,290 --> 00:10:21,470 >> Dan kemudian saya melakukan hal yang sama di sini. 243 00:10:21,470 --> 00:10:23,580 Hal yang sama di sini. 244 00:10:23,580 --> 00:10:24,240 Dan itu semua. 245 00:10:24,240 --> 00:10:27,752 Jadi tidak apa-apa jika ini belum benar-benar tenggelam dalam memori hanya 246 00:10:27,752 --> 00:10:29,960 namun karena itu benar-benar intelektual tidak menarik. 247 00:10:29,960 --> 00:10:31,660 Ini perbedaan hanya sintaksis. 248 00:10:31,660 --> 00:10:33,230 Namun ide yang persis sama. 249 00:10:33,230 --> 00:10:35,910 Di dalam variabel ini kutipan dalam JavaScript 250 00:10:35,910 --> 00:10:39,020 adalah kumpulan pasangan kunci-nilai, salah satunya adalah simbol, salah satunya 251 00:10:39,020 --> 00:10:39,690 adalah harga. 252 00:10:39,690 --> 00:10:42,340 Dan saya bisa mendapatkan nilai-nilai di dengan sintaks berikut. 253 00:10:42,340 --> 00:10:46,280 Sama seperti di PHP, saya bisa melakukan sesuatu like-- membiarkan 254 00:10:46,280 --> 00:10:48,590 saya membuat kotak ini sedikit lebih besar. 255 00:10:48,590 --> 00:10:52,750 Sama seperti di PHP, saya bisa membuat this-- oh, sialan. 256 00:10:52,750 --> 00:10:53,250 Ayolah. 257 00:10:53,250 --> 00:10:56,350 258 00:10:56,350 --> 00:11:00,800 >> Sama seperti di PHP-- OK, kami akan hanya menggunakan catatan presenter. 259 00:11:00,800 --> 00:11:06,010 Sama seperti di PHP, saya bisa melakukan $ quote $ quote ["simbol"], 260 00:11:06,010 --> 00:11:08,860 dan ini akan membuat saya nilai "simbol." 261 00:11:08,860 --> 00:11:12,800 Dalam JavaScript, itu akan menjadi identik, dimana saya hanya bisa melakukan ini. 262 00:11:12,800 --> 00:11:14,850 Satu-satunya hal yang hilang adalah tanda dolar. 263 00:11:14,850 --> 00:11:17,470 >> Jadi cukup baik, maka, ada tidak semua yang banyak sintaks baru. 264 00:11:17,470 --> 00:11:21,025 Jadi apa yang hari ini kita fokus pada, benar-benar, adalah beberapa ide dan aplikasi. 265 00:11:21,025 --> 00:11:22,900 Dan yang pertama seperti aplikasi yang Anda mungkin 266 00:11:22,900 --> 00:11:26,090 telah melihat jika Anda menyelam ke pset tujuh sudah sintaks ini. 267 00:11:26,090 --> 00:11:28,980 Jadi di pset tujuh, jika Anda sudah melihat atau belum melihatnya, 268 00:11:28,980 --> 00:11:33,570 tahu bahwa ada file yang kita berikan Anda disebut config.json-- JavaScript 269 00:11:33,570 --> 00:11:34,661 Obyek Notasi. 270 00:11:34,661 --> 00:11:35,160 Mengapa? 271 00:11:35,160 --> 00:11:39,540 Kami ingin dapat menyediakan Anda dengan template dengan beberapa pasangan kunci-nilai. 272 00:11:39,540 --> 00:11:44,290 Kami ingin dapat memberikan daftar dari tuan rumah, nama server. 273 00:11:44,290 --> 00:11:46,710 Kami ingin memberi Anda tempat untuk nama pengguna 274 00:11:46,710 --> 00:11:48,210 dan sebuah tempat untuk sandi Anda. 275 00:11:48,210 --> 00:11:49,410 Jika Anda tidak melihat ini belum, tidak perlu khawatir. 276 00:11:49,410 --> 00:11:51,340 Lebih lanjut tentang ini di pset tujuh [? spec. ?] Dan kemudian, 277 00:11:51,340 --> 00:11:53,173 jelas, kami ingin Anda untuk mengisi to-dos 278 00:11:53,173 --> 00:11:55,310 karena ketika Anda login ke CS50 IDE, masing-masing 279 00:11:55,310 --> 00:11:57,630 memiliki nama pengguna dan password Anda sendiri. 280 00:11:57,630 --> 00:12:00,910 >> Jadi kita sudah bisa digunakan setengah lusin atau lebih format file yang berbeda. 281 00:12:00,910 --> 00:12:02,940 Kita bisa menggunakan file .txt. 282 00:12:02,940 --> 00:12:04,570 Kita bisa menggunakan file CSV. 283 00:12:04,570 --> 00:12:06,745 Kami sudah bisa digunakan sebuah File INI, file XML, 284 00:12:06,745 --> 00:12:09,370 seluruh banyak lebih akronim yang Anda mungkin tidak pernah mendengar. 285 00:12:09,370 --> 00:12:11,244 Ini semacam sewenang-wenang pada akhir hari. 286 00:12:11,244 --> 00:12:16,030 Tapi super populer hari ini adalah teks format yang disebut JSON-- JavaScript Object 287 00:12:16,030 --> 00:12:18,460 Notation-- yang terlihat seperti ini. 288 00:12:18,460 --> 00:12:20,890 Ini sedikit samar, tetapi melihat pola. 289 00:12:20,890 --> 00:12:24,180 Anda mulai dengan keriting terbuka penjepit, dan Anda berakhir dengan sama. 290 00:12:24,180 --> 00:12:26,550 Di dalam itu adalah sesuatu. 291 00:12:26,550 --> 00:12:27,920 Ini adalah pasangan kunci-nilai. 292 00:12:27,920 --> 00:12:30,580 Jadi ini adalah sebuah benda yang aku melihat di layar sini 293 00:12:30,580 --> 00:12:33,690 yang memiliki salah satu kunci, yang memiliki satu nilai. 294 00:12:33,690 --> 00:12:37,610 Dan hanya menyimpulkan berdasarkan pola sebelumnya, apa kuncinya di sini? 295 00:12:37,610 --> 00:12:39,790 Database, hal yang perlu sebelah kiri usus besar. 296 00:12:39,790 --> 00:12:43,500 >> Sekarang, nilai kebetulan kelipatan garis waktu ini. 297 00:12:43,500 --> 00:12:46,760 Tetapi nilai dimulai dengan keriting sebuah penjepit dan berakhir dengan penjepit keriting. 298 00:12:46,760 --> 00:12:49,480 Jadi apa yang akan Anda usulkan adalah jenis nilai database? 299 00:12:49,480 --> 00:12:52,160 300 00:12:52,160 --> 00:12:54,670 Sebuah kamus atau, hanya lebih ringkas, sebuah objek. 301 00:12:54,670 --> 00:12:55,170 Benar? 302 00:12:55,170 --> 00:13:00,010 Ini adalah jenis struktur data yang dapat menggunakan struktur lain dalam dirinya sendiri. 303 00:13:00,010 --> 00:13:02,750 Jadi jika semua ini kita memanggil object-- dan obyek 304 00:13:02,750 --> 00:13:07,101 adalah hanya sekelompok kunci-nilai yang pairs-- nilai database itu sendiri adalah obyek. 305 00:13:07,101 --> 00:13:10,350 Nilai database memiliki seluruh banyak pasangan nilai kunci, yang pertama 306 00:13:10,350 --> 00:13:13,130 adalah tuan rumah, kemudian nama, maka nama pengguna, maka password, 307 00:13:13,130 --> 00:13:17,550 masing-masing yang nilai, sementara itu, itu hanya string membosankan dalam tanda kutip ganda. 308 00:13:17,550 --> 00:13:19,770 >> Jadi, bahkan jika itu tidak super jelas dulu, 309 00:13:19,770 --> 00:13:22,740 tahu bahwa ini hanyalah sebuah standar, cara yang cukup membosankan 310 00:13:22,740 --> 00:13:25,190 menyimpan data dalam format standar. 311 00:13:25,190 --> 00:13:27,700 Tapi kesalahan umum Anda mungkin membuat, bahkan di pset tujuh, 312 00:13:27,700 --> 00:13:32,120 adalah hal-hal bodoh kecil, seperti jika Anda sengaja menghilangkan koma sana. 313 00:13:32,120 --> 00:13:34,900 Itu akan menghasilkan file belum tentu menjadi dibaca. 314 00:13:34,900 --> 00:13:38,191 Jika Anda secara tidak sengaja menghilangkan hal-hal seperti kutipan, itu tidak akan menjadi dibaca. 315 00:13:38,191 --> 00:13:41,654 Jadi itu adalah format file yang cukup nitpicky, tapi itu salah satu yang super umum. 316 00:13:41,654 --> 00:13:44,820 Dan kita terjadi untuk menggunakannya, meskipun Anda tidak menggunakan JavaScript sebaliknya, 317 00:13:44,820 --> 00:13:46,330 di pset tujuh. 318 00:13:46,330 --> 00:13:46,860 >> Baiklah. 319 00:13:46,860 --> 00:13:48,110 Jadi ingat gambar ini. 320 00:13:48,110 --> 00:13:51,657 Kami berbicara tentang, dalam HTML, yang kode akan terlihat seperti ini. 321 00:13:51,657 --> 00:13:54,740 Ini adalah HyperText Markup Language [Tidak terdengar] untuk hanya "halo, dunia." 322 00:13:54,740 --> 00:13:57,570 Tapi kemudian kami mengusulkan sementara kembali bahwa jika membantu, 323 00:13:57,570 --> 00:14:00,210 Anda mungkin ingin mulai berpikir tentang ini sudah sebagai pohon. 324 00:14:00,210 --> 00:14:03,730 Bahkan, lekukan yang kita menggunakan hanya demi dibaca ini 325 00:14:03,730 --> 00:14:05,610 atau demi gaya pada kiri jenis kaleng 326 00:14:05,610 --> 00:14:10,040 diterjemahkan ke dalam pohon ini, di mana Anda memiliki beberapa akar khusus yang kita akan 327 00:14:10,040 --> 00:14:16,860 umum disebut dokumen, di bawah ini yang adalah akar elemen HTML atau tag, HTML, 328 00:14:16,860 --> 00:14:19,980 yang kemudian memiliki dua anak-anak, kepala dan tubuh. 329 00:14:19,980 --> 00:14:21,750 >> Dan kemudian pada gilirannya, kepala memiliki judul. 330 00:14:21,750 --> 00:14:23,440 Dan judul memiliki nilai teks. 331 00:14:23,440 --> 00:14:26,130 Dan tubuh yang sama memiliki nilai teks. 332 00:14:26,130 --> 00:14:29,220 Jadi jika Anda mengatakan nyaman bahwa ya, Anda bisa mengambil HTML ini 333 00:14:29,220 --> 00:14:32,080 dan menggambar seperti ini, sisi kanan 334 00:14:32,080 --> 00:14:35,910 adalah model mental yang bagus karena sekarang bahwa kita memiliki JavaScript, pemrograman 335 00:14:35,910 --> 00:14:39,960 bahasa yang bisa browser mengeksekusi dan menafsirkan untuk Anda, 336 00:14:39,960 --> 00:14:42,690 ternyata apa kami akan melakukan dalam kode 337 00:14:42,690 --> 00:14:45,320 adalah mulai memanipulasi ini struktur pohon di memori. 338 00:14:45,320 --> 00:14:47,070 Kami tidak harus membangun pohon di memori. 339 00:14:47,070 --> 00:14:49,880 Kami tidak perlu melakukan semacam struktur data pset-lima gaya 340 00:14:49,880 --> 00:14:50,650 kompleksitas. 341 00:14:50,650 --> 00:14:54,610 Browser, cukup baik, setelah menafsirkan HTML atas ke bawah, 342 00:14:54,610 --> 00:14:58,600 kiri atau kanan, secara harfiah akan tangan kami setara dengan pointer 343 00:14:58,600 --> 00:15:00,840 untuk itu seluruh pohon secara gratis. 344 00:15:00,840 --> 00:15:02,150 Itu semua kerja keras. 345 00:15:02,150 --> 00:15:05,520 Itulah yang Mozilla dan Apple dan lain-lain telah lakukan bagi kita. 346 00:15:05,520 --> 00:15:09,400 >> Dan dengan JavaScript yang akan kita mampu mengendalikan dan mengubah dan melakukan 347 00:15:09,400 --> 00:15:12,910 hal yang menarik untuk pohon yang, jika tidak diketahui 348 00:15:12,910 --> 00:15:15,880 sebagai DOM atau Document Object Model. 349 00:15:15,880 --> 00:15:17,110 Macam hal apa? 350 00:15:17,110 --> 00:15:19,030 Nah, ternyata bahwa dalam JavaScript, ada 351 00:15:19,030 --> 00:15:22,800 daftar cucian ini peristiwa yang dapat terjadi. 352 00:15:22,800 --> 00:15:26,330 Dan kita belum benar-benar digunakan yang Kata sejak pekan nol dan pset 353 00:15:26,330 --> 00:15:28,240 nol ketika kita berbicara tentang Scratch. 354 00:15:28,240 --> 00:15:31,390 Sebagian besar dari Anda mungkin tidak menggunakan sebuah acara di proyek Scratch Anda. 355 00:15:31,390 --> 00:15:33,850 Tapi Anda mungkin ingat sederhana Marco Polo 356 00:15:33,850 --> 00:15:36,760 Misalnya, di mana kita memiliki dua sprite, salah satunya mengatakan, Marco. 357 00:15:36,760 --> 00:15:40,180 Yang lain di antaranya kemudian, setelah mendengarkan dan mendengar peristiwa itu, kata, Polo. 358 00:15:40,180 --> 00:15:42,080 Jika tidak, jangan ragu untuk melihat kembali sejauh itu kembali. 359 00:15:42,080 --> 00:15:44,450 >> Tapi ini hanya untuk mengatakan, dan Anda dapat jenis 360 00:15:44,450 --> 00:15:47,730 menyimpulkan dari nama-nama ini hal, JavaScript, ternyata, 361 00:15:47,730 --> 00:15:53,200 akan memberi kita cara untuk mendengarkan untuk mouse turun atau mouse naik 362 00:15:53,200 --> 00:15:57,920 atau kunci turun atau kunci naik atau onselect onsubmit 363 00:15:57,920 --> 00:15:59,740 atau onresizing sesuatu. 364 00:15:59,740 --> 00:16:03,060 Dengan kata lain, tindakan fisik setiap bahwa manusia dapat mengambil dengan browser 365 00:16:03,060 --> 00:16:08,210 yang Anda lakukan setiap hari, Anda dapat menulis kode untuk yang mendengarkan peristiwa-peristiwa 366 00:16:08,210 --> 00:16:10,220 dan kemudian melakukan sesuatu yang tepat. 367 00:16:10,220 --> 00:16:14,130 >> Misalnya, jika Anda menggunakan Google Maps, apa yang terjadi jika Anda mengklik dan bergerak 368 00:16:14,130 --> 00:16:16,250 mouse, biasanya? 369 00:16:16,250 --> 00:16:17,758 Jika Anda klik dan tarik? 370 00:16:17,758 --> 00:16:18,258 Ya? 371 00:16:18,258 --> 00:16:21,701 372 00:16:21,701 --> 00:16:22,200 Tepat. 373 00:16:22,200 --> 00:16:23,159 Peta mulai bergerak. 374 00:16:23,159 --> 00:16:25,616 Sehingga Anda dapat semacam melihat apa yang di sini, apa yang ada di sana. 375 00:16:25,616 --> 00:16:27,130 Dan bagaimana Google menerapkan itu? 376 00:16:27,130 --> 00:16:29,421 Nah, mungkin, mereka menggunakan beberapa acara ini 377 00:16:29,421 --> 00:16:31,720 pendengar, yang mengatakan, mendengarkan pada mouse 378 00:16:31,720 --> 00:16:35,410 down-- sehingga ketika pengguna secara fisik mendorong trackpad atau atau mouse-nya 379 00:16:35,410 --> 00:16:36,010 turun. 380 00:16:36,010 --> 00:16:38,350 Dan kemudian kita cari sesuatu seperti gerakan 381 00:16:38,350 --> 00:16:41,145 atau beberapa peristiwa lain yang memungkinkan kita untuk menangkap drag. 382 00:16:41,145 --> 00:16:45,910 Dan pada kenyataannya, drag sama dalam hal ini dot dot dot daftar pilihan yang mungkin. 383 00:16:45,910 --> 00:16:49,140 >> Jadi ini akan menjadi kuat cara untuk memulai menanggapi pengguna 384 00:16:49,140 --> 00:16:52,824 bahkan sebelum ia benar-benar mengklik sesuatu yang eksplisit seperti kirimkan. 385 00:16:52,824 --> 00:16:55,240 Tapi kami akan memperkenalkan beberapa topik untuk sampai ke sana. 386 00:16:55,240 --> 00:16:58,570 Tapi pertama-tama, mari kita transisi untuk beberapa kode yang sebenarnya. 387 00:16:58,570 --> 00:17:01,450 Jadi aku akan pergi depan dan membuka dom-0, 388 00:17:01,450 --> 00:17:05,869 yang merupakan contoh yang sangat sederhana di sini bahwa jika saya memperbesar hanya 389 00:17:05,869 --> 00:17:08,500 memiliki masukan ini di sini bagi saya. 390 00:17:08,500 --> 00:17:12,410 Dan aku akan pergi ke depan dan ketik "David" untuk nama saya dan klik Submit. 391 00:17:12,410 --> 00:17:17,940 >> Dan kemudian, meskipun semacam murah, saya memiliki prompt ini yang muncul yang mengatakan, 392 00:17:17,940 --> 00:17:19,244 "Halo, David!" 393 00:17:19,244 --> 00:17:21,740 Jadi ini adalah jenis seperti kita "halo, dunia" 394 00:17:21,740 --> 00:17:25,150 yang kami lakukan beberapa waktu yang lalu di C dan bahkan dalam PHP karena saya sudah dinamis 395 00:17:25,150 --> 00:17:26,310 dikeluarkan nama saya. 396 00:17:26,310 --> 00:17:28,230 Aku bisa melakukan nama orang lain di sini. 397 00:17:28,230 --> 00:17:31,240 Aku hanya bisa mengubahnya ke, seperti, Hannah, klik Submit. 398 00:17:31,240 --> 00:17:33,780 Dan memang, perubahan pop-up kecil. 399 00:17:33,780 --> 00:17:36,650 >> Sekarang, pop-up adalah salah satu sebagian fitur disalahgunakan web. 400 00:17:36,650 --> 00:17:38,520 Dan pada kenyataannya, kembali hari pop-up blocker 401 00:17:38,520 --> 00:17:40,820 masuk ke mode karena Anda akan pergi ke beberapa website-- 402 00:17:40,820 --> 00:17:43,604 mungkin place-- dipertanyakan yang akan tiba-tiba 403 00:17:43,604 --> 00:17:46,020 mulai membumbui layar Anda dengan sejumlah besar pop-up. 404 00:17:46,020 --> 00:17:49,700 Dan kemampuan ini untuk pop up Jendela di depan pengguna 405 00:17:49,700 --> 00:17:52,372 belum sangat diterima dengan baik oleh umat manusia. 406 00:17:52,372 --> 00:17:54,080 Jadi itu sebabnya Anda melihat ini mencegah hal, 407 00:17:54,080 --> 00:17:55,706 yang hanya membuat semua ini jelek. 408 00:17:55,706 --> 00:17:57,996 Jadi kita akan membutuhkan cara yang lebih baik untuk meminta pengguna. 409 00:17:57,996 --> 00:17:59,350 Tapi untuk saat ini, yang tampaknya bekerja. 410 00:17:59,350 --> 00:18:03,320 Jadi hanya intuitif, apa tampaknya akan terjadi di sini? 411 00:18:03,320 --> 00:18:07,870 Aku pergi ke depan dan klik Submit, dan kemudian sesuatu terjadi, jelas. 412 00:18:07,870 --> 00:18:12,870 Tapi apa yang tidak terjadi yang tidak terjadi minggu lalu setiap kali saya diklik Menyerahkan? 413 00:18:12,870 --> 00:18:15,940 Apa yang tidak terjadi pada layar? 414 00:18:15,940 --> 00:18:17,170 Maaf? 415 00:18:17,170 --> 00:18:18,010 Reload. 416 00:18:18,010 --> 00:18:19,720 URL tidak berubah sama sekali. 417 00:18:19,720 --> 00:18:22,250 Saya mengatakan ini adalah dom-0, dan aku masih di dom-0. 418 00:18:22,250 --> 00:18:26,890 Biasanya, kami akan bisa berubah untuk beberapa lainnya URL, seperti register.php atau sejenisnya. 419 00:18:26,890 --> 00:18:29,560 >> Tapi bahkan ketika saya memberhentikan hal ini dengan mengklik OK, 420 00:18:29,560 --> 00:18:32,310 melihat bahwa URL tetap benar-benar menempatkan. 421 00:18:32,310 --> 00:18:35,350 Dan, pada kenyataannya, jika aku sedikit skeptis, biarkan aku membuka Chrome. 422 00:18:35,350 --> 00:18:36,860 Mari saya membuka tab Jaringan. 423 00:18:36,860 --> 00:18:38,360 Dan melihat itu kosong pada saat ini. 424 00:18:38,360 --> 00:18:40,700 Biarkan aku pergi ke depan dan mengirim ulang Maria. 425 00:18:40,700 --> 00:18:42,810 Tidak ada lalu lintas jaringan apapun. 426 00:18:42,810 --> 00:18:44,320 Jadi tidak ada HTTP. 427 00:18:44,320 --> 00:18:47,620 >> Jadi memang, jika saya melihat kode sumber untuk this-- biarkan aku menutup jendela ini 428 00:18:47,620 --> 00:18:49,480 dan pergi ke Lihat Sumber. 429 00:18:49,480 --> 00:18:50,400 Menarik. 430 00:18:50,400 --> 00:18:53,520 Sepertinya ada beberapa tag baru, di antaranya naskah. 431 00:18:53,520 --> 00:18:57,490 Jadi mari kita lihat dalam CS50 IDE apa yang saya dikirim ke pengguna. 432 00:18:57,490 --> 00:19:00,690 >> Jadi di sini is-- mari fokus pada HTML saja. 433 00:19:00,690 --> 00:19:03,500 Berikut bagian bawah dom-0.html. 434 00:19:03,500 --> 00:19:07,830 Dan melihat bahwa itu punya judul, tag kepala, tag tubuh, bentuk tag. 435 00:19:07,830 --> 00:19:11,257 Tapi apa yang melompat keluar untuk Anda sebagai yang berbeda, terutama jika Anda sudah pernah 436 00:19:11,257 --> 00:19:12,590 ditulis setiap JavaScript sendiri. 437 00:19:12,590 --> 00:19:14,920 Mari saya gulir sedikit ke sini. 438 00:19:14,920 --> 00:19:18,330 Saya punya masukan, masukan lain untuk mengirimkan. 439 00:19:18,330 --> 00:19:21,410 Aku punya ID, yang merupakan jenis baru. 440 00:19:21,410 --> 00:19:22,790 Tapi kami melihat ini dengan CSS. 441 00:19:22,790 --> 00:19:24,480 Apa lagi yang pasti baru? 442 00:19:24,480 --> 00:19:24,980 Ya? 443 00:19:24,980 --> 00:19:30,580 444 00:19:30,580 --> 00:19:32,140 Bagus. 445 00:19:32,140 --> 00:19:32,760 >> Baiklah. 446 00:19:32,760 --> 00:19:35,630 Jadi di mana dikatakan aktivitas pengiriman, melihat apa yang tampaknya mengikuti. 447 00:19:35,630 --> 00:19:38,740 Ini adalah atribut di HTML nomenklatur. 448 00:19:38,740 --> 00:19:40,944 Nilainya ini string yang dikutip di sini. 449 00:19:40,944 --> 00:19:42,860 Dan ini terlihat sedikit aneh pada pandangan pertama. 450 00:19:42,860 --> 00:19:44,050 Ini bukan HTML. 451 00:19:44,050 --> 00:19:45,240 Ini bukan CSS. 452 00:19:45,240 --> 00:19:47,580 Hal ini, seperti yang Anda duga, JavaScript. 453 00:19:47,580 --> 00:19:51,850 Jadi sepertinya bahwa dibangun ke ini Halaman web adalah fungsi disebut greet. 454 00:19:51,850 --> 00:19:54,250 Dan aku menyimpulkan bahwa hanya karena itu kata, menyapa. 455 00:19:54,250 --> 00:19:55,880 Itu punya paren terbuka, paren dekat, titik koma. 456 00:19:55,880 --> 00:19:58,095 Sepertinya fungsi C, Sepertinya fungsi PHP. 457 00:19:58,095 --> 00:20:00,370 >> Dan memang, itu akan menjadi fungsi JavaScript. 458 00:20:00,370 --> 00:20:01,440 Lalu aku kembali palsu. 459 00:20:01,440 --> 00:20:03,440 Kami akan kembali ke yang hanya dalam beberapa saat. 460 00:20:03,440 --> 00:20:05,320 Tapi di mana fungsi ini didefinisikan? 461 00:20:05,320 --> 00:20:07,950 Nah biar gulir ke atas ke atas file. 462 00:20:07,950 --> 00:20:11,710 Dan meskipun itu garis panjang, itu relatif mudah. 463 00:20:11,710 --> 00:20:15,000 Biarkan saya tampilannya sini dan fokus pada empat baris. 464 00:20:15,000 --> 00:20:17,137 >> Jadi dalam JavaScript, hanya seperti PHP, Anda hanya 465 00:20:17,137 --> 00:20:19,720 katakanlah, secara harfiah, kata "fungsi," nama fungsi, 466 00:20:19,720 --> 00:20:22,700 dan kemudian kurung dengan arguments-- ada argumen dalam kasus ini. 467 00:20:22,700 --> 00:20:25,290 Dan tidak ada tipe kembali dalam JavaScript, sama seperti PHP. 468 00:20:25,290 --> 00:20:29,470 Jadi itu sedikit longgar daripada C. Terbuka penjepit keriting, dekat penjepit keriting. 469 00:20:29,470 --> 00:20:33,270 Dibangun ke JavaScript adalah sebuah function-- bukan function-- direkomendasikan 470 00:20:33,270 --> 00:20:35,730 tetapi fungsi yang disebut peringatan Satu-satunya tujuan dalam hidup yang 471 00:20:35,730 --> 00:20:38,620 adalah untuk menarik yang sangat jelek meminta bahwa kita melihat beberapa saat yang lalu. 472 00:20:38,620 --> 00:20:40,950 >> Sekarang ini adalah jenis seteguk. 473 00:20:40,950 --> 00:20:42,560 Apa yang terjadi di sini? 474 00:20:42,560 --> 00:20:45,840 Jadi mari kita mulai menyorot semuanya di sini. 475 00:20:45,840 --> 00:20:48,540 Itu argumen yang sama untuk mengingatkan. 476 00:20:48,540 --> 00:20:49,530 Dan apa yang terjadi? 477 00:20:49,530 --> 00:20:51,200 Ini hanya tampak seperti sebuah string. 478 00:20:51,200 --> 00:20:59,180 Dan ternyata, tidak seperti PHP dan tidak seperti C, tidak peduli di JavaScript 479 00:20:59,180 --> 00:21:01,090 jika Anda tanda kutip tunggal atau tanda kutip ganda. 480 00:21:01,090 --> 00:21:02,060 Mereka akan menjadi setara. 481 00:21:02,060 --> 00:21:03,769 Dan terus terang, itu hanya populer hari ini 482 00:21:03,769 --> 00:21:06,726 untuk JavaScript programmer untuk selalu menggunakan tanda kutip tunggal untuk beberapa alasan. 483 00:21:06,726 --> 00:21:07,840 Itu hanya hal yang harus dilakukan. 484 00:21:07,840 --> 00:21:09,710 Tapi kita bisa menggunakan tanda kutip ganda, juga. 485 00:21:09,710 --> 00:21:11,540 >> Jadi plus adalah karakter baru. 486 00:21:11,540 --> 00:21:14,512 Tapi bagi anda yang sudah dilakukan ini sebelumnya, apa ditambah artinya? 487 00:21:14,512 --> 00:21:16,440 Ya. 488 00:21:16,440 --> 00:21:17,120 Menggabungkan. 489 00:21:17,120 --> 00:21:18,570 Jadi kita melihat ini di PHP. 490 00:21:18,570 --> 00:21:20,315 Hanya ada titik Operator di PHP yang 491 00:21:20,315 --> 00:21:22,000 akan menggabungkan dua string bersama-sama. 492 00:21:22,000 --> 00:21:24,000 C adalah rasa sakit di leher untuk melakukan hal ini. 493 00:21:24,000 --> 00:21:27,310 Ingat dari pset enam, yang rasa sakit utama di leher, 494 00:21:27,310 --> 00:21:29,470 Anda harus menggunakan sesuatu seperti strcat 495 00:21:29,470 --> 00:21:31,660 setelah mengalokasikan memori pada stack atau tumpukan. 496 00:21:31,660 --> 00:21:34,243 Anda harus melompat melalui lingkaran hanya untuk menggabungkan dua string. 497 00:21:34,243 --> 00:21:36,040 Dalam JavaScript, itu super sederhana. 498 00:21:36,040 --> 00:21:38,030 Hanya menggunakan operator ditambah antara mereka. 499 00:21:38,030 --> 00:21:41,420 >> Jadi tampak kompleks Hal ini tampaknya menjadi 500 00:21:41,420 --> 00:21:43,490 karena pada akhir Seluruh string ini, saya hanya 501 00:21:43,490 --> 00:21:45,797 menggabungkan pada tanda seru. 502 00:21:45,797 --> 00:21:48,380 Jadi jika apa yang bermunculan itu "Halo, David," "halo, Hannah," 503 00:21:48,380 --> 00:21:52,740 "Halo, Maria," dan sebagainya, jelas bahwa hal menengah di antara kedua 504 00:21:52,740 --> 00:21:55,215 Plus harus memberikan akses ke apa? 505 00:21:55,215 --> 00:21:58,855 506 00:21:58,855 --> 00:22:01,991 Apa yang ada di sana pasti? 507 00:22:01,991 --> 00:22:02,490 Ya. 508 00:22:02,490 --> 00:22:05,090 Jadi saya akan berpura-pura di sini menjawab nama mereka, kan? 509 00:22:05,090 --> 00:22:10,380 Jadi nama mereka muncul di final Hasil. Jadi apa artinya ini? 510 00:22:10,380 --> 00:22:15,080 Nah, saya mengusulkan awal yang gambar yang disebut DOM 511 00:22:15,080 --> 00:22:18,580 memiliki elemen akar khusus jalan sampai atas disebut dokumen. 512 00:22:18,580 --> 00:22:21,660 Dan sekarang, ternyata, itu akan menjadi variabel global khusus 513 00:22:21,660 --> 00:22:25,250 dalam JavaScript, dibangun ke yang merupakan Seluruh sekelompok fungsi yang berguna. 514 00:22:25,250 --> 00:22:31,770 Di antara fungsi yang berguna adalah kemampuan untuk mendapatkan setiap simpul keturunan. 515 00:22:31,770 --> 00:22:37,760 Mereka kotak atau empat persegi panjang atau elips hanya node di pohon, sehingga untuk berbicara. 516 00:22:37,760 --> 00:22:41,850 >> Jadi ternyata yang dibangun ke Objek dokumen JavaScript ini 517 00:22:41,850 --> 00:22:47,300 adalah fungsi, atau dikenal sebagai Metode, yang disebut getElementById. 518 00:22:47,300 --> 00:22:50,410 Sintaks untuk memanggil fungsi dalam JavaScript 519 00:22:50,410 --> 00:22:55,220 yang ada di dalam suatu objek atau variabel hanya dengan notasi titik. 520 00:22:55,220 --> 00:22:57,950 Dan kami melihat ini di C apa sintaks struct. 521 00:22:57,950 --> 00:23:03,530 Anda melihat ini dalam pset tujuh, jenis, semacam, ketika Anda melihat CS50 :: query. 522 00:23:03,530 --> 00:23:08,070 Usus besar usus besar pada PHP adalah lain cara memanggil fungsi yang 523 00:23:08,070 --> 00:23:09,260 dalam beberapa objek. 524 00:23:09,260 --> 00:23:11,960 >> Tapi untuk saat ini dalam JavaScript, itu hanya sebuah titik. 525 00:23:11,960 --> 00:23:14,170 Dan fungsi ini, cukup baik, jenis 526 00:23:14,170 --> 00:23:16,810 mengatakan apa does-- mendapatkan elemen dengan ID. 527 00:23:16,810 --> 00:23:20,280 Sebuah elemen hanyalah nama lain untuk tag atau node dalam DOM. 528 00:23:20,280 --> 00:23:26,900 Dan sehingga mendapatkan elemen dengan ID "nama" berarti this-- inilah HTML saya. 529 00:23:26,900 --> 00:23:31,910 Dan berdasarkan HTML ini, apa node atau apa tag HTML aku 530 00:23:31,910 --> 00:23:35,097 akan pemrograman menjadi tangan dengan memanggil document.getElementById? 531 00:23:35,097 --> 00:23:37,650 532 00:23:37,650 --> 00:23:38,500 >> Ya, persis. 533 00:23:38,500 --> 00:23:42,670 Aku akan mendapatkan input Unsur ada yang ID adalah "nama." 534 00:23:42,670 --> 00:23:45,140 Jadi khusus, Anda bisa memikirkan fungsi ini, 535 00:23:45,140 --> 00:23:49,560 getElementById, sebagai cara memberikan kembali pointer ke node tertentu yang 536 00:23:49,560 --> 00:23:50,060 di pohon. 537 00:23:50,060 --> 00:23:51,980 Kami belum ditarik ini pohon, tapi itu cara 538 00:23:51,980 --> 00:23:54,900 mendapatkan akses ke persegi panjang atau persegi panjang yang 539 00:23:54,900 --> 00:23:58,090 oleh unik mengidentifikasi melalui ID-nya. 540 00:23:58,090 --> 00:23:59,760 >> Sekarang, mengapa ini berguna? 541 00:23:59,760 --> 00:24:01,510 Nah, ternyata bahwa setelah Anda mendapatkan 542 00:24:01,510 --> 00:24:07,220 bahwa node, yang persegi panjang dari gambar, bahwa node di dalamnya, 543 00:24:07,220 --> 00:24:10,660 pada gilirannya, memiliki sejumlah besar properties-- pasangan kunci-nilai 544 00:24:10,660 --> 00:24:13,480 atau data, salah satu yang disebut nilai. 545 00:24:13,480 --> 00:24:16,500 Jadi secara harfiah, itu semacam seteguk untuk menjelaskan semuanya. 546 00:24:16,500 --> 00:24:19,370 Tetapi pada akhir hari, semua yang dilakukan adalah memberikan 547 00:24:19,370 --> 00:24:23,070 string yang pengguna mengetik dalam mode hirarkis ini. 548 00:24:23,070 --> 00:24:24,820 Tapi aku tidak suka beberapa hal-hal ini. 549 00:24:24,820 --> 00:24:27,590 Atau lebih tepatnya, ada beberapa rasa ingin tahu masih. 550 00:24:27,590 --> 00:24:28,870 Semua itu tampaknya bekerja. 551 00:24:28,870 --> 00:24:33,420 Mengapa Anda pikir saya kembali palsu setelah memanggil menyapa? 552 00:24:33,420 --> 00:24:35,910 Ini terlihat sedikit jelek, yang Saya memiliki dua pernyataan ada 553 00:24:35,910 --> 00:24:38,730 dipisahkan oleh titik koma. 554 00:24:38,730 --> 00:24:39,310 Coba tebak. 555 00:24:39,310 --> 00:24:44,390 Jika saya dihapus kembali palsu, apa mungkin terjadi, hanya naluriah? 556 00:24:44,390 --> 00:24:46,990 557 00:24:46,990 --> 00:24:49,460 Maaf, mengatakan lagi? 558 00:24:49,460 --> 00:24:50,530 >> Membuka sekelompok Windows. 559 00:24:50,530 --> 00:24:52,780 Jadi berpotensi mungkin sesuatu seperti itu akan terjadi. 560 00:24:52,780 --> 00:24:54,422 Apa lagi? 561 00:24:54,422 --> 00:24:55,630 Mungkin mengirimkan permintaan mana? 562 00:24:55,630 --> 00:24:59,109 563 00:24:59,109 --> 00:25:00,510 Ke halaman yang sama. 564 00:25:00,510 --> 00:25:03,110 Jadi, pada kenyataannya, itu yang lebih dekat menjawab di sini, 565 00:25:03,110 --> 00:25:05,890 meskipun, tidak seperti di masa lalu, saya tidak punya 566 00:25:05,890 --> 00:25:09,300 ditentukan atribut aksi, yang biasanya harus kita lakukan. 567 00:25:09,300 --> 00:25:11,780 Ternyata ada default. Jika Anda tidak menentukan tindakan, 568 00:25:11,780 --> 00:25:15,370 itu seperti mengatakan kutipan, tanda kutip atau nama file itu sendiri, 569 00:25:15,370 --> 00:25:17,850 yang dalam hal ini akan seperti dom-0.html. 570 00:25:17,850 --> 00:25:20,420 Ini hanya semacam disimpulkan, atau lebih tepatnya tersirat. 571 00:25:20,420 --> 00:25:22,420 >> Dan jadi jika saya tidak melakukan ini, mari kita perhatikan. 572 00:25:22,420 --> 00:25:23,230 Biarkan saya simpan ini. 573 00:25:23,230 --> 00:25:25,270 Dan Aku telah menghapus kembali palsu. 574 00:25:25,270 --> 00:25:27,759 Biarkan aku pergi kembali ke ini contoh dan kekuatan reload. 575 00:25:27,759 --> 00:25:30,800 Dan Anda mungkin telah melihat saya sarankan ini pada CS50 Diskusikan beberapa kali. 576 00:25:30,800 --> 00:25:34,560 Jika sesuatu yang pernah bertindak yang funky dan Browser tidak berperilaku seperti yang Anda harapkan, 577 00:25:34,560 --> 00:25:37,410 seringkali Anda akan ingin memegang Shift dan kemudian klik Reload. 578 00:25:37,410 --> 00:25:41,480 Yang akan memaksa setiap file untuk reload dan tidak menggunakan cache lokal browser Anda 579 00:25:41,480 --> 00:25:47,032 atau copy sehingga sekarang, biarkan aku pergi ke depan dan membuka Inspektur saya, tab Jaringan. 580 00:25:47,032 --> 00:25:48,740 Aku akan klik Melestarikan Log karena saya 581 00:25:48,740 --> 00:25:51,660 tidak ingin menghapus baris setelah saya mendapatkan dibawa pergi di tempat lain. 582 00:25:51,660 --> 00:25:54,650 >> Biarkan aku pergi ke depan di sini dan ketik Andi, klik Submit. 583 00:25:54,650 --> 00:25:55,150 Baiklah. 584 00:25:55,150 --> 00:25:56,480 Yang tampaknya seperti yang diharapkan. 585 00:25:56,480 --> 00:25:57,440 Ia mengatakan "halo, Andi." 586 00:25:57,440 --> 00:25:59,420 Biarkan saya klik OK. 587 00:25:59,420 --> 00:26:00,610 Menarik. 588 00:26:00,610 --> 00:26:05,100 Perhatikan bahwa halaman berubah, meskipun ke halaman asli. 589 00:26:05,100 --> 00:26:06,770 Perhatikan URL jenis berubah. 590 00:26:06,770 --> 00:26:09,430 Ia menambahkan tanda tanya, yang biasanya merupakan indikator 591 00:26:09,430 --> 00:26:11,260 bahwa kita mencoba untuk mengirimkan sesuatu. 592 00:26:11,260 --> 00:26:13,570 Dan kemudian di bagian bawah, bahkan lebih eksplisit, 593 00:26:13,570 --> 00:26:17,570 di sini adalah permintaan HTTP yang sebenarnya, yang mendapat respon dari 200 yang 594 00:26:17,570 --> 00:26:18,490 membawa saya kembali ke sini. 595 00:26:18,490 --> 00:26:20,250 >> Jadi ini bukan apa kami ingin lakukan, kan? 596 00:26:20,250 --> 00:26:22,166 Karena saya tidak ingin ulang seluruh halaman. 597 00:26:22,166 --> 00:26:24,970 Saya bukannya ingin kembali palsu sehingga hubungan pendek 598 00:26:24,970 --> 00:26:28,840 perilaku default browser, yang adalah, tentu saja, untuk mengirimkan halaman. 599 00:26:28,840 --> 00:26:31,700 >> Jadi mari kita lihat sebuah contoh sedikit lebih baik. 600 00:26:31,700 --> 00:26:33,920 Ini adalah dom versi satu. 601 00:26:33,920 --> 00:26:36,680 Dan perhatikan berikut ini. 602 00:26:36,680 --> 00:26:39,150 Ini OK jika Anda tidak grok semua baris kode. 603 00:26:39,150 --> 00:26:41,750 Tapi apa yang fundamental berbeda tentang implementasi ini? 604 00:26:41,750 --> 00:26:44,690 Aku akan menetapkan berperilaku yang sama, melakukan hal yang sama. 605 00:26:44,690 --> 00:26:49,320 606 00:26:49,320 --> 00:26:51,570 Apa yang telah saya jelas dilakukan secara berbeda? 607 00:26:51,570 --> 00:26:52,266 Ya? 608 00:26:52,266 --> 00:26:53,182 >> AUDIENCE: [tidak terdengar]. 609 00:26:53,182 --> 00:27:03,421 610 00:27:03,421 --> 00:27:04,170 DAVID Malan: Ya. 611 00:27:04,170 --> 00:27:08,620 Jadi fungsi didefinisikan differently-- dengan kata lain, absen dari bentuk, 612 00:27:08,620 --> 00:27:13,180 di sana pada baris 7-- atau bukan, garis 8-- tidak lagi 613 00:27:13,180 --> 00:27:15,070 apakah saya harus atribut aktivitas pengiriman. 614 00:27:15,070 --> 00:27:16,750 Dalam contoh sebelumnya, saya punya ini. 615 00:27:16,750 --> 00:27:18,530 Dan kemudian aku benar-benar menulis kode saya di sini. 616 00:27:18,530 --> 00:27:20,210 Dan kemudian aku berkata kembali palsu. 617 00:27:20,210 --> 00:27:22,180 Dan jika tidak menggosok Anda dengan cara yang salah lagi, 618 00:27:22,180 --> 00:27:26,140 harus mulai sejauh sebagai, seperti di HTML, 619 00:27:26,140 --> 00:27:29,530 ketika kita mulai bersama-berbaur itu dengan CSS di atribut gaya, 620 00:27:29,530 --> 00:27:32,890 itu hanya mulai mendapatkan sedikit berantakan atau merasa sedikit salah. 621 00:27:32,890 --> 00:27:35,020 >> Demikian pula di sini, jika Anda mulai mengambil HTML, 622 00:27:35,020 --> 00:27:37,419 dan kemudian Anda secara otomatis celepuk beberapa kode JavaScript 623 00:27:37,419 --> 00:27:40,460 di tengah-tengah string yang dikutip, itu tidak akan menjadi sangat dipertahankan. 624 00:27:40,460 --> 00:27:40,630 Benar? 625 00:27:40,630 --> 00:27:43,690 Ini bahkan tidak jelas pada awalnya tempat dimana kode JavaScript. 626 00:27:43,690 --> 00:27:46,590 Jadi itu akan sangat bagus prinsip desain yang lebih baik, 627 00:27:46,590 --> 00:27:50,500 mari kita menjaga HTML kami benar-benar terpisah dari kami JavaScript. 628 00:27:50,500 --> 00:27:53,150 >> Jadi untuk melakukan itu, apa yang kita sudah dilakukan di sini adalah following-- yang 629 00:27:53,150 --> 00:27:56,790 kita hanya menggunakan HTML untuk markup saja. 630 00:27:56,790 --> 00:28:00,730 Dan di versi satu ini, semua Saya miliki adalah bentuk dengan ID unik. 631 00:28:00,730 --> 00:28:04,630 Dan kemudian di sini, aku mengambil keuntungan dari fitur khusus dari JavaScript 632 00:28:04,630 --> 00:28:08,480 dimana saya bisa memiliki apa yang disebut fungsi anonim. 633 00:28:08,480 --> 00:28:14,150 Jadi ternyata bahwa jika saya sebut document.getElementById dari 'demo' 634 00:28:14,150 --> 00:28:18,890 itu seperti memberi saya pointer ke node ini di pohon saya, unsur bentuk, 635 00:28:18,890 --> 00:28:20,100 boleh dikatakan. 636 00:28:20,100 --> 00:28:22,220 >> Sekarang, saya hanya tahu dari mengetahui sedikit HTML 637 00:28:22,220 --> 00:28:26,330 sekarang kita setelah membaca beberapa secara online referensi, bahwa elemen bentuk mendukung 638 00:28:26,330 --> 00:28:29,950 sejumlah acara listeners-- di Dengan kata lain, daftar cucian acara 639 00:28:29,950 --> 00:28:31,700 pendengar yang kami lihat beberapa saat yang lalu. 640 00:28:31,700 --> 00:28:35,950 Saya tahu dari membaca dokumentasi onsubmit yang merupakan acara yang valid 641 00:28:35,950 --> 00:28:38,520 pendengar untuk elemen form. 642 00:28:38,520 --> 00:28:41,480 >> Jadi setelah saya tahu bahwa, itu aman bagi saya untuk melakukan 643 00:28:41,480 --> 00:28:45,390 yang following-- mendapatkan node yang dari pohon, elemen bentuk, 644 00:28:45,390 --> 00:28:48,070 dan akses yang disebut-nya Properti aktivitas pengiriman. 645 00:28:48,070 --> 00:28:49,880 Jadi titik hanya berarti ini adalah properti, 646 00:28:49,880 --> 00:28:52,180 seperti nilai khusus di dalamnya. 647 00:28:52,180 --> 00:28:55,590 Dan apa tipe data aku menugaskan, tampaknya, 648 00:28:55,590 --> 00:28:58,900 untuk aktivitas pengiriman, yang merupakan efektif variabel dalam 649 00:28:58,900 --> 00:29:01,010 dari yang node di pohon? 650 00:29:01,010 --> 00:29:04,100 Ini adalah bidang dalam struct itu. 651 00:29:04,100 --> 00:29:05,810 Apa tipe data? 652 00:29:05,810 --> 00:29:07,030 >> Fungsi, ya. 653 00:29:07,030 --> 00:29:08,607 Jadi ternyata bahwa PHP memiliki ini. 654 00:29:08,607 --> 00:29:10,440 Dan meskipun kita tidak memberitahu Anda tentang hal itu, 655 00:29:10,440 --> 00:29:16,240 C juga memiliki fungsi pointer, yang kemampuan untuk melewati dan menetapkan fungsi 656 00:29:16,240 --> 00:29:18,330 sebagai nilai-nilai variabel 'sendiri. 657 00:29:18,330 --> 00:29:20,280 Dan kita tidak akan untuk mundur kembali ke C. 658 00:29:20,280 --> 00:29:23,250 Tapi untuk saat ini, ternyata bahwa di sisi kanan di sini, 659 00:29:23,250 --> 00:29:26,260 meskipun terlihat sedikit funky, ini berarti, hey peramban, 660 00:29:26,260 --> 00:29:27,550 memberikan fungsi. 661 00:29:27,550 --> 00:29:30,560 Aku tidak akan repot-repot memberikan itu nama karena aku benar-benar 662 00:29:30,560 --> 00:29:34,450 akan menetapkan sebut saja alamat fungsi ini 663 00:29:34,450 --> 00:29:35,994 segera untuk aktivitas pengiriman. 664 00:29:35,994 --> 00:29:39,160 Dengan kata lain, browser, Anda tidak perlu tahu apa fungsi ini disebut. 665 00:29:39,160 --> 00:29:41,890 Anda hanya perlu tahu di mana dalam memori. 666 00:29:41,890 --> 00:29:44,210 Dan itu sudah cukup hanya untuk memiliki tanda sama ada 667 00:29:44,210 --> 00:29:48,240 dan tidak repot-repot penamaan ini, seperti foo atau menyapa atau kata lainnya. 668 00:29:48,240 --> 00:29:50,150 Dan sekarang ini adalah hal gaya. 669 00:29:50,150 --> 00:29:53,100 Saya bisa bergerak brace keriting ini ke the-- sorry-- baris berikutnya 670 00:29:53,100 --> 00:29:54,750 seperti biasanya kita lakukan CS50. 671 00:29:54,750 --> 00:29:57,550 Tapi dalam JavaScript, itu sebenarnya Gaya umum 672 00:29:57,550 --> 00:30:00,450 untuk terus penjepit keriting, yang pertama, pada baris pertama. 673 00:30:00,450 --> 00:30:02,620 >> Tapi selanjutnya, ada tidak ada yang menarik. 674 00:30:02,620 --> 00:30:05,830 Itu brace keriting terbuka hanya demarcates awal fungsi saya. 675 00:30:05,830 --> 00:30:09,320 Fungsi ini sekarang identik, kecuali saya sudah 676 00:30:09,320 --> 00:30:11,452 termasuk palsu kembali dalam fungsi ini. 677 00:30:11,452 --> 00:30:13,160 Karena ternyata out-- Anda hanya akan dan 678 00:30:13,160 --> 00:30:14,980 tahu ini dari membaca documentation-- yang 679 00:30:14,980 --> 00:30:19,740 bahwa jika fungsi yang Anda tetapkan untuk penangan aktivitas pengiriman kembali palsu, 680 00:30:19,740 --> 00:30:23,420 browser hanya tahu dan setuju tidak menyerahkan formulir ke server. 681 00:30:23,420 --> 00:30:27,210 Jika kembali benar, itu akan menyerahkan ke server untuk alasan kita akan melihat 682 00:30:27,210 --> 00:30:28,700 berguna hanya dalam beberapa saat. 683 00:30:28,700 --> 00:30:31,000 >> Dan kemudian koma setelah penjepit keriting ada hanya 684 00:30:31,000 --> 00:30:32,541 berarti aku sudah selesai mendefinisikan fungsi. 685 00:30:32,541 --> 00:30:36,600 Anda tahu apa yang harus memanggil segera Anda mendengar submisi. 686 00:30:36,600 --> 00:30:37,100 Baiklah. 687 00:30:37,100 --> 00:30:40,650 Ini masih bisa dibilang agak jelek. 688 00:30:40,650 --> 00:30:42,190 Jadi apa lagi yang bisa kita lakukan? 689 00:30:42,190 --> 00:30:45,000 >> Nah, ternyata kemudian di versi dua, yang merupakan last-- 690 00:30:45,000 --> 00:30:46,780 dan kami hanya akan melirik ini. 691 00:30:46,780 --> 00:30:49,850 Pada risiko membuat itu jelek, ternyata 692 00:30:49,850 --> 00:30:52,160 bahwa ada perpustakaan di dunia disebut jQuery. 693 00:30:52,160 --> 00:30:54,900 Dan jQuery adalah super perpustakaan JavaScript populer 694 00:30:54,900 --> 00:30:57,930 yang begitu populer yang paling setiap JavaScript-- itu tidak 695 00:30:57,930 --> 00:31:00,540 jarang orang bingung jQuery dengan JavaScript. 696 00:31:00,540 --> 00:31:01,070 Mengapa? 697 00:31:01,070 --> 00:31:04,990 JavaScript itu sendiri memiliki sangat cara verbose melakukan things-- 698 00:31:04,990 --> 00:31:07,820 document.getElementById, dadadadadada. 699 00:31:07,820 --> 00:31:10,510 Anda akhirnya memiliki sangat antrean panjang kode. 700 00:31:10,510 --> 00:31:15,550 >> Jadi seorang bernama John Resid, yang benar-benar bekerja untuk startup 701 00:31:15,550 --> 00:31:18,630 up hari ini, keluar dengan perpustakaan ini tahun 702 00:31:18,630 --> 00:31:22,070 lalu bahwa banyak orang telah berkontribusi untuk disebut jQuery yang berubah 703 00:31:22,070 --> 00:31:23,449 sintaks dengan cara berikut. 704 00:31:23,449 --> 00:31:25,740 Dan hanya jadi Anda pernah melihat ini, karena Anda akan selalu 705 00:31:25,740 --> 00:31:28,140 melihat ini jika melakukan tugas akhir berbasis web, 706 00:31:28,140 --> 00:31:33,270 ini akan menjadi cara setara melaksanakan fungsi yang sama menggunakan 707 00:31:33,270 --> 00:31:34,630 perpustakaan khusus ini. 708 00:31:34,630 --> 00:31:36,680 >> Sekarang, bukan menggoda terpisah secara keseluruhan, 709 00:31:36,680 --> 00:31:38,520 mari kita lihat beberapa pola. 710 00:31:38,520 --> 00:31:44,850 Sintaks ini tampaknya memiliki berapa banyak fungsi anonim 711 00:31:44,850 --> 00:31:49,584 atau fungsi tanpa nama atau fungsi lambda AKA? 712 00:31:49,584 --> 00:31:50,190 Dua, kan? 713 00:31:50,190 --> 00:31:52,690 Dan Anda tahu bahwa, bahkan jika Anda tidak super nyaman dengan ini, 714 00:31:52,690 --> 00:31:55,780 hanya dengan fakta bahwa kata function () dua kali. 715 00:31:55,780 --> 00:31:58,172 >> Dan ternyata apa kode ini doing-- 716 00:31:58,172 --> 00:32:01,255 dan kami akan mengacu pada referensi online, akhirnya, untuk bantuan dengan ini. 717 00:32:01,255 --> 00:32:04,480 Ini hanya berarti bahwa ketika dokumen siap, 718 00:32:04,480 --> 00:32:07,490 pergi ke depan dan mendaftar fungsi berikut 719 00:32:07,490 --> 00:32:12,064 sebagai menyerahkan handler untuk HTML elemen yang ide unik adalah demo. 720 00:32:12,064 --> 00:32:14,480 Dan kemudian, ketika itu terjadi, menyebut dua baris kode. 721 00:32:14,480 --> 00:32:18,677 Dan ini, tragis, lebih cara verbose mengatakan kembali palsu. 722 00:32:18,677 --> 00:32:21,510 Dan kami sebutkan ini hanya karena Anda akan melihat kode seperti online ini. 723 00:32:21,510 --> 00:32:23,140 Dan itu tidak akan gentar dengan. 724 00:32:23,140 --> 00:32:26,057 Melainkan, perlu diingat bahwa apa yang akan menjadi umum dalam JavaScript 725 00:32:26,057 --> 00:32:26,765 adalah paradigma ini. 726 00:32:26,765 --> 00:32:29,510 Dan itu sebabnya kami menunjukkan itu untuk saat ini. 727 00:32:29,510 --> 00:32:30,010 Baiklah. 728 00:32:30,010 --> 00:32:32,730 Jadi tanpa tinggal terlalu banyak pada sintaks itu, 729 00:32:32,730 --> 00:32:37,800 yang ada pertanyaan tentang contoh atau ide-ide ini sejauh ini? 730 00:32:37,800 --> 00:32:38,300 Baiklah. 731 00:32:38,300 --> 00:32:40,220 Jadi mari kita gunakan ini untuk sesuatu yang bermanfaat. 732 00:32:40,220 --> 00:32:47,070 Membuat halaman web yang hanya mengatakan halo, begitu dan begitu tidak semua yang menarik, 733 00:32:47,070 --> 00:32:47,830 tidak underwhelm. 734 00:32:47,830 --> 00:32:51,038 Yang satu ini tidak akan menjadi indah, tapi itu akan melakukan sesuatu yang berguna. 735 00:32:51,038 --> 00:32:56,350 Biarkan aku kembali ke direktori saya di sini dan membuka, mengatakan, bentuk-0.html. 736 00:32:56,350 --> 00:32:59,320 >> Jadi kira ini adalah mahasiswa yang halaman pendaftaran olahraga intramural 737 00:32:59,320 --> 00:33:01,780 tanpa CSS atau rasa desain. 738 00:33:01,780 --> 00:33:05,404 Dan saya ingin pergi ke depan dan mendaftar di sini dengan password. 739 00:33:05,404 --> 00:33:08,320 Dan aku akan setuju dengan persyaratan dan kondisi dan klik Daftar. 740 00:33:08,320 --> 00:33:11,700 Dan sekarang website mengatakan, "Kamu terdaftar! (Yah, tidak benar-benar.) " 741 00:33:11,700 --> 00:33:15,070 Yang tampaknya seperti itu bekerja, tapi biarkan aku pergi ke depan dan memaksa reload. 742 00:33:15,070 --> 00:33:18,720 >> Dan saya katakan, tidak ada, Anda tidak membutuhkan alamat email yang sebenarnya saya. 743 00:33:18,720 --> 00:33:21,820 Atau mungkin kita hanya akan mengatakan mail dalam sana. 744 00:33:21,820 --> 00:33:25,080 Sandi akan, seperti, 12345. 745 00:33:25,080 --> 00:33:28,810 Dan kemudian, hanya karena aku idiot, sekarang 123.456.789. 746 00:33:28,810 --> 00:33:31,150 Dan aku tidak akan memeriksa kotak Anda. 747 00:33:31,150 --> 00:33:31,850 >> Hmm. 748 00:33:31,850 --> 00:33:32,350 Baiklah. 749 00:33:32,350 --> 00:33:34,920 Jadi ada beberapa peluang untuk perbaikan di sini. 750 00:33:34,920 --> 00:33:39,070 Dan kau tahu, atau akan melihat di pset tujuh, bahwa Anda dapat menulis code-- 751 00:33:39,070 --> 00:33:41,890 dan Anda harus menulis Kode di PHP-- untuk membela 752 00:33:41,890 --> 00:33:45,780 terhadap jenis-jenis pengguna kesalahan karena pengguna jelas 753 00:33:45,780 --> 00:33:46,790 belum bekerja sama. 754 00:33:46,790 --> 00:33:49,680 Dan ia tidak memberi Anda semua nilai yang Anda inginkan atau bahkan dalam format 755 00:33:49,680 --> 00:33:50,630 bahwa Anda ingin mereka. 756 00:33:50,630 --> 00:33:53,250 Jadi, Anda akan melihat di pset tujuh yang kita pasti bisa memiliki beberapa 757 00:33:53,250 --> 00:33:55,680 jika kondisi yang mengatakan jika alamat email 758 00:33:55,680 --> 00:33:59,450 tidak username@something.edu sebuah, kita bisa hanya 759 00:33:59,450 --> 00:34:02,575 minta maaf dan meminta maaf kepada pengguna banyak, seperti Anda mungkin di pset tujuh. 760 00:34:02,575 --> 00:34:05,700 Atau jika mereka belum memeriksa kotak itu, Ternyata di PHP, Anda dapat mendeteksi itu, 761 00:34:05,700 --> 00:34:06,200 juga. 762 00:34:06,200 --> 00:34:09,389 Dan tentu jika password tidak cocok seperti di register.php 763 00:34:09,389 --> 00:34:11,521 untuk pset tujuh, Anda bisa mendeteksi itu. 764 00:34:11,521 --> 00:34:13,770 Tapi itu sakit di leher di bahwa sekarang mereka meminta 765 00:34:13,770 --> 00:34:15,510 kita untuk pergi semua jalan ke server. 766 00:34:15,510 --> 00:34:17,053 Pengguna diberitahu tentang kesalahan. 767 00:34:17,053 --> 00:34:19,219 Dan setidaknya kecuali jika Anda menggunakan beberapa teknik pengujian, 768 00:34:19,219 --> 00:34:20,929 sekarang mereka harus mengklik panah kembali. 769 00:34:20,929 --> 00:34:23,300 Bukankah lebih bagus, seperti banyak situs hari ini, 770 00:34:23,300 --> 00:34:26,190 jika Anda memiliki lebih cepat umpan balik, langsung? 771 00:34:26,190 --> 00:34:31,389 >> Dengan kata lain, biarkan aku pergi ke versi satu, yang akan menjadi tidak cantik. 772 00:34:31,389 --> 00:34:33,469 Tetapi memiliki fitur ini. 773 00:34:33,469 --> 00:34:39,590 Malan, 12345, 123456789, tidak akan memeriksa kotak, Register. 774 00:34:39,590 --> 00:34:41,330 Sandi tidak cocok. 775 00:34:41,330 --> 00:34:44,459 Jadi meskipun ini pop-up adalah ugly-- kita bisa mengganti ini akhirnya 776 00:34:44,459 --> 00:34:47,000 dengan sesuatu seperti Bootstrap, yang akan Anda lihat di pset tujuh 777 00:34:47,000 --> 00:34:50,239 adalah library-- sangat populer yang saya lakukan mendeteksi bahwa password tidak cocok. 778 00:34:50,239 --> 00:34:50,739 Baiklah. 779 00:34:50,739 --> 00:34:52,530 Nah, biarkan aku memperbaikinya sebagai pengguna. 780 00:34:52,530 --> 00:34:55,460 Biarkan aku pergi ke depan dan mengatakan 12.345, 12.345. 781 00:34:55,460 --> 00:34:57,780 Masih tidak memeriksa perjanjian. 782 00:34:57,780 --> 00:35:00,210 Anda harus menyetujui syarat dan Ketentuan. 783 00:35:00,210 --> 00:35:01,760 Jadi kenapa? 784 00:35:01,760 --> 00:35:04,100 >> Jika kita sudah mengemukakan bahwa ada cara, 785 00:35:04,100 --> 00:35:07,260 dan kami sudah diperlukan Anda di pset tujuh untuk mendeteksi kesalahan 786 00:35:07,260 --> 00:35:09,780 Kondisi seperti ini server-side, mengapa harus saya 787 00:35:09,780 --> 00:35:13,940 repot juga melakukan hal ini di JavaScript? 788 00:35:13,940 --> 00:35:15,850 Apa argumen di mendukung menambahkan apa 789 00:35:15,850 --> 00:35:18,760 Anda akan melihat sebagai some-- ada kompleksitas tambahan. 790 00:35:18,760 --> 00:35:23,610 791 00:35:23,610 --> 00:35:25,930 >> Mungkin tidak ada terbalik. 792 00:35:25,930 --> 00:35:26,924 Apa yang bisa itu? 793 00:35:26,924 --> 00:35:27,840 AUDIENCE: [tidak terdengar]. 794 00:35:27,840 --> 00:35:31,132 795 00:35:31,132 --> 00:35:32,340 DAVID Malan: Oh, menarik. 796 00:35:32,340 --> 00:35:33,530 Potensi eksploitasi. 797 00:35:33,530 --> 00:35:37,540 Begitu yakin, jika Anda tidak menangani input pengguna yang salah bahwa besar, 798 00:35:37,540 --> 00:35:40,170 mungkin itu semua lebih baik jika bahkan tidak mencapai server Anda. 799 00:35:40,170 --> 00:35:42,160 Saya akan mendorong kembali ke sana dan katakanlah, Anda mungkin harus 800 00:35:42,160 --> 00:35:43,284 memperbaiki kedua masalah tersebut. 801 00:35:43,284 --> 00:35:44,140 Tapi itu adil. 802 00:35:44,140 --> 00:35:44,710 Apa lagi? 803 00:35:44,710 --> 00:35:45,626 >> AUDIENCE: [tidak terdengar]. 804 00:35:45,626 --> 00:35:47,970 805 00:35:47,970 --> 00:35:49,014 >> DAVID Malan: Ya. 806 00:35:49,014 --> 00:35:51,680 Kode ini, seperti yang kita katakan sebelumnya, adalah ditafsirkan pada sisi client. 807 00:35:51,680 --> 00:35:53,846 Itu tidak mengganggu server, yang berarti tidak 808 00:35:53,846 --> 00:35:55,930 dampak beban server atau kapasitas. 809 00:35:55,930 --> 00:35:59,840 Dan sekarang, untuk sedikit saya tua, ini tidak memiliki efek yang berarti 810 00:35:59,840 --> 00:36:01,970 karena saya memiliki satu pengguna sekarang. 811 00:36:01,970 --> 00:36:04,010 >> Tapi jika Anda setiap situs dari ukuran yang layak, 812 00:36:04,010 --> 00:36:07,400 terutama yang terbesar, seperti Facebook, semakin Anda dapat membuat orang off 813 00:36:07,400 --> 00:36:09,927 server Anda lebih baik karena server, tentu saja, 814 00:36:09,927 --> 00:36:12,510 hanya memiliki jumlah terbatas RAM, jumlah terbatas gigahertz, 815 00:36:12,510 --> 00:36:16,340 jumlah terbatas hal ia bisa melakukan per unit waktu. 816 00:36:16,340 --> 00:36:19,170 Jadi jika ada lebih banyak orang di dunia memukul server Anda, 817 00:36:19,170 --> 00:36:21,750 sengaja penebangan salah, sama dengan baik jika Anda 818 00:36:21,750 --> 00:36:23,254 dapat menjaga beban itu dari server Anda. 819 00:36:23,254 --> 00:36:25,420 Plus, terutama pada mobile device-- jika Anda sudah pernah 820 00:36:25,420 --> 00:36:29,190 login ke my.harvard atau Netid Yale atau sejenisnya, 821 00:36:29,190 --> 00:36:32,330 ada ini latency dengan banyak situs seperti itu dimana dibutuhkan, 822 00:36:32,330 --> 00:36:34,110 seperti, sialan satu atau dua detik kadang-kadang. 823 00:36:34,110 --> 00:36:37,979 Dan kemudian, Tuhan, jika Anda salah ketik, maka Anda harus memukul kembali dan mengulang hal itu. 824 00:36:37,979 --> 00:36:40,520 Jadi ada latency, terutama pada koneksi jaringan lambat. 825 00:36:40,520 --> 00:36:43,030 Tapi JavaScript, karena itu berjalan pada klien 826 00:36:43,030 --> 00:36:46,720 dan tidak perlu bolak-balik di internet berpotensi lambat 827 00:36:46,720 --> 00:36:49,780 koneksi, Anda bisa mendapatkan umpan balik hampir seketika. 828 00:36:49,780 --> 00:36:50,760 >> Jadi mari kita lihat ini. 829 00:36:50,760 --> 00:36:54,280 Mari saya membuka bentuk-0 dan melihat HTML di sini. 830 00:36:54,280 --> 00:36:56,040 Dan mari kita lihat apa yang terjadi. 831 00:36:56,040 --> 00:36:59,460 Ini adalah bentuk yang tindakan register.php. 832 00:36:59,460 --> 00:37:01,530 Aku hanya menggunakan mendapatkan begitu bahwa aku bisa melihat URL. 833 00:37:01,530 --> 00:37:05,030 Tapi untuk password, kita pasti ingin untuk mengubah ini untuk mengirim dalam kenyataan. 834 00:37:05,030 --> 00:37:06,910 Berikut ini adalah field input dari jenis teks. 835 00:37:06,910 --> 00:37:09,050 Berikut masukan lain bidang jenis password. 836 00:37:09,050 --> 00:37:13,150 Berikut ini adalah, jika Anda belum pernah melihat, masukan dari jenis kotak centang. 837 00:37:13,150 --> 00:37:15,250 >> Tapi tidak ada JavaScript sini apapun. 838 00:37:15,250 --> 00:37:18,170 Ini hanya HTML yang pergi ke register.php. 839 00:37:18,170 --> 00:37:21,020 Tapi dalam versi satu, di mana saya mulai mendapatkan orang-orang pop-up, 840 00:37:21,020 --> 00:37:23,010 mari kita lihat apa yang sebenarnya terjadi di sini. 841 00:37:23,010 --> 00:37:26,757 Dalam versi satu, apa Aku akan see-- saya 842 00:37:26,757 --> 00:37:29,340 pikir saya bisa kios cukup dengan kata-kata cukup, tapi aku berlari keluar. 843 00:37:29,340 --> 00:37:35,180 844 00:37:35,180 --> 00:37:38,590 >> Dalam versi satu-- ada kita pergi. 845 00:37:38,590 --> 00:37:43,180 Dalam versi satu, melihat following-- dan tidak implementasi terbaik, 846 00:37:43,180 --> 00:37:44,420 tapi itu pertama saya. 847 00:37:44,420 --> 00:37:47,680 Perhatikan bahwa di bawah bentuk, saya memiliki tag script. 848 00:37:47,680 --> 00:37:49,430 Dan tag script berarti, hey, browser, disini 849 00:37:49,430 --> 00:37:52,340 datang beberapa kode di, biasanya, JavaScript. 850 00:37:52,340 --> 00:37:54,420 Dan sekarang, melihat apa yang saya lakukan. 851 00:37:54,420 --> 00:37:59,070 Pada line-- Saya hampir tidak bisa baca itu-- garis 32, ia mengatakan, 852 00:37:59,070 --> 00:38:01,420 var form-- sehingga memberi saya variabel yang disebut bentuk. 853 00:38:01,420 --> 00:38:05,049 Dan kemudian mendapatkan document.getElementId dari "pendaftaran." 854 00:38:05,049 --> 00:38:05,590 Apa ini? 855 00:38:05,590 --> 00:38:07,290 Nah, biarkan aku mundur di sini. 856 00:38:07,290 --> 00:38:11,510 Dan pemberitahuan, ah, saya memberikan bentuk elemen ide sewenang-wenang tapi deskriptif 857 00:38:11,510 --> 00:38:13,050 pendaftaran. 858 00:38:13,050 --> 00:38:16,820 Jadi ini memberi saya sebuah variabel yang memungkinkan saya untuk ambil simpul itu, 859 00:38:16,820 --> 00:38:19,580 yang persegi panjang di pohon yang disebut bentuk. 860 00:38:19,580 --> 00:38:24,460 berarti form.onsubmit, hey peramban, mendaftarkan pendengar acara 861 00:38:24,460 --> 00:38:25,470 pada formulir ini. 862 00:38:25,470 --> 00:38:28,890 Dengan kata lain, ketika formulir ini disampaikan, mengeksekusi kode berikut. 863 00:38:28,890 --> 00:38:30,810 Itu tidak membutuhkan nama karena mengapa Anda perlu tahu nama? 864 00:38:30,810 --> 00:38:32,880 Anda hanya perlu tahu apa untuk mengeksekusi, ergo 865 00:38:32,880 --> 00:38:35,610 itu fungsi anonim atau lambda. 866 00:38:35,610 --> 00:38:37,632 Dan fungsi yang semua garis-garis ini di sini. 867 00:38:37,632 --> 00:38:40,840 Dan sekarang, jujur, meskipun Anda mungkin tidak pernah ditulis JavaScript 868 00:38:40,840 --> 00:38:44,200 sebelumnya, itu hanya C dan PHP logika. 869 00:38:44,200 --> 00:38:51,720 Jadi jika form.email.value == "" - jadi jika bidang email kosong, 870 00:38:51,720 --> 00:38:54,980 berteriak pada pengguna dengan "Anda harus Alamat email Anda. " 871 00:38:54,980 --> 00:38:58,980 Lain jika form.password.value adalah teriakan kosong di pengguna, 872 00:38:58,980 --> 00:39:00,400 "Anda harus memberikan password Anda." 873 00:39:00,400 --> 00:39:04,240 >> Lebih menarik secara logis, jika form.password.value tidak 874 00:39:04,240 --> 00:39:08,630 form.confirmation.value-- sama mana konfirmasi berasal? 875 00:39:08,630 --> 00:39:09,470 Biarkan saya mundur. 876 00:39:09,470 --> 00:39:12,870 Nah, aku menelepon masukan ini bidang sini sandi. 877 00:39:12,870 --> 00:39:15,180 Dan aku menelepon satu ini di sini konfirmasi. 878 00:39:15,180 --> 00:39:17,850 Saya bisa menyebutnya sandi dua atau apa pun. 879 00:39:17,850 --> 00:39:20,560 Aku hanya logis memeriksa yang kedua adalah sama. 880 00:39:20,560 --> 00:39:25,760 Else-- ternyata ini adalah Mr Boole again-- nilai Boolean, kotak centang. 881 00:39:25,760 --> 00:39:29,810 Jadi jika saya katakan, seru point-- jika tidak form.agreement.checked, 882 00:39:29,810 --> 00:39:31,820 berteriak pada pengguna juga. 883 00:39:31,820 --> 00:39:34,470 >> Jadi sintaks ini Anda akan melihat adalah sangat umum dalam JavaScript, 884 00:39:34,470 --> 00:39:35,970 di mana Anda memiliki notasi bertitik ini. 885 00:39:35,970 --> 00:39:37,460 Anda mulai dengan sebuah objek di sini. 886 00:39:37,460 --> 00:39:41,430 Anda menyelam lebih dalam ke ke properti seperti password. 887 00:39:41,430 --> 00:39:43,280 Dan kemudian Anda mendapatkan nilai yang sebenarnya. 888 00:39:43,280 --> 00:39:45,830 Dan lagi, di sini adalah input. 889 00:39:45,830 --> 00:39:47,310 Berikut adalah nama sandi. 890 00:39:47,310 --> 00:39:50,860 Dan nilainya apapun manusia sebenarnya telah diketik di. 891 00:39:50,860 --> 00:39:53,610 >> Jadi dalam semua ini kasus, saya kembali palsu. 892 00:39:53,610 --> 00:39:55,800 Tapi jika tidak, saya kembali benar. 893 00:39:55,800 --> 00:39:58,030 Dan sekarang kita melihat penggunaan menarik dari saat 894 00:39:58,030 --> 00:40:00,620 Anda akan kembali palsu untuk menghentikan apa pengguna melakukan 895 00:40:00,620 --> 00:40:03,200 dan membuat dia memilih lagi atau ketik lagi. 896 00:40:03,200 --> 00:40:05,870 Jika tidak, kita kembali benar. 897 00:40:05,870 --> 00:40:08,585 >> Dan biarkan saya memperkenalkan satu varian lain dari ini hanya 898 00:40:08,585 --> 00:40:13,140 untuk benih beberapa pemahaman tersebut. 899 00:40:13,140 --> 00:40:16,850 Nah, di versi 2 ini, bentuk-2-- Aku akan melakukannya dengan gelombang tangan. 900 00:40:16,850 --> 00:40:19,920 Hal ini, bagi mereka yang ingin tahu, versi jQuery, 901 00:40:19,920 --> 00:40:23,330 Bagi Anda yang mungkin ingin mencoba-coba dalam perpustakaan tertentu. 902 00:40:23,330 --> 00:40:25,145 Tapi mari kita start-- dan pertanyaan? 903 00:40:25,145 --> 00:40:29,230 Biarkan saya berhenti sejenak karena yang cepat dan banyak. 904 00:40:29,230 --> 00:40:32,610 >> Tapi hal yang baik di sini adalah bahwa semua dari kode ini hampir sama. 905 00:40:32,610 --> 00:40:33,985 Hal-hal baru adalah apa dom? 906 00:40:33,985 --> 00:40:35,115 Apa persegi panjang ini? 907 00:40:35,115 --> 00:40:35,990 Apa node ini? 908 00:40:35,990 --> 00:40:37,540 Apa fungsi anonim? 909 00:40:37,540 --> 00:40:38,830 Apa event handler? 910 00:40:38,830 --> 00:40:43,480 Tapi untungnya, sebagian besar yang hanya lingkaran penuh dari, katakanlah, seminggu nol. 911 00:40:43,480 --> 00:40:43,980 Baiklah. 912 00:40:43,980 --> 00:40:46,070 Jadi sesuatu yang sedikit lebih menarik? 913 00:40:46,070 --> 00:40:49,340 Yah, pertama-tama, biarkan aku pergi depan dan membuka Google Maps. 914 00:40:49,340 --> 00:40:53,360 Dan Anda akan melihat bahwa untuk saat, pada sepersekian detik, 915 00:40:53,360 --> 00:40:55,930 melihat apa yang terjadi ketika Saya klik cukup cepat. 916 00:40:55,930 --> 00:40:59,720 Dan hubungan ini di Harvard begitu cepat bahwa Anda tidak benar-benar menyadarinya. 917 00:40:59,720 --> 00:41:04,469 Tapi apa yang Anda jenis semacam melihat jika saya klik dan tarik benar-benar cepat? 918 00:41:04,469 --> 00:41:07,010 Bagi Anda menonton online, jika Anda memperlambat ini untuk kecepatan 0.5x, 919 00:41:07,010 --> 00:41:09,640 Anda dapat melihat hal ini lebih baik. 920 00:41:09,640 --> 00:41:13,550 >> Apa yang terjadi hanya sebelum aku diklik dan diseret? 921 00:41:13,550 --> 00:41:15,900 Biarkan aku mencoba di sini-membiarkan saya melakukan sesuatu yang lain, seperti 90210. 922 00:41:15,900 --> 00:41:17,550 Mari kita pergi jauh. 923 00:41:17,550 --> 00:41:19,000 Itu benar-benar cepat, juga. 924 00:41:19,000 --> 00:41:22,460 Bagaimana Disney World? 925 00:41:22,460 --> 00:41:23,190 Di sana kami pergi. 926 00:41:23,190 --> 00:41:23,690 OKE. 927 00:41:23,690 --> 00:41:26,030 Apa yang Anda lihat untuk sepersekian detik? 928 00:41:26,030 --> 00:41:27,200 Hanya, seperti, kotak, kan? 929 00:41:27,200 --> 00:41:28,930 Penampung untuk ubin? 930 00:41:28,930 --> 00:41:30,270 >> Nah, apa yang terjadi di sini? 931 00:41:30,270 --> 00:41:35,410 Google Maps adalah contoh yang bagus dari teknologi ini yang disebut AJAX. 932 00:41:35,410 --> 00:41:38,510 Dan ini adalah di mana kita akan mulai menggunakan JavaScript dalam terutama 933 00:41:38,510 --> 00:41:39,277 cara memikat. 934 00:41:39,277 --> 00:41:41,610 Kembali pada hari, ada website ini disebut MapQuest. 935 00:41:41,610 --> 00:41:44,120 Dan aku harus mengambil screenshot ini dari tahun 1990-an, 936 00:41:44,120 --> 00:41:45,820 di mana jika Anda ingin terlihat di sini pada peta, 937 00:41:45,820 --> 00:41:48,590 Anda benar-benar akan klik panah di atas yang menunjukkan Anda 938 00:41:48,590 --> 00:41:49,870 persegi yang berbeda dari peta. 939 00:41:49,870 --> 00:41:51,790 Jika Anda ingin bergerak ke kiri, Anda diklik panah yang menunjukkan Anda 940 00:41:51,790 --> 00:41:53,210 persegi yang berbeda dari peta. 941 00:41:53,210 --> 00:41:54,840 Dan beberapa website masih lakukan hari ini. 942 00:41:54,840 --> 00:41:57,820 Tetapi bahkan MapQuest telah mendapat lebih baik, seperti Google Maps. 943 00:41:57,820 --> 00:42:01,880 >> Sebaliknya, apa yang lebih baik ini hari adalah website yang menggunakan AJAX. 944 00:42:01,880 --> 00:42:04,510 AJAX-- atau dikenal sebagai Asynchronous JavaScript dan XML, 945 00:42:04,510 --> 00:42:08,370 yang adalah cara mewah mengatakan teknologi atau teknik yang 946 00:42:08,370 --> 00:42:14,200 memungkinkan browser menggunakan JavaScript untuk membuat permintaan HTTP tambahan 947 00:42:14,200 --> 00:42:16,390 setelah halaman telah dimuat. 948 00:42:16,390 --> 00:42:17,479 Jadi apa artinya ini? 949 00:42:17,479 --> 00:42:19,270 Nah, itu akan menjadi semacam menjengkelkan di Gmail 950 00:42:19,270 --> 00:42:21,103 jika setiap kali Anda ingin untuk memeriksa email Anda, 951 00:42:21,103 --> 00:42:24,940 Anda telah benar-benar memukul Control-R atau Perintah-R atau klik tombol Reload 952 00:42:24,940 --> 00:42:26,580 dan seluruh halaman sialan akan reload. 953 00:42:26,580 --> 00:42:26,800 Benar? 954 00:42:26,800 --> 00:42:28,460 Ini akan berkedip putih mungkin untuk kedua. 955 00:42:28,460 --> 00:42:30,043 Anda akan melihat bodoh progress bar. 956 00:42:30,043 --> 00:42:33,170 Dan hanya untuk melihat apakah Anda memiliki baru email, halaman web dan seluruh URL 957 00:42:33,170 --> 00:42:34,580 Anda berada di harus reload. 958 00:42:34,580 --> 00:42:35,960 >> Tapi itu bukan apa yang terjadi di Gmail. 959 00:42:35,960 --> 00:42:36,459 Benar? 960 00:42:36,459 --> 00:42:40,300 Ketika Anda mendapatkan email baru di Gmail, apa yang terjadi di layar? 961 00:42:40,300 --> 00:42:41,480 Itu hanya muncul, kan? 962 00:42:41,480 --> 00:42:44,280 Itu hanya ajaib muncul sebagai baris baru dalam tabel. 963 00:42:44,280 --> 00:42:47,030 Yang benar-benar melibatkan jumlah yang layak kompleksitas. 964 00:42:47,030 --> 00:42:51,892 Bahkan, jika Anda berpikir tentang pohon ini, yang meskipun sangat sederhana di sini, 965 00:42:51,892 --> 00:42:54,100 Gmail-- dan aku harus melihat kode untuk menjadi sure-- 966 00:42:54,100 --> 00:42:58,710 mungkin memiliki sebuah tabel HTML atau mungkin daftar unordered yang membuat 967 00:42:58,710 --> 00:43:01,060 setiap email inbox Anda sebagai. 968 00:43:01,060 --> 00:43:04,050 >> Dan jadi jika Anda membayangkan ini ada adalah pohon dalam memori ketika Anda 969 00:43:04,050 --> 00:43:09,050 menggunakan Gmail yang terlihat seperti semacam seperti ini, ketika Google menyadari, ooh, 970 00:43:09,050 --> 00:43:12,770 Anda memiliki email baru, tidak ingin membangun kembali seluruh pohon. 971 00:43:12,770 --> 00:43:16,430 Sebaliknya, ia ingin menemukan node di pohon yang mewakili inbox Anda 972 00:43:16,430 --> 00:43:18,580 dan hanya menyisipkan node baru. 973 00:43:18,580 --> 00:43:24,640 >> Jadi sangat mirip dengan pset lima, di mana Anda harus memasukkan node ke dalam tabel hash, 974 00:43:24,640 --> 00:43:28,410 sama halnya Google, melalui Kode JavaScript yang telah ditulis, 975 00:43:28,410 --> 00:43:31,890 melintasi pohon ini, mencari tahu di mana adalah bahwa kotak masuk bagian dari jendela, 976 00:43:31,890 --> 00:43:33,440 dan kemudian menyisipkan baris baru. 977 00:43:33,440 --> 00:43:37,460 Dan baris baru hanya berarti satu atau lebih node baru dalam pohon. 978 00:43:37,460 --> 00:43:41,340 >> Dan AJAX adalah teknik ini yang memungkinkan untuk hal itu. 979 00:43:41,340 --> 00:43:44,440 Setelah Anda mengunjungi URL, Namun gila lama itu, 980 00:43:44,440 --> 00:43:46,472 dan sekali halaman memiliki telah dimuat, Anda masih bisa 981 00:43:46,472 --> 00:43:48,430 ambil lebih banyak data dari internet-- apakah itu 982 00:43:48,430 --> 00:43:52,460 email atau ubin dari map-- sebuah ambil balik layar 983 00:43:52,460 --> 00:43:55,290 dan kemudian masukkan ke halaman sehingga manusia tidak benar-benar 984 00:43:55,290 --> 00:43:56,910 harus menunggu untuk itu. 985 00:43:56,910 --> 00:43:58,980 >> Facebook Messenger bekerja dengan cara yang sama. 986 00:43:58,980 --> 00:44:01,562 Sejumlah websites-- lainnya oh, sebenarnya, bahkan ini. 987 00:44:01,562 --> 00:44:04,270 Maksudku, ini, terus terang, jenis menjengkelkan fitur hari ini. 988 00:44:04,270 --> 00:44:07,500 Jika saya mulai mencari cats-- ini adalah jenis pengalaman pengguna yang mengerikan. 989 00:44:07,500 --> 00:44:08,990 Itu hanya mulai mencari saya. 990 00:44:08,990 --> 00:44:10,050 Nah apa itu lakukan? 991 00:44:10,050 --> 00:44:12,920 URL belum benar-benar berubah sejak saya mulai mengetik. 992 00:44:12,920 --> 00:44:17,330 Tapi apa yang terjadi di seluruh wire-- OK, hmm menarik. 993 00:44:17,330 --> 00:44:20,470 Apa yang terjadi di seluruh kawat sini hanya mendapat aneh. 994 00:44:20,470 --> 00:44:21,090 >> OKE. 995 00:44:21,090 --> 00:44:24,670 Jadi biarkan aku pergi ke depan dan memeriksa elemen dan pergi ke tab Jaringan 996 00:44:24,670 --> 00:44:27,040 dan mencoba untuk membuat ini teknis dan kurang tentang kucing. 997 00:44:27,040 --> 00:44:32,595 Seperti yang saya ketik, secara harfiah, kucing dan- apa yang terjadi 998 00:44:32,595 --> 00:44:37,710 per-- Aku tidak akan klik itu. 999 00:44:37,710 --> 00:44:38,210 Baiklah. 1000 00:44:38,210 --> 00:44:44,280 Jadi di sini, apa yang terjadi setiap waktu saya ketik karakter, rupanya? 1001 00:44:44,280 --> 00:44:45,000 Seperti, tingkat rendah? 1002 00:44:45,000 --> 00:44:47,860 Apa yang terjadi dengan masing-masing karakter aku mengetik di keyboard saya? 1003 00:44:47,860 --> 00:44:48,359 Ya? 1004 00:44:48,359 --> 00:44:50,950 AUDIENCE: [tidak terdengar]. 1005 00:44:50,950 --> 00:44:52,340 >> DAVID Malan: Tepat. 1006 00:44:52,340 --> 00:44:55,600 Masing-masing karakter adalah akan Google, satu per satu. 1007 00:44:55,600 --> 00:44:58,490 Mereka membangun sebuah string pada server mereka yang mewakili 1008 00:44:58,490 --> 00:44:59,936 semua yang saya mengetik di sejauh ini. 1009 00:44:59,936 --> 00:45:01,810 Dan setiap kali saya ketik karakter lain, mereka 1010 00:45:01,810 --> 00:45:04,530 menggunakan saus rahasia mereka dari mencari algoritma dan mencari tahu, 1011 00:45:04,530 --> 00:45:07,370 maksudnya halaman kucing ini atau halaman kucing ini atau sejenisnya? 1012 00:45:07,370 --> 00:45:10,620 Jadi dalam arti, ia menyediakan saya dengan pengalaman yang lebih baik dalam bahwa saya bahkan tidak 1013 00:45:10,620 --> 00:45:11,860 harus menyelesaikan pikiran saya. 1014 00:45:11,860 --> 00:45:14,440 Dan memang, itu adalah yang berguna hal, autocomplete pada umumnya. 1015 00:45:14,440 --> 00:45:17,690 Jika algoritma mereka cukup baik dan jika pencarian saya cukup jelas, 1016 00:45:17,690 --> 00:45:19,300 Saya tidak perlu mengetikkan seluruh kata. 1017 00:45:19,300 --> 00:45:22,110 Mereka akan memberitahu saya apa adalah aku benar-benar mencari. 1018 00:45:22,110 --> 00:45:25,940 Jadi apa yang disebut Google instant pencarian hanya menggunakan AJAX, 1019 00:45:25,940 --> 00:45:30,820 menggunakan kode yang memungkinkan mereka untuk meminta konten tambahan melalui web browser 1020 00:45:30,820 --> 00:45:34,026 belakang layar menggunakan ini bahasa baru, JavaScript. 1021 00:45:34,026 --> 00:45:35,400 Jadi kita punya beberapa menit lagi. 1022 00:45:35,400 --> 00:45:37,710 Dan biarkan aku memanggil teman saya Colton naik ke panggung, 1023 00:45:37,710 --> 00:45:40,090 karena tampaknya terutama menyenangkan terakhir kali 1024 00:45:40,090 --> 00:45:42,290 untuk memperkenalkan teknologi bahwa beberapa dari Anda 1025 00:45:42,290 --> 00:45:44,769 telah menyatakan minat di proyek akhir. 1026 00:45:44,769 --> 00:45:47,310 Kami pikir itu akan menyenangkan untuk membawa up relawan, meskipun, hari ini 1027 00:45:47,310 --> 00:45:50,074 menunjukkan penambah ini yang memungkinkan you-- yeah, 1028 00:45:50,074 --> 00:45:50,990 Aku melihat tangan pertama ini. 1029 00:45:50,990 --> 00:45:52,900 Ayo up. 1030 00:45:52,900 --> 00:45:53,560 Bagus sekali. 1031 00:45:53,560 --> 00:45:55,035 Kerja bagus. 1032 00:45:55,035 --> 00:45:57,410 Aku akan memproyeksikan ini pada layar hanya dalam beberapa saat. 1033 00:45:57,410 --> 00:45:58,150 Siapa nama Anda untuk semua orang? 1034 00:45:58,150 --> 00:45:59,180 >> EFA: Aku Efa. 1035 00:45:59,180 --> 00:45:59,410 >> DAVID Malan: Etha? 1036 00:45:59,410 --> 00:45:59,785 >> EFA: Efa. 1037 00:45:59,785 --> 00:46:00,160 >> DAVID Malan: Efa? 1038 00:46:00,160 --> 00:46:00,730 >> EFA: Ya. 1039 00:46:00,730 --> 00:46:01,250 >> DAVID Malan: Senang melihat Anda. 1040 00:46:01,250 --> 00:46:01,600 Baiklah. 1041 00:46:01,600 --> 00:46:02,590 Mari saya mendapatkan ini siap. 1042 00:46:02,590 --> 00:46:04,423 Datang di atas ke tengah dengan Colton sini. 1043 00:46:04,423 --> 00:46:07,050 Apa Colton memiliki di tangannya hari ini adalah remote control. 1044 00:46:07,050 --> 00:46:10,440 Jadi, daripada hanya berdiri di sana dalam dunia tiga dimensi melihat- 1045 00:46:10,440 --> 00:46:14,080 sebagai Colton lakukan, sekarang Efa bisa benar-benar berjalan di sekitar dengan pergi, 1046 00:46:14,080 --> 00:46:16,689 bawah, kiri, dan kanan seperti Nintendo atau Xbox kontroler. 1047 00:46:16,689 --> 00:46:18,230 EFA: Aku akan jatuh dari panggung. 1048 00:46:18,230 --> 00:46:20,500 DAVID Malan: Saya akan berdiri di sekitar sini. 1049 00:46:20,500 --> 00:46:21,991 Tapi itu adalah risiko. 1050 00:46:21,991 --> 00:46:22,490 OKE. 1051 00:46:22,490 --> 00:46:25,690 Jadi pergi ke depan dan menempatkan mereka pada. 1052 00:46:25,690 --> 00:46:29,315 Biarkan aku pergi ke depan dan beralih ke layar di sini. 1053 00:46:29,315 --> 00:46:30,670 Biarkan saya meredupkan lampu. 1054 00:46:30,670 --> 00:46:32,780 Dan Colton, biarkan aku datang berdiri di sebelah Anda. 1055 00:46:32,780 --> 00:46:35,520 >> Apakah Anda ingin menjelaskan di sini dengan mic apa yang kita lakukan? 1056 00:46:35,520 --> 00:46:36,380 Di sini Anda pergi. 1057 00:46:36,380 --> 00:46:37,280 >> COLTON: Tentu. 1058 00:46:37,280 --> 00:46:39,980 Jadi sekarang kami loading Oculus, 1059 00:46:39,980 --> 00:46:43,070 Saya kira operating-- tidak beroperasi sistem, tetapi program utama, di mana 1060 00:46:43,070 --> 00:46:46,630 Anda dapat mengakses semua game dan aplikasi yang di perpustakaan Anda. 1061 00:46:46,630 --> 00:46:50,060 Jadi sekarang, itu harus mengatakan tekan touchpad untuk memulai. 1062 00:46:50,060 --> 00:46:53,430 Touchpad akan berada di sisi kanan headset. 1063 00:46:53,430 --> 00:46:54,569 Jadi pergi ke depan dan tap-- 1064 00:46:54,569 --> 00:46:55,110 EFA: Oh, man. 1065 00:46:55,110 --> 00:46:56,443 DAVID Malan: Ya, di sana Anda pergi. 1066 00:46:56,443 --> 00:47:00,340 1067 00:47:00,340 --> 00:47:02,460 Kualitas Efa adalah melihat adalah kualitas yang lebih tinggi. 1068 00:47:02,460 --> 00:47:03,831 Ini hanya Wi-Fi di sini. 1069 00:47:03,831 --> 00:47:05,580 COLTON: Jadi apa yang Anda akan ingin melakukan 1070 00:47:05,580 --> 00:47:08,350 adalah melihat ke arah atas kanan layar. 1071 00:47:08,350 --> 00:47:10,420 Yap, bahwa permainan di bagian paling atas kanan. 1072 00:47:10,420 --> 00:47:14,780 Dan kemudian ketika Anda memilih itu, tekan touchpad lagi. 1073 00:47:14,780 --> 00:47:17,010 Saya pikir Dreadhalls nya. 1074 00:47:17,010 --> 00:47:20,820 Dan kemudian di sini adalah a-- sini, biarkan saya terus kacamata Anda untuk Anda. 1075 00:47:20,820 --> 00:47:24,420 1076 00:47:24,420 --> 00:47:25,790 >> Jadi saya hanya memberinya controller. 1077 00:47:25,790 --> 00:47:28,886 Jadi sekarang dia bisa mengontrol permainan. 1078 00:47:28,886 --> 00:47:30,510 Dia bisa bergerak dan hal-hal seperti itu. 1079 00:47:30,510 --> 00:47:31,968 Jadi pergi ke depan dan melihat ke atas. 1080 00:47:31,968 --> 00:47:33,640 Anda akan melihat New Game. 1081 00:47:33,640 --> 00:47:36,310 Jadi pergi ke depan dan Anda bisa melakukan itu. 1082 00:47:36,310 --> 00:47:39,320 Sekarang, Anda harus mampu mengendalikan diri dengan controller, 1083 00:47:39,320 --> 00:47:43,860 juga, secepat permainan beban di sini. 1084 00:47:43,860 --> 00:47:46,356 Ini mungkin sedikit menakutkan. 1085 00:47:46,356 --> 00:47:47,300 >> EFA: Sekarang Anda ceritakan. 1086 00:47:47,300 --> 00:47:50,132 OKE. 1087 00:47:50,132 --> 00:47:51,080 >> COLTON: Baiklah. 1088 00:47:51,080 --> 00:47:52,650 Jadi pastikan bahwa Anda dapat bergerak di sekitar. 1089 00:47:52,650 --> 00:47:52,750 OKE. 1090 00:47:52,750 --> 00:47:53,583 Anda dapat bergerak di sekitar. 1091 00:47:53,583 --> 00:47:54,300 Sempurna. 1092 00:47:54,300 --> 00:47:56,470 Jadi jika Anda melihat ke bawah, Anda memiliki peta. 1093 00:47:56,470 --> 00:47:58,170 Peta menunjukkan Anda di mana Anda berada. 1094 00:47:58,170 --> 00:47:59,720 Anda dapat melihat di sekitar ruangan. 1095 00:47:59,720 --> 00:48:01,440 Anda benar-benar bisa berbalik. 1096 00:48:01,440 --> 00:48:02,128 Ya, persis. 1097 00:48:02,128 --> 00:48:02,627 Berbalik. 1098 00:48:02,627 --> 00:48:05,370 1099 00:48:05,370 --> 00:48:07,125 >> Jadi melihat ke kiri Anda. 1100 00:48:07,125 --> 00:48:09,875 Saya pikir ada sesuatu yang dapat menangkap per barel di dalam ruangan. 1101 00:48:09,875 --> 00:48:11,709 >> EFA: Bagaimana cara mendapatkan memetakan dari jalan? 1102 00:48:11,709 --> 00:48:12,375 COLTON: Carilah. 1103 00:48:12,375 --> 00:48:12,980 Hanya melihat ke atas. 1104 00:48:12,980 --> 00:48:13,480 Baiklah. 1105 00:48:13,480 --> 00:48:13,765 Ini dia. 1106 00:48:13,765 --> 00:48:15,181 Sekarang pergi ke depan dan hanya berbalik. 1107 00:48:15,181 --> 00:48:21,460 1108 00:48:21,460 --> 00:48:24,620 Jadi melihat lebih jauh ke kiri. 1109 00:48:24,620 --> 00:48:25,530 Terus bergerak ke kiri. 1110 00:48:25,530 --> 00:48:26,960 Terus mencari kiri. 1111 00:48:26,960 --> 00:48:27,541 Teruskan. 1112 00:48:27,541 --> 00:48:28,040 Ya. 1113 00:48:28,040 --> 00:48:28,720 >> EFA: Oh, seperti itu. 1114 00:48:28,720 --> 00:48:29,261 >> COLTON: Ya. 1115 00:48:29,261 --> 00:48:30,999 Berjalan ke arah itu dengan controller. 1116 00:48:30,999 --> 00:48:31,540 Ini dia. 1117 00:48:31,540 --> 00:48:32,790 Sekarang harus mengatakan mengambilnya. 1118 00:48:32,790 --> 00:48:33,360 Ini dia. 1119 00:48:33,360 --> 00:48:34,290 Ambil. 1120 00:48:34,290 --> 00:48:35,550 Baiklah. 1121 00:48:35,550 --> 00:48:38,286 Sekarang, mari kita keluar dari ruangan ini. 1122 00:48:38,286 --> 00:48:42,209 Pergi ke depan dan berjalan ke pintu itu. 1123 00:48:42,209 --> 00:48:45,000 Jadi Anda akan hold-- dikatakan tahan tombol untuk memaksa terbuka. 1124 00:48:45,000 --> 00:48:46,333 Jadi pergi ke depan dan tahan tombol. 1125 00:48:46,333 --> 00:48:48,250 Yap, memaksanya membuka. 1126 00:48:48,250 --> 00:48:48,750 Baiklah. 1127 00:48:48,750 --> 00:48:49,410 Kerja bagus. 1128 00:48:49,410 --> 00:48:50,826 Sekarang kita berjalan keluar dari ruangan. 1129 00:48:50,826 --> 00:48:56,970 1130 00:48:56,970 --> 00:49:01,366 Jadi aku akan meninggalkan sisanya up untuk Anda dan melihat apa yang Anda cari tahu. 1131 00:49:01,366 --> 00:49:02,865 EFA: Aku tidak akan di ruangan gelap. 1132 00:49:02,865 --> 00:49:07,315 1133 00:49:07,315 --> 00:49:07,815 Oh tunggu. 1134 00:49:07,815 --> 00:49:09,314 Sekarang aku harus pergi menyusuri lorong gelap? 1135 00:49:09,314 --> 00:49:10,785 OK, aku akan kembali [tidak terdengar]. 1136 00:49:10,785 --> 00:49:15,520 1137 00:49:15,520 --> 00:49:16,270 COLTON: Baiklah. 1138 00:49:16,270 --> 00:49:17,560 Beberapa item yang lebih untuk mengambil. 1139 00:49:17,560 --> 00:49:19,370 Sepertinya beberapa koin. 1140 00:49:19,370 --> 00:49:22,242 Itu kunci pick. 1141 00:49:22,242 --> 00:49:24,200 Jadi jika Anda menemukan terkunci pintu, Anda bisa menggunakan itu. 1142 00:49:24,200 --> 00:49:27,755 1143 00:49:27,755 --> 00:49:28,380 Apakah kamu takut? 1144 00:49:28,380 --> 00:49:29,371 >> EFA: Belum. 1145 00:49:29,371 --> 00:49:29,871 COLTON: OK. 1146 00:49:29,871 --> 00:49:34,850 1147 00:49:34,850 --> 00:49:35,497 >> Pretend-- ya. 1148 00:49:35,497 --> 00:49:37,330 Hanya berpura-pura kau sebenarnya berdiri di sana. 1149 00:49:37,330 --> 00:49:39,580 Dan jika Anda mengubah around-- Anda harus bisa digunakan untuk itu. 1150 00:49:39,580 --> 00:49:40,752 Tapi masuk akal. 1151 00:49:40,752 --> 00:49:43,960 DAVID Malan: Dan sementara Efa terus bermain, karena kita bisa melakukan ini sepanjang hari, 1152 00:49:43,960 --> 00:49:45,381 kita semua bisa ujung-ujung kaki di sini. 1153 00:49:45,381 --> 00:49:48,130 Tapi kami memiliki dua pasang lainnya, jika Anda ingin datang dan bermain. 1154 00:49:48,130 --> 00:49:49,980 Jika tidak, kita akan melihat Anda selanjutnya pada hari Rabu. 1155 00:49:49,980 --> 00:49:51,354 Terima kasih kepada relawan kami hari ini. 1156 00:49:51,354 --> 00:49:52,101 [Tepuk Tangan] 1157 00:49:52,101 --> 00:49:54,506 1158 00:49:54,506 --> 00:49:57,392 >> [MUSIK - "Seinfeld THEME"] 1159 00:49:57,392 --> 00:49:58,222 1160 00:49:58,222 --> 00:50:00,180 SPEAKER 1: Yah, aku menempatkan PL baru mount di. 1161 00:50:00,180 --> 00:50:01,800 Aku hanya mengubah OLPF-- 1162 00:50:01,800 --> 00:50:03,980 >> SPEAKER 2: Jadi apa sebenarnya yang Anda lakukan? 1163 00:50:03,980 --> 00:50:07,063 >> SPEAKER 1: Nah, masing-masing dari these-- di sini, saya akan menunjukkan satu ini di sini. 1164 00:50:07,063 --> 00:50:08,690 Anda bisa melihatnya di sini. 1165 00:50:08,690 --> 00:50:09,510 >> SPEAKER 3: Aku pikir aku baik dengan ini. 1166 00:50:09,510 --> 00:50:09,933 Kamu mau lagi? 1167 00:50:09,933 --> 00:50:11,325 >> SPEAKER 4: Tidak, aku baik. [Tidak terdengar]. 1168 00:50:11,325 --> 00:50:12,200 >> SPEAKER 3: Tidak, [tidak terdengar]. 1169 00:50:12,200 --> 00:50:12,700 Memiliki beberapa. 1170 00:50:12,700 --> 00:50:21,165 1171 00:50:21,165 --> 00:50:22,290 SPEAKER 1: warna yang berbeda. 1172 00:50:22,290 --> 00:50:22,890 SPEAKER 2: OK. 1173 00:50:22,890 --> 00:50:26,690 SPEAKER 1: Jadi akhirnya apa yang dilakukannya itu menyesuaikan warna of--