[MUSIC PLAYING] 

DAVID Malan: Ini adalah CS50. Ini adalah awal minggu sembilan. Dan ini adalah apa yang akan menjadi ulang tahun ke-200 Mr. Boole. Jadi ini adalah fellows kepada siapa kita singgung sudah beberapa kali tentang menggunakan Variabel boolean benar dan yang salah, 1 dan 0 dan semacamnya. Dan ini adalah Google upeti kepadanya hari ini. Dia akan berbalik 200. Jadi jika Anda ingin bergabung dengan kami untuk CS50 makan siang, lihatlah link di website kursus ini. Dan wajah seperti dan teman-teman sebagai ini menanti Anda di sini di Cambridge. Wajah seperti ini menanti Anda di New Haven. Dan, pada kenyataannya, Ken di New Haven ramah membuat apa yang disebut sebuah animasi GIF dari Eli di sini di baru-baru ini lunch-- GIF adalah belum format lain file grafis, dengan yang Anda familiar-- yang terlihat sedikit sesuatu seperti ini. Jadi hanya urutan of-- OK. Tidak ada satu di sini di Cambridge tertawa. Tapi di New Haven, ini benar-benar lucu, bukan? Baiklah. 

Jadi jangan bergabung dengan kami di sana. Di sini, di Harvard, khusus, Rabu ini, jika Anda seorang mahasiswa atau mahasiswa even-- atau bahkan berpikir junior-- pembuatan switch ke komputer ilmu pengetahuan, tahu bahwa ada akan akan CS menasihati adil ini Rabu, tak lama setelah kelas di 4:00 di komputer bangunan ilmu Maxwell Dworkin. Kami akan menempatkan ini di lapangan ini situs besok, juga. Donat, aku diberitahu, akan dilayani. 

Baiklah. Story-- jadi lucu saya menusuk di internet, dan saya menemukan beberapa arsip lama mantan website saya. Dan ternyata out-- sekitar ini waktu, tampaknya sangat tepat waktu karena saya mengumpulkan bahwa pemilihan UC sekitar untuk gigi lagi. Jadi aku berlari untuk UC, hilang total. Dan mungkin ini adalah di bagian sebabnya. Jadi ini adalah website saya pada saat itu. Untuk beberapa alasan, saya pikir itu ide yang baik, sebelum memberitahu orang-orang apa platform saya dan mengapa mereka harus memilih saya, bahwa mereka memiliki klik untuk masuk untuk mengetahui bahwa informasi, yang dalam retrospeksi adalah jenis menyeramkan. Saya tidak benar-benar tahu apa itu. 

Tapi itu pasti tidak membantu kampanye saya. Saya juga menemukan bahwa dengan seniornya year-- Aku punya kalender Muppet ini. Muppets yang agak dalam mode saat itu. Atau mungkin mereka tidak. Aku punya kalender Muppet saat itu. Dan saya pikir itu akan keren untuk nama komputer saya di jaringan Harvard frogman.student.harvard.edu. Pada saat itu, kita semua memiliki unik nama host diidentifikasi. Dan Anda bisa memilih beberapa kesombongan nama bukan nama Anda sendiri. Dan aku pergi dengan manusia katak untuk beberapa alasan. 

Dan kemudian saya started-- saya menghabiskan banyak waktu mengklik link ini pagi ini. Dan ini adalah halaman tentang saya, yang sekarang jenis tampaknya menggemaskan. Tetapi juga memberi kesaksian untuk hanya seberapa jauh teknologi telah datang. Maksudku, kembali pada hari, 486 adalah sesuatu. Hari-hari ini, itu super, super, super lambat dan kurang baik daripada yang mungkin Anda miliki di Anda kantong sendiri hari ini. Ada lebih dari yang ada bahkan lebih memalukan. Jadi saya akan berhenti di situ. Tapi itu adalah pertama saya terjun ke web-- oh, tidak. Itu tidak. Saya terjun nyata pertama ke pemrograman web adalah situs ini, yang saya hanya lupa. Di beberapa titik, saya belajar bagaimana membuat gambar latar belakang berulang-ulang. Dan jadi aku menemukan ubin ini efektif, seperti pemain hoki, sepak bola, dan golf bola, atau apa pun yang untuk situs Frosh IM. Dan ini benar-benar, benar-benar yang proyek berbasis web pertama saya mengambil on-- Saya pikir mungkin sophomore tahun, year-- junior setelah mengambil CS50 dan CS51, satu dari kelas tindak-on umum. Aku melihat di cari melalui arsip bahwa salah satu penerus saya dan teman, Lee, jenis berubah hak cipta pada dirinya sendiri. Tapi ini memang sesuatu yang Saya harus memiliki rasa malu untuk. Tapi pada saat itu, ini adalah situs web pertama, seperti yang saya katakan beberapa minggu yang lalu, dimana mahasiswa bisa mendaftar untuk olahraga intramural sini. Dan ternyata bahwa gambar latar belakang seperti yang bukan ide yang baik. Tapi web baru, dan kami semua bereksperimen. Dan ini adalah apa yang saya tampaknya melakukan pada saat itu. Baiklah. Jadi tanpa basa-basi lagi, kami beralih bersiap hari ini untuk memberikan, benar-benar, bagian akhir yang Anda mungkin menemukan sangat berguna untuk proyek-proyek akhir tetapi juga yang akan mulai membuat wide seluruh dunia merasa sedikit lebih dimengerti. Memang, kita akan memperkenalkan satu bahasa pemrograman yang lebih disebut JavaScript yang mirip dan berbeda dengan cara yang berbeda dari bahasa kita telah melihat sejauh ini. 

Jadi C, ingat, adalah bahasa yang dikompilasi ini. Anda harus menjalankannya melalui compiler. Anda mendapatkan kode sumber untuk objek kode, atau nol dan yang. Dan mereka adalah nol dan orang-orang yang CPU Anda, Central Processing Unit, benar-benar mengerti. PHP, sebaliknya, tidak bahasa yang dikompilasi. Ini adalah apa? Ini bahasa ditafsirkan. Jadi ada beberapa program yang disebut interpreter yang harus membaca atas itu-- untuk bawah, kiri ke right-- dan mencari tahu apa semua sintaks Anda tidak dan berarti, apakah itu loop atau kondisi atau nomor lain dari pemrograman konstruksi. Jadi itulah bahasa ditafsirkan. 

Kemudian kami memperkenalkan HTML. Dan HTML bahkan bukan bahasa pemrograman. Kami akan menyebutnya apa? Sebuah bahasa markup, yang hanya semacam cara mewah untuk mengatakan itu tidak memiliki konstruksi pemrograman seperti kami melihat bahkan kembali hari Scratch. Tidak ada loop. Tidak ada kondisi. Itu benar-benar bahasa tentang menandai up data Anda dan format atau penataan dalam beberapa cara. 

CSS, sementara itu, sama bukan bahasa pemrograman. Itu bahkan lebih estetis berorientasi. Dan memungkinkan Anda untuk mengurutkan dari menyempurnakan hal-hal seperti ukuran font dan warna dan penempatan dan semua itu. Kemudian kami memiliki 

SQL. Jadi SQL memang pemrograman bahasa dalam arti tertentu, meskipun disesuaikan khusus untuk database. Tapi meskipun kami hanya memperkenalkan Anda ke memilih dan menyisipkan dan menghapus dan memperbarui dan beberapa orang lain, ternyata Anda benar-benar bisa menulis fungsi atau prosedur, karena mereka disebut, di SQL yang terlihat dan bertindak cukup seperti PHP dan C fungsi. Jadi tahu bahwa mereka ada. Tapi kita tidak repot-repot dengan mereka karena kami hanya menggores permukaan di sini. Dan kemudian JavaScript, yang terakhir dari bahasa kita resmi diperkenalkan. Jadi JavaScript, juga, adalah bahasa ditafsirkan. Dan mereka yang akrab, lakukan Anda ingin membedakannya dengan beberapa karakteristik dari kedua C dan PHP? Apa yang membuatnya berbeda? 

AUDIENCE: Ini tidak dikompilasi. 

DAVID Malan: Katakanlah lagi? 

AUDIENCE: Ini tidak dikompilasi. 

DAVID Malan: Ini tidak dikompilasi. Jadi, terlalu, ditafsirkan. Jadi itu tidak disusun. Tapi yang membuatnya sedikit seperti PHP. Tapi itu masih berbeda dari PHP dalam beberapa cara mencolok, setidaknya dalam cara kita akan menggunakannya. Ya? 

AUDIENCE: Ini berjalan sisi klien. 

DAVID Malan: Ini berjalan sisi klien, biasanya. Itu memang membedakan dengan karakteristik bagi kita sekarang. C adalah server-side dalam arti bahwa kita melakukan segala sesuatu di CS50 IDE. PHP sejauh ini telah server-side sejauh karena, juga, mendapat interpreted-- tidak dikompilasi, tetapi interpreted-- dalam CS50 IDE, yang tentu saja hanya server atau server di awan. 

Tapi JavaScript, bahkan meskipun Anda Anda akan untuk mulai menulis untuk, katakanlah, pset delapan dan mungkin akhir projects-- Anda akan ke kanan di CS50 IDE dan menyimpannya di file dalam CS50 IDE, CS50 IDE dan, pada gilirannya, server cloud yang itu host, tidak akan untuk menafsirkan atau mengeksekusi kode Anda. Sebaliknya, itu akan dikirim di bentuk berubah ke browser. Dan itu kemudian akan menjadi IE atau Chrome atau Firefox atau Safari atau apa pun yang benar-benar menafsirkan itu, atas ke bawah, kiri ke kanan. Jadi yang membedakan kunci karakteristik untuk hari ini adalah bahwa JavaScript adalah sisi klien dan PHP, misalnya, memiliki pernah server-side. Sekarang, ini memiliki implikasi yang menarik untuk, seperti, kekayaan intelektual dan yang bisa benar-benar melihat kode Anda. Dan memang, Anda bisa pergi di web dan melihat sebagian kode bahwa seseorang memiliki ditulis dalam JavaScript. Kadang-kadang itu dapat dibaca, kadang-kadang itu dikaburkan. Tetapi lebih pada pada waktunya. 

Jadi JavaScript, cukup baik, adalah Super serupa, sintaksis, untuk C. Dan banyak seperti PHP, tidak ada fungsi utama. Jika Anda ingin memulai menulis Kode JavaScript, seperti yang Anda lihat hari ini, Anda hanya mulai menulis itu. Tetapi, Anda akan melihat, terutama berguna dalam konteks web browser. Namun, sedikit saya disclaimer-- biasanya earlier-- adalah untuk mengatakan bahwa Anda bisa semakin saat ini menggunakan server-side JavaScript menggunakan kerangka mewah disebut Node.js bahwa beberapa aplikasi CS50 sendiri yang ditulis dalam. Periksa 50 benar-benar menggunakan Node.js. Tapi kami akan fokus pada JavaScript sisi klien sini di luar. 

Jadi di sini adalah seperangkat kondisi di PHP. Maaf, in-- sebenarnya, yang Pernyataan juga benar. Berikut juga satu set kondisi dalam JavaScript. Sintaksis, itu adalah identik dengan C dan PHP. Ekspresi Mr. Boole adalah, sama, sintaksis identik dengan kedua C dan PHP. Kami juga memiliki switch di JavaScript yang terlihat identik. Kami memiliki untuk loop yang terstruktur identik, sementara loop, lakukan sementara loop. 

Yang satu ini sedikit berbeda. PHP memiliki untuk setiap konstruk Anda mungkin menggunakan atau akan digunakan dalam pset tujuh, mungkin. JavaScript memiliki versi khusus untuk mana Anda benar-benar mengatakan sesuatu seperti kunci variabel dalam objek, yang adalah cara yang sangat singkat mengatakan, jika saya punya sebuah object-- dan kami akan berbicara tentang ini lagi di moment-- sebuah dan saya ingin iterate atas semua dari nilai pasangan kunci di dalam, Saya tidak harus mencari cara untuk Indeks numerik mereka dengan nol, satu, dua tiga. 

Aku benar-benar bisa mengatakan ini. Dan pada setiap iterasi, JavaScript bagi saya akan memperbarui kunci variabel menjadi kunci pertama, kemudian tombol berikutnya, maka kunci berikutnya, maka kunci berikutnya, Dan seterusnya. Dan saya bisa mendapatkan nilai sebesar mengobati obyek dalam JavaScript, seperti yang kita lihat, seolah-olah itu adalah array asosiatif di PHP. Memang, jika Anda akhirnya dibungkus Anda keberatan sekitar apa array asosiatif adalah PHP, Anda bisa memikirkan untuk saat ini sebagai identik dengan obyek dalam JavaScript. Tapi itu sedikit terlalu menyederhanakan. 

Array terlihat, cukup baik, identik untuk PHP kecuali untuk satu karakter. Ada satu hal yang hilang di sini bahwa kita memang melihat minggu lalu dengan PHP. Apa yang dihilangkan? Ya? Tidak ada tanda dolar. Jadi kita kembali ke dunia lebih normal di mana variabel tidak memiliki tanda-tanda dolar. Tapi Anda awalan mereka dengan var, biasanya. Dan var berarti variabel. Dan banyak seperti PHP adalah longgar typed-- dimana ada jenis, ada angka dan string dan mengapung dan forth-- JavaScript sama memiliki jenis. Tapi itu longgar diketik dalam bahwa kita yang programmer tidak harus menentukan mereka. Kami hanya harus menyadari bahwa berbagai jenis ada. 

Variabel, meanwhile-- inilah cara kita mungkin mendeklarasikan "halo, dunia" sebagai string. Perhatikan itu identik dengan PHP tetapi tidak ada tanda dolar. Dan ini adalah sesuatu yang kita akan mulai melihat lebih hari ini, dimana Anda memiliki objek dengan kunci dan nilai-nilai. Dan jika Anda ingin mencoba untuk menyimpulkan dari week-- lalu sintaks ini sedikit berbeda. Tapi kewarasan sedikit check-- berapa banyak Kunci yang objek ini tampaknya memiliki? Jadi saya melihat empat. Saya melihat dua. 

Jadi itu benar-benar dua. Jadi ini adalah koleksi dua pasangan kunci-nilai. Kuncinya adalah simbol yang nilainya FB. Kuncinya adalah harga yang nilainya 101,53. Jadi mereka adalah dua pasangan kunci-nilai. Dan ingat, PHP-- dan ini lagi hanya semacam perbedaan sintaksis. Ini tidak semua yang intelektual yang menarik. PHP mungkin telah menulis ini sama Hal seperti kutipan follows--, sama. Dan saya mengubah ini untuk kurung persegi. Dan kemudian saya mengubahnya ke kata dikutip, "harga." Dan kemudian saya tidak menggunakan titik dua. Apa yang saya gunakan minggu lalu? Ya, tanda sama panah notasi funky. 

Dan kemudian saya melakukan hal yang sama di sini. Hal yang sama di sini. Dan itu semua. Jadi tidak apa-apa jika ini belum benar-benar tenggelam dalam memori hanya namun karena itu benar-benar intelektual tidak menarik. Ini perbedaan hanya sintaksis. Namun ide yang persis sama. Di dalam variabel ini kutipan dalam JavaScript adalah kumpulan pasangan kunci-nilai, salah satunya adalah simbol, salah satunya adalah harga. Dan saya bisa mendapatkan nilai-nilai di dengan sintaks berikut. Sama seperti di PHP, saya bisa melakukan sesuatu like-- membiarkan saya membuat kotak ini sedikit lebih besar. Sama seperti di PHP, saya bisa membuat this-- oh, sialan. Ayolah. 

Sama seperti di PHP-- OK, kami akan hanya menggunakan catatan presenter. Sama seperti di PHP, saya bisa melakukan $ quote $ quote ["simbol"], dan ini akan membuat saya nilai "simbol." Dalam JavaScript, itu akan menjadi identik, dimana saya hanya bisa melakukan ini. Satu-satunya hal yang hilang adalah tanda dolar. 

Jadi cukup baik, maka, ada tidak semua yang banyak sintaks baru. Jadi apa yang hari ini kita fokus pada, benar-benar, adalah beberapa ide dan aplikasi. Dan yang pertama seperti aplikasi yang Anda mungkin telah melihat jika Anda menyelam ke pset tujuh sudah sintaks ini. Jadi di pset tujuh, jika Anda sudah melihat atau belum melihatnya, tahu bahwa ada file yang kita berikan Anda disebut config.json-- JavaScript Obyek Notasi. Mengapa? Kami ingin dapat menyediakan Anda dengan template dengan beberapa pasangan kunci-nilai. Kami ingin dapat memberikan daftar dari tuan rumah, nama server. Kami ingin memberi Anda tempat untuk nama pengguna dan sebuah tempat untuk sandi Anda. Jika Anda tidak melihat ini belum, tidak perlu khawatir. Lebih lanjut tentang ini di pset tujuh [? spec. ?] Dan kemudian, jelas, kami ingin Anda untuk mengisi to-dos karena ketika Anda login ke CS50 IDE, masing-masing memiliki nama pengguna dan password Anda sendiri. 

Jadi kita sudah bisa digunakan setengah lusin atau lebih format file yang berbeda. Kita bisa menggunakan file .txt. Kita bisa menggunakan file CSV. Kami sudah bisa digunakan sebuah File INI, file XML, seluruh banyak lebih akronim yang Anda mungkin tidak pernah mendengar. Ini semacam sewenang-wenang pada akhir hari. Tapi super populer hari ini adalah teks format yang disebut JSON-- JavaScript Object Notation-- yang terlihat seperti ini. Ini sedikit samar, tetapi melihat pola. Anda mulai dengan keriting terbuka penjepit, dan Anda berakhir dengan sama. Di dalam itu adalah sesuatu. Ini adalah pasangan kunci-nilai. Jadi ini adalah sebuah benda yang aku melihat di layar sini yang memiliki salah satu kunci, yang memiliki satu nilai. Dan hanya menyimpulkan berdasarkan pola sebelumnya, apa kuncinya di sini? Database, hal yang perlu sebelah kiri usus besar. 

Sekarang, nilai kebetulan kelipatan garis waktu ini. Tetapi nilai dimulai dengan keriting sebuah penjepit dan berakhir dengan penjepit keriting. Jadi apa yang akan Anda usulkan adalah jenis nilai database? Sebuah kamus atau, hanya lebih ringkas, sebuah objek. Benar? Ini adalah jenis struktur data yang dapat menggunakan struktur lain dalam dirinya sendiri. Jadi jika semua ini kita memanggil object-- dan obyek adalah hanya sekelompok kunci-nilai yang pairs-- nilai database itu sendiri adalah obyek. Nilai database memiliki seluruh banyak pasangan nilai kunci, yang pertama adalah tuan rumah, kemudian nama, maka nama pengguna, maka password, masing-masing yang nilai, sementara itu, itu hanya string membosankan dalam tanda kutip ganda. 

Jadi, bahkan jika itu tidak super jelas dulu, tahu bahwa ini hanyalah sebuah standar, cara yang cukup membosankan menyimpan data dalam format standar. Tapi kesalahan umum Anda mungkin membuat, bahkan di pset tujuh, adalah hal-hal bodoh kecil, seperti jika Anda sengaja menghilangkan koma sana. Itu akan menghasilkan file belum tentu menjadi dibaca. Jika Anda secara tidak sengaja menghilangkan hal-hal seperti kutipan, itu tidak akan menjadi dibaca. Jadi itu adalah format file yang cukup nitpicky, tapi itu salah satu yang super umum. Dan kita terjadi untuk menggunakannya, meskipun Anda tidak menggunakan JavaScript sebaliknya, di pset tujuh. 

Baiklah. Jadi ingat gambar ini. Kami berbicara tentang, dalam HTML, yang kode akan terlihat seperti ini. Ini adalah HyperText Markup Language [Tidak terdengar] untuk hanya "halo, dunia." Tapi kemudian kami mengusulkan sementara kembali bahwa jika membantu, Anda mungkin ingin mulai berpikir tentang ini sudah sebagai pohon. Bahkan, lekukan yang kita menggunakan hanya demi dibaca ini atau demi gaya pada kiri jenis kaleng diterjemahkan ke dalam pohon ini, di mana Anda memiliki beberapa akar khusus yang kita akan umum disebut dokumen, di bawah ini yang adalah akar elemen HTML atau tag, HTML, yang kemudian memiliki dua anak-anak, kepala dan tubuh. 

Dan kemudian pada gilirannya, kepala memiliki judul. Dan judul memiliki nilai teks. Dan tubuh yang sama memiliki nilai teks. Jadi jika Anda mengatakan nyaman bahwa ya, Anda bisa mengambil HTML ini dan menggambar seperti ini, sisi kanan adalah model mental yang bagus karena sekarang bahwa kita memiliki JavaScript, pemrograman bahasa yang bisa browser mengeksekusi dan menafsirkan untuk Anda, ternyata apa kami akan melakukan dalam kode adalah mulai memanipulasi ini struktur pohon di memori. Kami tidak harus membangun pohon di memori. Kami tidak perlu melakukan semacam struktur data pset-lima gaya kompleksitas. Browser, cukup baik, setelah menafsirkan HTML atas ke bawah, kiri atau kanan, secara harfiah akan tangan kami setara dengan pointer untuk itu seluruh pohon secara gratis. Itu semua kerja keras. Itulah yang Mozilla dan Apple dan lain-lain telah lakukan bagi kita. 

Dan dengan JavaScript yang akan kita mampu mengendalikan dan mengubah dan melakukan hal yang menarik untuk pohon yang, jika tidak diketahui sebagai DOM atau Document Object Model. Macam hal apa? Nah, ternyata bahwa dalam JavaScript, ada daftar cucian ini peristiwa yang dapat terjadi. Dan kita belum benar-benar digunakan yang Kata sejak pekan nol dan pset nol ketika kita berbicara tentang Scratch. Sebagian besar dari Anda mungkin tidak menggunakan sebuah acara di proyek Scratch Anda. Tapi Anda mungkin ingat sederhana Marco Polo Misalnya, di mana kita memiliki dua sprite, salah satunya mengatakan, Marco. Yang lain di antaranya kemudian, setelah mendengarkan dan mendengar peristiwa itu, kata, Polo. Jika tidak, jangan ragu untuk melihat kembali sejauh itu kembali. 

Tapi ini hanya untuk mengatakan, dan Anda dapat jenis menyimpulkan dari nama-nama ini hal, JavaScript, ternyata, akan memberi kita cara untuk mendengarkan untuk mouse turun atau mouse naik atau kunci turun atau kunci naik atau onselect onsubmit atau onresizing sesuatu. Dengan kata lain, tindakan fisik setiap bahwa manusia dapat mengambil dengan browser yang Anda lakukan setiap hari, Anda dapat menulis kode untuk yang mendengarkan peristiwa-peristiwa dan kemudian melakukan sesuatu yang tepat. 

Misalnya, jika Anda menggunakan Google Maps, apa yang terjadi jika Anda mengklik dan bergerak mouse, biasanya? Jika Anda klik dan tarik? Ya? Tepat. Peta mulai bergerak. Sehingga Anda dapat semacam melihat apa yang di sini, apa yang ada di sana. Dan bagaimana Google menerapkan itu? Nah, mungkin, mereka menggunakan beberapa acara ini pendengar, yang mengatakan, mendengarkan pada mouse down-- sehingga ketika pengguna secara fisik mendorong trackpad atau atau mouse-nya turun. Dan kemudian kita cari sesuatu seperti gerakan atau beberapa peristiwa lain yang memungkinkan kita untuk menangkap drag. Dan pada kenyataannya, drag sama dalam hal ini dot dot dot daftar pilihan yang mungkin. 

Jadi ini akan menjadi kuat cara untuk memulai menanggapi pengguna bahkan sebelum ia benar-benar mengklik sesuatu yang eksplisit seperti kirimkan. Tapi kami akan memperkenalkan beberapa topik untuk sampai ke sana. Tapi pertama-tama, mari kita transisi untuk beberapa kode yang sebenarnya. Jadi aku akan pergi depan dan membuka dom-0, yang merupakan contoh yang sangat sederhana di sini bahwa jika saya memperbesar hanya memiliki masukan ini di sini bagi saya. Dan aku akan pergi ke depan dan ketik "David" untuk nama saya dan klik Submit. 

Dan kemudian, meskipun semacam murah, saya memiliki prompt ini yang muncul yang mengatakan, "Halo, David!" Jadi ini adalah jenis seperti kita "halo, dunia" yang kami lakukan beberapa waktu yang lalu di C dan bahkan dalam PHP karena saya sudah dinamis dikeluarkan nama saya. Aku bisa melakukan nama orang lain di sini. Aku hanya bisa mengubahnya ke, seperti, Hannah, klik Submit. Dan memang, perubahan pop-up kecil. 

Sekarang, pop-up adalah salah satu sebagian fitur disalahgunakan web. Dan pada kenyataannya, kembali hari pop-up blocker masuk ke mode karena Anda akan pergi ke beberapa website-- mungkin place-- dipertanyakan yang akan tiba-tiba mulai membumbui layar Anda dengan sejumlah besar pop-up. Dan kemampuan ini untuk pop up Jendela di depan pengguna belum sangat diterima dengan baik oleh umat manusia. Jadi itu sebabnya Anda melihat ini mencegah hal, yang hanya membuat semua ini jelek. Jadi kita akan membutuhkan cara yang lebih baik untuk meminta pengguna. Tapi untuk saat ini, yang tampaknya bekerja. Jadi hanya intuitif, apa tampaknya akan terjadi di sini? Aku pergi ke depan dan klik Submit, dan kemudian sesuatu terjadi, jelas. Tapi apa yang tidak terjadi yang tidak terjadi minggu lalu setiap kali saya diklik Menyerahkan? Apa yang tidak terjadi pada layar? Maaf? Reload. URL tidak berubah sama sekali. Saya mengatakan ini adalah dom-0, dan aku masih di dom-0. Biasanya, kami akan bisa berubah untuk beberapa lainnya URL, seperti register.php atau sejenisnya. 

Tapi bahkan ketika saya memberhentikan hal ini dengan mengklik OK, melihat bahwa URL tetap benar-benar menempatkan. Dan, pada kenyataannya, jika aku sedikit skeptis, biarkan aku membuka Chrome. Mari saya membuka tab Jaringan. Dan melihat itu kosong pada saat ini. Biarkan aku pergi ke depan dan mengirim ulang Maria. Tidak ada lalu lintas jaringan apapun. Jadi tidak ada HTTP. 

Jadi memang, jika saya melihat kode sumber untuk this-- biarkan aku menutup jendela ini dan pergi ke Lihat Sumber. Menarik. Sepertinya ada beberapa tag baru, di antaranya naskah. Jadi mari kita lihat dalam CS50 IDE apa yang saya dikirim ke pengguna. 

Jadi di sini is-- mari fokus pada HTML saja. Berikut bagian bawah dom-0.html. Dan melihat bahwa itu punya judul, tag kepala, tag tubuh, bentuk tag. Tapi apa yang melompat keluar untuk Anda sebagai yang berbeda, terutama jika Anda sudah pernah ditulis setiap JavaScript sendiri. Mari saya gulir sedikit ke sini. Saya punya masukan, masukan lain untuk mengirimkan. Aku punya ID, yang merupakan jenis baru. Tapi kami melihat ini dengan CSS. Apa lagi yang pasti baru? Ya? Bagus. 

Baiklah. Jadi di mana dikatakan aktivitas pengiriman, melihat apa yang tampaknya mengikuti. Ini adalah atribut di HTML nomenklatur. Nilainya ini string yang dikutip di sini. Dan ini terlihat sedikit aneh pada pandangan pertama. Ini bukan HTML. Ini bukan CSS. Hal ini, seperti yang Anda duga, JavaScript. Jadi sepertinya bahwa dibangun ke ini Halaman web adalah fungsi disebut greet. Dan aku menyimpulkan bahwa hanya karena itu kata, menyapa. Itu punya paren terbuka, paren dekat, titik koma. Sepertinya fungsi C, Sepertinya fungsi PHP. 

Dan memang, itu akan menjadi fungsi JavaScript. Lalu aku kembali palsu. Kami akan kembali ke yang hanya dalam beberapa saat. Tapi di mana fungsi ini didefinisikan? Nah biar gulir ke atas ke atas file. Dan meskipun itu garis panjang, itu relatif mudah. Biarkan saya tampilannya sini dan fokus pada empat baris. 

Jadi dalam JavaScript, hanya seperti PHP, Anda hanya katakanlah, secara harfiah, kata "fungsi," nama fungsi, dan kemudian kurung dengan arguments-- ada argumen dalam kasus ini. Dan tidak ada tipe kembali dalam JavaScript, sama seperti PHP. Jadi itu sedikit longgar daripada C. Terbuka penjepit keriting, dekat penjepit keriting. Dibangun ke JavaScript adalah sebuah function-- bukan function-- direkomendasikan tetapi fungsi yang disebut peringatan Satu-satunya tujuan dalam hidup yang adalah untuk menarik yang sangat jelek meminta bahwa kita melihat beberapa saat yang lalu. 

Sekarang ini adalah jenis seteguk. Apa yang terjadi di sini? Jadi mari kita mulai menyorot semuanya di sini. Itu argumen yang sama untuk mengingatkan. Dan apa yang terjadi? Ini hanya tampak seperti sebuah string. Dan ternyata, tidak seperti PHP dan tidak seperti C, tidak peduli di JavaScript jika Anda tanda kutip tunggal atau tanda kutip ganda. Mereka akan menjadi setara. Dan terus terang, itu hanya populer hari ini untuk JavaScript programmer untuk selalu menggunakan tanda kutip tunggal untuk beberapa alasan. Itu hanya hal yang harus dilakukan. Tapi kita bisa menggunakan tanda kutip ganda, juga. 

Jadi plus adalah karakter baru. Tapi bagi anda yang sudah dilakukan ini sebelumnya, apa ditambah artinya? Ya. Menggabungkan. Jadi kita melihat ini di PHP. Hanya ada titik Operator di PHP yang akan menggabungkan dua string bersama-sama. C adalah rasa sakit di leher untuk melakukan hal ini. Ingat dari pset enam, yang rasa sakit utama di leher, Anda harus menggunakan sesuatu seperti strcat setelah mengalokasikan memori pada stack atau tumpukan. Anda harus melompat melalui lingkaran hanya untuk menggabungkan dua string. Dalam JavaScript, itu super sederhana. Hanya menggunakan operator ditambah antara mereka. 

Jadi tampak kompleks Hal ini tampaknya menjadi karena pada akhir Seluruh string ini, saya hanya menggabungkan pada tanda seru. Jadi jika apa yang bermunculan itu "Halo, David," "halo, Hannah," "Halo, Maria," dan sebagainya, jelas bahwa hal menengah di antara kedua Plus harus memberikan akses ke apa? Apa yang ada di sana pasti? Ya. Jadi saya akan berpura-pura di sini menjawab nama mereka, kan? Jadi nama mereka muncul di final Hasil. Jadi apa artinya ini? Nah, saya mengusulkan awal yang gambar yang disebut DOM memiliki elemen akar khusus jalan sampai atas disebut dokumen. Dan sekarang, ternyata, itu akan menjadi variabel global khusus dalam JavaScript, dibangun ke yang merupakan Seluruh sekelompok fungsi yang berguna. Di antara fungsi yang berguna adalah kemampuan untuk mendapatkan setiap simpul keturunan. Mereka kotak atau empat persegi panjang atau elips hanya node di pohon, sehingga untuk berbicara. 

Jadi ternyata yang dibangun ke Objek dokumen JavaScript ini adalah fungsi, atau dikenal sebagai Metode, yang disebut getElementById. Sintaks untuk memanggil fungsi dalam JavaScript yang ada di dalam suatu objek atau variabel hanya dengan notasi titik. Dan kami melihat ini di C apa sintaks struct. Anda melihat ini dalam pset tujuh, jenis, semacam, ketika Anda melihat CS50 :: query. Usus besar usus besar pada PHP adalah lain cara memanggil fungsi yang dalam beberapa objek. 

Tapi untuk saat ini dalam JavaScript, itu hanya sebuah titik. Dan fungsi ini, cukup baik, jenis mengatakan apa does-- mendapatkan elemen dengan ID. Sebuah elemen hanyalah nama lain untuk tag atau node dalam DOM. Dan sehingga mendapatkan elemen dengan ID "nama" berarti this-- inilah HTML saya. Dan berdasarkan HTML ini, apa node atau apa tag HTML aku akan pemrograman menjadi tangan dengan memanggil document.getElementById? 

Ya, persis. Aku akan mendapatkan input Unsur ada yang ID adalah "nama." Jadi khusus, Anda bisa memikirkan fungsi ini, getElementById, sebagai cara memberikan kembali pointer ke node tertentu yang di pohon. Kami belum ditarik ini pohon, tapi itu cara mendapatkan akses ke persegi panjang atau persegi panjang yang oleh unik mengidentifikasi melalui ID-nya. 

Sekarang, mengapa ini berguna? Nah, ternyata bahwa setelah Anda mendapatkan bahwa node, yang persegi panjang dari gambar, bahwa node di dalamnya, pada gilirannya, memiliki sejumlah besar properties-- pasangan kunci-nilai atau data, salah satu yang disebut nilai. Jadi secara harfiah, itu semacam seteguk untuk menjelaskan semuanya. Tetapi pada akhir hari, semua yang dilakukan adalah memberikan string yang pengguna mengetik dalam mode hirarkis ini. Tapi aku tidak suka beberapa hal-hal ini. Atau lebih tepatnya, ada beberapa rasa ingin tahu masih. Semua itu tampaknya bekerja. Mengapa Anda pikir saya kembali palsu setelah memanggil menyapa? Ini terlihat sedikit jelek, yang Saya memiliki dua pernyataan ada dipisahkan oleh titik koma. Coba tebak. Jika saya dihapus kembali palsu, apa mungkin terjadi, hanya naluriah? Maaf, mengatakan lagi? 

Membuka sekelompok Windows. Jadi berpotensi mungkin sesuatu seperti itu akan terjadi. Apa lagi? Mungkin mengirimkan permintaan mana? Ke halaman yang sama. Jadi, pada kenyataannya, itu yang lebih dekat menjawab di sini, meskipun, tidak seperti di masa lalu, saya tidak punya ditentukan atribut aksi, yang biasanya harus kita lakukan. Ternyata ada default. Jika Anda tidak menentukan tindakan, itu seperti mengatakan kutipan, tanda kutip atau nama file itu sendiri, yang dalam hal ini akan seperti dom-0.html. Ini hanya semacam disimpulkan, atau lebih tepatnya tersirat. 

Dan jadi jika saya tidak melakukan ini, mari kita perhatikan. Biarkan saya simpan ini. Dan Aku telah menghapus kembali palsu. Biarkan aku pergi kembali ke ini contoh dan kekuatan reload. Dan Anda mungkin telah melihat saya sarankan ini pada CS50 Diskusikan beberapa kali. Jika sesuatu yang pernah bertindak yang funky dan Browser tidak berperilaku seperti yang Anda harapkan, seringkali Anda akan ingin memegang Shift dan kemudian klik Reload. Yang akan memaksa setiap file untuk reload dan tidak menggunakan cache lokal browser Anda atau copy sehingga sekarang, biarkan aku pergi ke depan dan membuka Inspektur saya, tab Jaringan. Aku akan klik Melestarikan Log karena saya tidak ingin menghapus baris setelah saya mendapatkan dibawa pergi di tempat lain. 

Biarkan aku pergi ke depan di sini dan ketik Andi, klik Submit. Baiklah. Yang tampaknya seperti yang diharapkan. Ia mengatakan "halo, Andi." Biarkan saya klik OK. Menarik. Perhatikan bahwa halaman berubah, meskipun ke halaman asli. Perhatikan URL jenis berubah. Ia menambahkan tanda tanya, yang biasanya merupakan indikator bahwa kita mencoba untuk mengirimkan sesuatu. Dan kemudian di bagian bawah, bahkan lebih eksplisit, di sini adalah permintaan HTTP yang sebenarnya, yang mendapat respon dari 200 yang membawa saya kembali ke sini. 

Jadi ini bukan apa kami ingin lakukan, kan? Karena saya tidak ingin ulang seluruh halaman. Saya bukannya ingin kembali palsu sehingga hubungan pendek perilaku default browser, yang adalah, tentu saja, untuk mengirimkan halaman. 

Jadi mari kita lihat sebuah contoh sedikit lebih baik. Ini adalah dom versi satu. Dan perhatikan berikut ini. Ini OK jika Anda tidak grok semua baris kode. Tapi apa yang fundamental berbeda tentang implementasi ini? Aku akan menetapkan berperilaku yang sama, melakukan hal yang sama. Apa yang telah saya jelas dilakukan secara berbeda? Ya? 

AUDIENCE: [tidak terdengar]. DAVID Malan: Ya. Jadi fungsi didefinisikan differently-- dengan kata lain, absen dari bentuk, di sana pada baris 7-- atau bukan, garis 8-- tidak lagi apakah saya harus atribut aktivitas pengiriman. Dalam contoh sebelumnya, saya punya ini. Dan kemudian aku benar-benar menulis kode saya di sini. Dan kemudian aku berkata kembali palsu. Dan jika tidak menggosok Anda dengan cara yang salah lagi, harus mulai sejauh sebagai, seperti di HTML, ketika kita mulai bersama-berbaur itu dengan CSS di atribut gaya, itu hanya mulai mendapatkan sedikit berantakan atau merasa sedikit salah. 

Demikian pula di sini, jika Anda mulai mengambil HTML, dan kemudian Anda secara otomatis celepuk beberapa kode JavaScript di tengah-tengah string yang dikutip, itu tidak akan menjadi sangat dipertahankan. Benar? Ini bahkan tidak jelas pada awalnya tempat dimana kode JavaScript. Jadi itu akan sangat bagus prinsip desain yang lebih baik, mari kita menjaga HTML kami benar-benar terpisah dari kami JavaScript. 

Jadi untuk melakukan itu, apa yang kita sudah dilakukan di sini adalah following-- yang kita hanya menggunakan HTML untuk markup saja. Dan di versi satu ini, semua Saya miliki adalah bentuk dengan ID unik. Dan kemudian di sini, aku mengambil keuntungan dari fitur khusus dari JavaScript dimana saya bisa memiliki apa yang disebut fungsi anonim. Jadi ternyata bahwa jika saya sebut document.getElementById dari 'demo' itu seperti memberi saya pointer ke node ini di pohon saya, unsur bentuk, boleh dikatakan. 

Sekarang, saya hanya tahu dari mengetahui sedikit HTML sekarang kita setelah membaca beberapa secara online referensi, bahwa elemen bentuk mendukung sejumlah acara listeners-- di Dengan kata lain, daftar cucian acara pendengar yang kami lihat beberapa saat yang lalu. Saya tahu dari membaca dokumentasi onsubmit yang merupakan acara yang valid pendengar untuk elemen form. 

Jadi setelah saya tahu bahwa, itu aman bagi saya untuk melakukan yang following-- mendapatkan node yang dari pohon, elemen bentuk, dan akses yang disebut-nya Properti aktivitas pengiriman. Jadi titik hanya berarti ini adalah properti, seperti nilai khusus di dalamnya. Dan apa tipe data aku menugaskan, tampaknya, untuk aktivitas pengiriman, yang merupakan efektif variabel dalam dari yang node di pohon? Ini adalah bidang dalam struct itu. Apa tipe data? 

Fungsi, ya. Jadi ternyata bahwa PHP memiliki ini. Dan meskipun kita tidak memberitahu Anda tentang hal itu, C juga memiliki fungsi pointer, yang kemampuan untuk melewati dan menetapkan fungsi sebagai nilai-nilai variabel 'sendiri. Dan kita tidak akan untuk mundur kembali ke C. Tapi untuk saat ini, ternyata bahwa di sisi kanan di sini, meskipun terlihat sedikit funky, ini berarti, hey peramban, memberikan fungsi. Aku tidak akan repot-repot memberikan itu nama karena aku benar-benar akan menetapkan sebut saja alamat fungsi ini segera untuk aktivitas pengiriman. Dengan kata lain, browser, Anda tidak perlu tahu apa fungsi ini disebut. Anda hanya perlu tahu di mana dalam memori. Dan itu sudah cukup hanya untuk memiliki tanda sama ada dan tidak repot-repot penamaan ini, seperti foo atau menyapa atau kata lainnya. Dan sekarang ini adalah hal gaya. Saya bisa bergerak brace keriting ini ke the-- sorry-- baris berikutnya seperti biasanya kita lakukan CS50. Tapi dalam JavaScript, itu sebenarnya Gaya umum untuk terus penjepit keriting, yang pertama, pada baris pertama. 

Tapi selanjutnya, ada tidak ada yang menarik. Itu brace keriting terbuka hanya demarcates awal fungsi saya. Fungsi ini sekarang identik, kecuali saya sudah termasuk palsu kembali dalam fungsi ini. Karena ternyata out-- Anda hanya akan dan tahu ini dari membaca documentation-- yang bahwa jika fungsi yang Anda tetapkan untuk penangan aktivitas pengiriman kembali palsu, browser hanya tahu dan setuju tidak menyerahkan formulir ke server. Jika kembali benar, itu akan menyerahkan ke server untuk alasan kita akan melihat berguna hanya dalam beberapa saat. 

Dan kemudian koma setelah penjepit keriting ada hanya berarti aku sudah selesai mendefinisikan fungsi. Anda tahu apa yang harus memanggil segera Anda mendengar submisi. Baiklah. Ini masih bisa dibilang agak jelek. Jadi apa lagi yang bisa kita lakukan? 

Nah, ternyata kemudian di versi dua, yang merupakan last-- dan kami hanya akan melirik ini. Pada risiko membuat itu jelek, ternyata bahwa ada perpustakaan di dunia disebut jQuery. Dan jQuery adalah super perpustakaan JavaScript populer yang begitu populer yang paling setiap JavaScript-- itu tidak jarang orang bingung jQuery dengan JavaScript. Mengapa? JavaScript itu sendiri memiliki sangat cara verbose melakukan things-- document.getElementById, dadadadadada. Anda akhirnya memiliki sangat antrean panjang kode. 

Jadi seorang bernama John Resid, yang benar-benar bekerja untuk startup up hari ini, keluar dengan perpustakaan ini tahun lalu bahwa banyak orang telah berkontribusi untuk disebut jQuery yang berubah sintaks dengan cara berikut. Dan hanya jadi Anda pernah melihat ini, karena Anda akan selalu melihat ini jika melakukan tugas akhir berbasis web, ini akan menjadi cara setara melaksanakan fungsi yang sama menggunakan perpustakaan khusus ini. 

Sekarang, bukan menggoda terpisah secara keseluruhan, mari kita lihat beberapa pola. Sintaks ini tampaknya memiliki berapa banyak fungsi anonim atau fungsi tanpa nama atau fungsi lambda AKA? Dua, kan? Dan Anda tahu bahwa, bahkan jika Anda tidak super nyaman dengan ini, hanya dengan fakta bahwa kata function () dua kali. 

Dan ternyata apa kode ini doing-- dan kami akan mengacu pada referensi online, akhirnya, untuk bantuan dengan ini. Ini hanya berarti bahwa ketika dokumen siap, pergi ke depan dan mendaftar fungsi berikut sebagai menyerahkan handler untuk HTML elemen yang ide unik adalah demo. Dan kemudian, ketika itu terjadi, menyebut dua baris kode. Dan ini, tragis, lebih cara verbose mengatakan kembali palsu. Dan kami sebutkan ini hanya karena Anda akan melihat kode seperti online ini. Dan itu tidak akan gentar dengan. Melainkan, perlu diingat bahwa apa yang akan menjadi umum dalam JavaScript adalah paradigma ini. Dan itu sebabnya kami menunjukkan itu untuk saat ini. Baiklah. Jadi tanpa tinggal terlalu banyak pada sintaks itu, yang ada pertanyaan tentang contoh atau ide-ide ini sejauh ini? Baiklah. Jadi mari kita gunakan ini untuk sesuatu yang bermanfaat. Membuat halaman web yang hanya mengatakan halo, begitu dan begitu tidak semua yang menarik, tidak underwhelm. Yang satu ini tidak akan menjadi indah, tapi itu akan melakukan sesuatu yang berguna. Biarkan aku kembali ke direktori saya di sini dan membuka, mengatakan, bentuk-0.html. 

Jadi kira ini adalah mahasiswa yang halaman pendaftaran olahraga intramural tanpa CSS atau rasa desain. Dan saya ingin pergi ke depan dan mendaftar di sini dengan password. Dan aku akan setuju dengan persyaratan dan kondisi dan klik Daftar. Dan sekarang website mengatakan, "Kamu terdaftar! (Yah, tidak benar-benar.) " Yang tampaknya seperti itu bekerja, tapi biarkan aku pergi ke depan dan memaksa reload. 

Dan saya katakan, tidak ada, Anda tidak membutuhkan alamat email yang sebenarnya saya. Atau mungkin kita hanya akan mengatakan mail dalam sana. Sandi akan, seperti, 12345. Dan kemudian, hanya karena aku idiot, sekarang 123.456.789. Dan aku tidak akan memeriksa kotak Anda. 

Hmm. Baiklah. Jadi ada beberapa peluang untuk perbaikan di sini. Dan kau tahu, atau akan melihat di pset tujuh, bahwa Anda dapat menulis code-- dan Anda harus menulis Kode di PHP-- untuk membela terhadap jenis-jenis pengguna kesalahan karena pengguna jelas belum bekerja sama. Dan ia tidak memberi Anda semua nilai yang Anda inginkan atau bahkan dalam format bahwa Anda ingin mereka. Jadi, Anda akan melihat di pset tujuh yang kita pasti bisa memiliki beberapa jika kondisi yang mengatakan jika alamat email tidak username@something.edu sebuah, kita bisa hanya minta maaf dan meminta maaf kepada pengguna banyak, seperti Anda mungkin di pset tujuh. Atau jika mereka belum memeriksa kotak itu, Ternyata di PHP, Anda dapat mendeteksi itu, juga. Dan tentu jika password tidak cocok seperti di register.php untuk pset tujuh, Anda bisa mendeteksi itu. Tapi itu sakit di leher di bahwa sekarang mereka meminta kita untuk pergi semua jalan ke server. Pengguna diberitahu tentang kesalahan. Dan setidaknya kecuali jika Anda menggunakan beberapa teknik pengujian, sekarang mereka harus mengklik panah kembali. Bukankah lebih bagus, seperti banyak situs hari ini, jika Anda memiliki lebih cepat umpan balik, langsung? 

Dengan kata lain, biarkan aku pergi ke versi satu, yang akan menjadi tidak cantik. Tetapi memiliki fitur ini. Malan, 12345, 123456789, tidak akan memeriksa kotak, Register. Sandi tidak cocok. Jadi meskipun ini pop-up adalah ugly-- kita bisa mengganti ini akhirnya dengan sesuatu seperti Bootstrap, yang akan Anda lihat di pset tujuh adalah library-- sangat populer yang saya lakukan mendeteksi bahwa password tidak cocok. Baiklah. Nah, biarkan aku memperbaikinya sebagai pengguna. Biarkan aku pergi ke depan dan mengatakan 12.345, 12.345. Masih tidak memeriksa perjanjian. Anda harus menyetujui syarat dan Ketentuan. Jadi kenapa? 

Jika kita sudah mengemukakan bahwa ada cara, dan kami sudah diperlukan Anda di pset tujuh untuk mendeteksi kesalahan Kondisi seperti ini server-side, mengapa harus saya repot juga melakukan hal ini di JavaScript? Apa argumen di mendukung menambahkan apa Anda akan melihat sebagai some-- ada kompleksitas tambahan. 

Mungkin tidak ada terbalik. Apa yang bisa itu? AUDIENCE: [tidak terdengar]. DAVID Malan: Oh, menarik. Potensi eksploitasi. Begitu yakin, jika Anda tidak menangani input pengguna yang salah bahwa besar, mungkin itu semua lebih baik jika bahkan tidak mencapai server Anda. Saya akan mendorong kembali ke sana dan katakanlah, Anda mungkin harus memperbaiki kedua masalah tersebut. Tapi itu adil. Apa lagi? 

AUDIENCE: [tidak terdengar]. 

DAVID Malan: Ya. Kode ini, seperti yang kita katakan sebelumnya, adalah ditafsirkan pada sisi client. Itu tidak mengganggu server, yang berarti tidak dampak beban server atau kapasitas. Dan sekarang, untuk sedikit saya tua, ini tidak memiliki efek yang berarti karena saya memiliki satu pengguna sekarang. 

Tapi jika Anda setiap situs dari ukuran yang layak, terutama yang terbesar, seperti Facebook, semakin Anda dapat membuat orang off server Anda lebih baik karena server, tentu saja, hanya memiliki jumlah terbatas RAM, jumlah terbatas gigahertz, jumlah terbatas hal ia bisa melakukan per unit waktu. Jadi jika ada lebih banyak orang di dunia memukul server Anda, sengaja penebangan salah, sama dengan baik jika Anda dapat menjaga beban itu dari server Anda. Plus, terutama pada mobile device-- jika Anda sudah pernah login ke my.harvard atau Netid Yale atau sejenisnya, ada ini latency dengan banyak situs seperti itu dimana dibutuhkan, seperti, sialan satu atau dua detik kadang-kadang. Dan kemudian, Tuhan, jika Anda salah ketik, maka Anda harus memukul kembali dan mengulang hal itu. Jadi ada latency, terutama pada koneksi jaringan lambat. Tapi JavaScript, karena itu berjalan pada klien dan tidak perlu bolak-balik di internet berpotensi lambat koneksi, Anda bisa mendapatkan umpan balik hampir seketika. 

Jadi mari kita lihat ini. Mari saya membuka bentuk-0 dan melihat HTML di sini. Dan mari kita lihat apa yang terjadi. Ini adalah bentuk yang tindakan register.php. Aku hanya menggunakan mendapatkan begitu bahwa aku bisa melihat URL. Tapi untuk password, kita pasti ingin untuk mengubah ini untuk mengirim dalam kenyataan. Berikut ini adalah field input dari jenis teks. Berikut masukan lain bidang jenis password. Berikut ini adalah, jika Anda belum pernah melihat, masukan dari jenis kotak centang. 

Tapi tidak ada JavaScript sini apapun. Ini hanya HTML yang pergi ke register.php. Tapi dalam versi satu, di mana saya mulai mendapatkan orang-orang pop-up, mari kita lihat apa yang sebenarnya terjadi di sini. Dalam versi satu, apa Aku akan see-- saya pikir saya bisa kios cukup dengan kata-kata cukup, tapi aku berlari keluar. 

Dalam versi satu-- ada kita pergi. Dalam versi satu, melihat following-- dan tidak implementasi terbaik, tapi itu pertama saya. Perhatikan bahwa di bawah bentuk, saya memiliki tag script. Dan tag script berarti, hey, browser, disini datang beberapa kode di, biasanya, JavaScript. Dan sekarang, melihat apa yang saya lakukan. Pada line-- Saya hampir tidak bisa baca itu-- garis 32, ia mengatakan, var form-- sehingga memberi saya variabel yang disebut bentuk. Dan kemudian mendapatkan document.getElementId dari "pendaftaran." Apa ini? Nah, biarkan aku mundur di sini. Dan pemberitahuan, ah, saya memberikan bentuk elemen ide sewenang-wenang tapi deskriptif pendaftaran. Jadi ini memberi saya sebuah variabel yang memungkinkan saya untuk ambil simpul itu, yang persegi panjang di pohon yang disebut bentuk. berarti form.onsubmit, hey peramban, mendaftarkan pendengar acara pada formulir ini. Dengan kata lain, ketika formulir ini disampaikan, mengeksekusi kode berikut. Itu tidak membutuhkan nama karena mengapa Anda perlu tahu nama? Anda hanya perlu tahu apa untuk mengeksekusi, ergo itu fungsi anonim atau lambda. Dan fungsi yang semua garis-garis ini di sini. Dan sekarang, jujur, meskipun Anda mungkin tidak pernah ditulis JavaScript sebelumnya, itu hanya C dan PHP logika. Jadi jika form.email.value == "" - jadi jika bidang email kosong, berteriak pada pengguna dengan "Anda harus Alamat email Anda. " Lain jika form.password.value adalah teriakan kosong di pengguna, "Anda harus memberikan password Anda." 

Lebih menarik secara logis, jika form.password.value tidak form.confirmation.value-- sama mana konfirmasi berasal? Biarkan saya mundur. Nah, aku menelepon masukan ini bidang sini sandi. Dan aku menelepon satu ini di sini konfirmasi. Saya bisa menyebutnya sandi dua atau apa pun. Aku hanya logis memeriksa yang kedua adalah sama. Else-- ternyata ini adalah Mr Boole again-- nilai Boolean, kotak centang. Jadi jika saya katakan, seru point-- jika tidak form.agreement.checked, berteriak pada pengguna juga. 

Jadi sintaks ini Anda akan melihat adalah sangat umum dalam JavaScript, di mana Anda memiliki notasi bertitik ini. Anda mulai dengan sebuah objek di sini. Anda menyelam lebih dalam ke ke properti seperti password. Dan kemudian Anda mendapatkan nilai yang sebenarnya. Dan lagi, di sini adalah input. Berikut adalah nama sandi. Dan nilainya apapun manusia sebenarnya telah diketik di. 

Jadi dalam semua ini kasus, saya kembali palsu. Tapi jika tidak, saya kembali benar. Dan sekarang kita melihat penggunaan menarik dari saat Anda akan kembali palsu untuk menghentikan apa pengguna melakukan dan membuat dia memilih lagi atau ketik lagi. Jika tidak, kita kembali benar. 

Dan biarkan saya memperkenalkan satu varian lain dari ini hanya untuk benih beberapa pemahaman tersebut. Nah, di versi 2 ini, bentuk-2-- Aku akan melakukannya dengan gelombang tangan. Hal ini, bagi mereka yang ingin tahu, versi jQuery, Bagi Anda yang mungkin ingin mencoba-coba dalam perpustakaan tertentu. Tapi mari kita start-- dan pertanyaan? Biarkan saya berhenti sejenak karena yang cepat dan banyak. 

Tapi hal yang baik di sini adalah bahwa semua dari kode ini hampir sama. Hal-hal baru adalah apa dom? Apa persegi panjang ini? Apa node ini? Apa fungsi anonim? Apa event handler? Tapi untungnya, sebagian besar yang hanya lingkaran penuh dari, katakanlah, seminggu nol. Baiklah. Jadi sesuatu yang sedikit lebih menarik? Yah, pertama-tama, biarkan aku pergi depan dan membuka Google Maps. Dan Anda akan melihat bahwa untuk saat, pada sepersekian detik, melihat apa yang terjadi ketika Saya klik cukup cepat. Dan hubungan ini di Harvard begitu cepat bahwa Anda tidak benar-benar menyadarinya. Tapi apa yang Anda jenis semacam melihat jika saya klik dan tarik benar-benar cepat? Bagi Anda menonton online, jika Anda memperlambat ini untuk kecepatan 0.5x, Anda dapat melihat hal ini lebih baik. 

Apa yang terjadi hanya sebelum aku diklik dan diseret? Biarkan aku mencoba di sini-membiarkan saya melakukan sesuatu yang lain, seperti 90210. Mari kita pergi jauh. Itu benar-benar cepat, juga. Bagaimana Disney World? Di sana kami pergi. OKE. Apa yang Anda lihat untuk sepersekian detik? Hanya, seperti, kotak, kan? Penampung untuk ubin? 

Nah, apa yang terjadi di sini? Google Maps adalah contoh yang bagus dari teknologi ini yang disebut AJAX. Dan ini adalah di mana kita akan mulai menggunakan JavaScript dalam terutama cara memikat. Kembali pada hari, ada website ini disebut MapQuest. Dan aku harus mengambil screenshot ini dari tahun 1990-an, di mana jika Anda ingin terlihat di sini pada peta, Anda benar-benar akan klik panah di atas yang menunjukkan Anda persegi yang berbeda dari peta. Jika Anda ingin bergerak ke kiri, Anda diklik panah yang menunjukkan Anda persegi yang berbeda dari peta. Dan beberapa website masih lakukan hari ini. Tetapi bahkan MapQuest telah mendapat lebih baik, seperti Google Maps. 

Sebaliknya, apa yang lebih baik ini hari adalah website yang menggunakan AJAX. AJAX-- atau dikenal sebagai Asynchronous JavaScript dan XML, yang adalah cara mewah mengatakan teknologi atau teknik yang memungkinkan browser menggunakan JavaScript untuk membuat permintaan HTTP tambahan setelah halaman telah dimuat. Jadi apa artinya ini? Nah, itu akan menjadi semacam menjengkelkan di Gmail jika setiap kali Anda ingin untuk memeriksa email Anda, Anda telah benar-benar memukul Control-R atau Perintah-R atau klik tombol Reload dan seluruh halaman sialan akan reload. Benar? Ini akan berkedip putih mungkin untuk kedua. Anda akan melihat bodoh progress bar. Dan hanya untuk melihat apakah Anda memiliki baru email, halaman web dan seluruh URL Anda berada di harus reload. 

Tapi itu bukan apa yang terjadi di Gmail. Benar? Ketika Anda mendapatkan email baru di Gmail, apa yang terjadi di layar? Itu hanya muncul, kan? Itu hanya ajaib muncul sebagai baris baru dalam tabel. Yang benar-benar melibatkan jumlah yang layak kompleksitas. Bahkan, jika Anda berpikir tentang pohon ini, yang meskipun sangat sederhana di sini, Gmail-- dan aku harus melihat kode untuk menjadi sure-- mungkin memiliki sebuah tabel HTML atau mungkin daftar unordered yang membuat setiap email inbox Anda sebagai. 

Dan jadi jika Anda membayangkan ini ada adalah pohon dalam memori ketika Anda menggunakan Gmail yang terlihat seperti semacam seperti ini, ketika Google menyadari, ooh, Anda memiliki email baru, tidak ingin membangun kembali seluruh pohon. Sebaliknya, ia ingin menemukan node di pohon yang mewakili inbox Anda dan hanya menyisipkan node baru. 

Jadi sangat mirip dengan pset lima, di mana Anda harus memasukkan node ke dalam tabel hash, sama halnya Google, melalui Kode JavaScript yang telah ditulis, melintasi pohon ini, mencari tahu di mana adalah bahwa kotak masuk bagian dari jendela, dan kemudian menyisipkan baris baru. Dan baris baru hanya berarti satu atau lebih node baru dalam pohon. 

Dan AJAX adalah teknik ini yang memungkinkan untuk hal itu. Setelah Anda mengunjungi URL, Namun gila lama itu, dan sekali halaman memiliki telah dimuat, Anda masih bisa ambil lebih banyak data dari internet-- apakah itu email atau ubin dari map-- sebuah ambil balik layar dan kemudian masukkan ke halaman sehingga manusia tidak benar-benar harus menunggu untuk itu. 

Facebook Messenger bekerja dengan cara yang sama. Sejumlah websites-- lainnya oh, sebenarnya, bahkan ini. Maksudku, ini, terus terang, jenis menjengkelkan fitur hari ini. Jika saya mulai mencari cats-- ini adalah jenis pengalaman pengguna yang mengerikan. Itu hanya mulai mencari saya. Nah apa itu lakukan? URL belum benar-benar berubah sejak saya mulai mengetik. Tapi apa yang terjadi di seluruh wire-- OK, hmm menarik. Apa yang terjadi di seluruh kawat sini hanya mendapat aneh. 

OKE. Jadi biarkan aku pergi ke depan dan memeriksa elemen dan pergi ke tab Jaringan dan mencoba untuk membuat ini teknis dan kurang tentang kucing. Seperti yang saya ketik, secara harfiah, kucing dan- apa yang terjadi per-- Aku tidak akan klik itu. Baiklah. Jadi di sini, apa yang terjadi setiap waktu saya ketik karakter, rupanya? Seperti, tingkat rendah? Apa yang terjadi dengan masing-masing karakter aku mengetik di keyboard saya? Ya? AUDIENCE: [tidak terdengar]. 

DAVID Malan: Tepat. Masing-masing karakter adalah akan Google, satu per satu. Mereka membangun sebuah string pada server mereka yang mewakili semua yang saya mengetik di sejauh ini. Dan setiap kali saya ketik karakter lain, mereka menggunakan saus rahasia mereka dari mencari algoritma dan mencari tahu, maksudnya halaman kucing ini atau halaman kucing ini atau sejenisnya? Jadi dalam arti, ia menyediakan saya dengan pengalaman yang lebih baik dalam bahwa saya bahkan tidak harus menyelesaikan pikiran saya. Dan memang, itu adalah yang berguna hal, autocomplete pada umumnya. Jika algoritma mereka cukup baik dan jika pencarian saya cukup jelas, Saya tidak perlu mengetikkan seluruh kata. Mereka akan memberitahu saya apa adalah aku benar-benar mencari. Jadi apa yang disebut Google instant pencarian hanya menggunakan AJAX, menggunakan kode yang memungkinkan mereka untuk meminta konten tambahan melalui web browser belakang layar menggunakan ini bahasa baru, JavaScript. Jadi kita punya beberapa menit lagi. Dan biarkan aku memanggil teman saya Colton naik ke panggung, karena tampaknya terutama menyenangkan terakhir kali untuk memperkenalkan teknologi bahwa beberapa dari Anda telah menyatakan minat di proyek akhir. Kami pikir itu akan menyenangkan untuk membawa up relawan, meskipun, hari ini menunjukkan penambah ini yang memungkinkan you-- yeah, Aku melihat tangan pertama ini. Ayo up. Bagus sekali. Kerja bagus. Aku akan memproyeksikan ini pada layar hanya dalam beberapa saat. Siapa nama Anda untuk semua orang? 

EFA: Aku Efa. 

DAVID Malan: Etha? 

EFA: Efa. 

DAVID Malan: Efa? 

EFA: Ya. 

DAVID Malan: Senang melihat Anda. Baiklah. Mari saya mendapatkan ini siap. Datang di atas ke tengah dengan Colton sini. Apa Colton memiliki di tangannya hari ini adalah remote control. Jadi, daripada hanya berdiri di sana dalam dunia tiga dimensi melihat- sebagai Colton lakukan, sekarang Efa bisa benar-benar berjalan di sekitar dengan pergi, bawah, kiri, dan kanan seperti Nintendo atau Xbox kontroler. EFA: Aku akan jatuh dari panggung. DAVID Malan: Saya akan berdiri di sekitar sini. Tapi itu adalah risiko. OKE. Jadi pergi ke depan dan menempatkan mereka pada. Biarkan aku pergi ke depan dan beralih ke layar di sini. Biarkan saya meredupkan lampu. Dan Colton, biarkan aku datang berdiri di sebelah Anda. 

Apakah Anda ingin menjelaskan di sini dengan mic apa yang kita lakukan? Di sini Anda pergi. 

COLTON: Tentu. Jadi sekarang kami loading Oculus, Saya kira operating-- tidak beroperasi sistem, tetapi program utama, di mana Anda dapat mengakses semua game dan aplikasi yang di perpustakaan Anda. Jadi sekarang, itu harus mengatakan tekan touchpad untuk memulai. Touchpad akan berada di sisi kanan headset. Jadi pergi ke depan dan tap-- EFA: Oh, man. DAVID Malan: Ya, di sana Anda pergi. Kualitas Efa adalah melihat adalah kualitas yang lebih tinggi. Ini hanya Wi-Fi di sini. COLTON: Jadi apa yang Anda akan ingin melakukan adalah melihat ke arah atas kanan layar. Yap, bahwa permainan di bagian paling atas kanan. Dan kemudian ketika Anda memilih itu, tekan touchpad lagi. Saya pikir Dreadhalls nya. Dan kemudian di sini adalah a-- sini, biarkan saya terus kacamata Anda untuk Anda. 

Jadi saya hanya memberinya controller. Jadi sekarang dia bisa mengontrol permainan. Dia bisa bergerak dan hal-hal seperti itu. Jadi pergi ke depan dan melihat ke atas. Anda akan melihat New Game. Jadi pergi ke depan dan Anda bisa melakukan itu. Sekarang, Anda harus mampu mengendalikan diri dengan controller, juga, secepat permainan beban di sini. Ini mungkin sedikit menakutkan. 

EFA: Sekarang Anda ceritakan. OKE. 

COLTON: Baiklah. Jadi pastikan bahwa Anda dapat bergerak di sekitar. OKE. Anda dapat bergerak di sekitar. Sempurna. Jadi jika Anda melihat ke bawah, Anda memiliki peta. Peta menunjukkan Anda di mana Anda berada. Anda dapat melihat di sekitar ruangan. Anda benar-benar bisa berbalik. Ya, persis. Berbalik. 

Jadi melihat ke kiri Anda. Saya pikir ada sesuatu yang dapat menangkap per barel di dalam ruangan. 

EFA: Bagaimana cara mendapatkan memetakan dari jalan? COLTON: Carilah. Hanya melihat ke atas. Baiklah. Ini dia. Sekarang pergi ke depan dan hanya berbalik. Jadi melihat lebih jauh ke kiri. Terus bergerak ke kiri. Terus mencari kiri. Teruskan. Ya. 

EFA: Oh, seperti itu. 

COLTON: Ya. Berjalan ke arah itu dengan controller. Ini dia. Sekarang harus mengatakan mengambilnya. Ini dia. Ambil. Baiklah. Sekarang, mari kita keluar dari ruangan ini. Pergi ke depan dan berjalan ke pintu itu. Jadi Anda akan hold-- dikatakan tahan tombol untuk memaksa terbuka. Jadi pergi ke depan dan tahan tombol. Yap, memaksanya membuka. Baiklah. Kerja bagus. Sekarang kita berjalan keluar dari ruangan. Jadi aku akan meninggalkan sisanya up untuk Anda dan melihat apa yang Anda cari tahu. EFA: Aku tidak akan di ruangan gelap. Oh tunggu. Sekarang aku harus pergi menyusuri lorong gelap? OK, aku akan kembali [tidak terdengar]. COLTON: Baiklah. Beberapa item yang lebih untuk mengambil. Sepertinya beberapa koin. Itu kunci pick. Jadi jika Anda menemukan terkunci pintu, Anda bisa menggunakan itu. Apakah kamu takut? 

EFA: Belum. COLTON: OK. 

Pretend-- ya. Hanya berpura-pura kau sebenarnya berdiri di sana. Dan jika Anda mengubah around-- Anda harus bisa digunakan untuk itu. Tapi masuk akal. DAVID Malan: Dan sementara Efa terus bermain, karena kita bisa melakukan ini sepanjang hari, kita semua bisa ujung-ujung kaki di sini. Tapi kami memiliki dua pasang lainnya, jika Anda ingin datang dan bermain. Jika tidak, kita akan melihat Anda selanjutnya pada hari Rabu. Terima kasih kepada relawan kami hari ini. [Tepuk Tangan] 

[MUSIK - "Seinfeld THEME"] SPEAKER 1: Yah, aku menempatkan PL baru mount di. Aku hanya mengubah OLPF-- 

SPEAKER 2: Jadi apa sebenarnya yang Anda lakukan? 

SPEAKER 1: Nah, masing-masing dari these-- di sini, saya akan menunjukkan satu ini di sini. Anda bisa melihatnya di sini. 

SPEAKER 3: Aku pikir aku baik dengan ini. Kamu mau lagi? 

SPEAKER 4: Tidak, aku baik. [Tidak terdengar]. 

SPEAKER 3: Tidak, [tidak terdengar]. Memiliki beberapa. SPEAKER 1: warna yang berbeda. SPEAKER 2: OK. SPEAKER 1: Jadi akhirnya apa yang dilakukannya itu menyesuaikan warna of--