>> [Bermain muzik]
>> DAVID MALAN: Ini adalah CS50.
Ini adalah permulaan minggu sembilan.
Dan ini adalah apa yang akan mempunyai menjadi ulang tahun ke-200 Encik Boole.
Jadi ini adalah felo kepada siapa kami telah menyebut
sekian kali mengenai menggunakan Pembolehubah Boolean benar dan palsu,
1 dan 0 dan sebagainya.
Dan ini adalah Google penghormatan kepada beliau hari ini.
Beliau akan bertukar 200.
Jadi, jika anda ingin menyertai kami untuk CS50 makan tengah hari
kita lihat pada link di laman web kursus ini.
Dan muka dan rakan-rakan seperti ini menanti anda di sini di Cambridge.
Wajah seperti ini menanti anda di New Haven.
Dan, sebenarnya, Ken dalam New Haven sila dibuat
apa yang dipanggil GIF animasi Eli di sini baru-baru ini lunch-- GIF yang belum
lain format fail grafik, yang anda berada familiar-- yang
kelihatan sesuatu yang kecil seperti ini.
Jadi hanya urutan yang daripada- OK.
Tiada siapa di sini di Cambridge ketawa.
Tetapi di New Haven, ini adalah benar-benar lucu, bukan?
Baiklah.
>> Jadi jangan menyertai kami di sana.
Di sini, di Harvard, secara khusus, Rabu ini,
jika anda mahasiswa tingkat kedua atau bayat even-- atau pemikiran junior-- pembuatan
suis ke dalam komputer sains, tahu bahawa ada akan mempunyai
dapat CS menasihati ini adil Rabu, tidak lama selepas kelas
pada 4:00 PM dalam komputer bangunan sains Maxwell Dworkin.
Kami akan meletakkan ini di padang golf ini laman web dengan esok, juga.
Donuts, Saya diberitahu, akan dihidangkan.
>> Baiklah.
Story-- kelakar saya poking sekitar di internet,
dan saya dapati beberapa arkib lama laman web bekas saya.
Dan ternyata out-- sekitar ini masa, ia kelihatan sangat tepat pada masanya
sejak saya berkumpul bahawa pilihan raya UC akan memperlengkapkan lagi.
Jadi saya berlari untuk UC, hilang teruk.
Dan mungkin ini adalah sebahagian mengapa.
Jadi ini adalah laman web saya pada masa itu.
Untuk sebab-sebab tertentu, saya fikir ia adalah idea yang baik, sebelum memberitahu orang
apa platform saya dan mengapa mereka perlu mengundi untuk saya, bahawa mereka mempunyai
klik untuk memasuki untuk mengetahui bahawa maklumat, yang jika ditinjau kembali adalah
jenis menyeramkan.
Saya tidak benar-benar tahu apa yang.
>> Tetapi ia pasti tidak membantu kempen saya.
Saya juga mendapati bahawa dengan kanan year-- saya mempunyai kalendar Muppet ini.
Muppets baik hati daripada menjadi tren ketika itu.
Atau mungkin mereka tidak.
Saya mempunyai kalendar Muppet ketika itu.
Dan saya fikir ia akan menjadi sejuk untuk nama komputer saya pada rangkaian Harvard
frogman.student.harvard.edu.
Pada masa itu, kita semua mempunyai unik nama host yang boleh dikenal pasti.
Dan anda boleh memilih beberapa sia-sia menamakan dan bukannya nama anda sendiri.
Dan saya pergi dengan manusia katak atas sebab tertentu.
>> Dan kemudian saya started-- saya menghabiskan banyak masa mengklik melalui pautan berikut
pagi ini.
Dan ini adalah halaman tentang saya, yang kini sejenis kelihatan comel.
Tetapi ia juga membuktikan kepada hanya bagaimana teknologi ini sudah tiba.
Maksud saya, pada zaman dahulu, 486 adalah sesuatu.
Hari-hari ini, ia adalah super, super, super perlahan dan juga kurang
daripada yang anda mempunyai dalam anda poket sendiri hari ini.
Ada lagi di sana yang adalah lebih memalukan.
Jadi saya akan serahkan pada itu.
Tetapi itu adalah pertama saya kemasukan ke web-- oh, tidak.
Yang tidak.
Kemasukan sebenar pertama saya ke dalam pengaturcaraan web adalah laman web ini, yang saya hanya terlupa.
Pada satu ketika, saya belajar bagaimana untuk membuat imej latar belakang berulang-ulang.
Oleh itu, saya mendapati jubin ini berkesan, seperti pemain hoki, bola sepak, dan golf
bola, atau apa sahaja yang untuk laman web Frosh IM.
Dan ini adalah benar-benar, benar-benar yang projek berasaskan web pertama saya mengambil pada--
Saya fikir mungkin mahasiswa tahun, year-- junior
selepas mengambil CS50 dan CS51, satu kelas susulan biasa.
Saya perhatikan dalam mencari melalui arkib
bahawa salah satu pengganti saya dan rakan-rakan, Lee, sejenis berubah
hak cipta kepada dirinya sendiri.
Tetapi ini sememangnya sesuatu yang Saya hendaklah memiliki rasa malu untuk.
Tetapi pada masa itu, ini adalah laman web pertama,
seperti yang saya katakan beberapa minggu yang lalu, yang mana boleh bayat
mendaftar untuk sukan antara dinding di sini.
Dan oleh itu ternyata bahawa imej latar belakang
seperti itu tidak apa-apa idea yang baik.
Tetapi web itu adalah baru, dan kami semua mencuba.
Dan ini adalah apa yang saya nampaknya lakukan pada masa itu.
Baiklah.
Jadi tanpa berlengah-lengah lagi, kita beralih gear hari ini untuk memberi anda, benar-benar,
bahagian terakhir yang anda mungkin dapati amat berguna untuk projek akhir
tetapi juga akan mula membuat web seluruh seluruh dunia
berasa sedikit lebih mudah difahami.
Malah, kita akan memperkenalkan satu bahasa pengaturcaraan yang lebih
dipanggil JavaScript yang serupa dan berbeza dengan cara yang berbeza
dari bahasa kita telah melihat setakat ini.
>> Jadi C, ingat, adalah bahasa ini disusun.
Anda perlu berjalan melalui pengkompil.
Anda mendapatkan kod sumber untuk membantah kod, atau sifar dan satu.
Dan mereka adalah sifar dan orang-orang yang CPU anda, Unit Pemprosesan Pusat,
sebenarnya faham.
PHP, sebaliknya, tidak bahasa yang disusun.
Ia adalah apa?
Ia adalah bahasa yang ditafsirkan.
Jadi ada beberapa program dipanggil seorang jurubahasa yang
mempunyai untuk membaca bahagian kitab itu kepada bawah, kiri ke right--
dan memikirkan apa yang semua sintaks anda tidak dan bermakna,
sama ada ia adalah satu gelung atau keadaan atau mana-mana nombor lain pengaturcaraan
membina.
Jadi itulah bahasa yang ditafsirkan.
>> Kemudian kami diperkenalkan HTML.
Dan HTML tidak walaupun satu bahasa pengaturcaraan.
Kita akan memanggilnya apa?
Sebuah bahasa markup, yang hanya sejenis cara mewah untuk mengatakan ia
tidak mempunyai pengaturcaraan konstruk seperti kita lihat walaupun kembali pada hari Scratch.
Tiada gelung.
Tiada syarat-syarat.
Ia benar-benar adalah bahasa yang tentang menandakan data anda
dan format atau menstrukturkan dalam beberapa cara.
>> CSS, sementara itu, begitu juga bukan bahasa pengaturcaraan.
Ia lebih estetika berorientasikan.
Dan ia membolehkan anda untuk menyusun menala halus perkara seperti saiz fon dan warna
dan penempatan dan semua itu.
Selepas itu kami
>> SQL.
Jadi SQL memang pengaturcaraan bahasa dalam erti kata lain,
walaupun disesuaikan khusus kepada pangkalan data.
Tetapi walaupun kita hanya memperkenalkan anda kepada memilih dan memasukkan dan memadam dan mengemaskini
dan beberapa orang lain, ternyata anda boleh sebenarnya
menulis fungsi atau prosedur, kerana mereka
dipanggil, dalam SQL yang kelihatan dan bertindak agak seperti PHP dan C fungsi.
Maka ketahuilah bahawa mereka wujud.
Tetapi kita tidak peduli dengan mereka seperti yang kita hanya menggaru permukaan di sini.
Dan kemudian JavaScript, terakhir bahasa kami secara rasmi diperkenalkan.
Jadi JavaScript, juga, adalah bahasa ditafsirkan.
Dan orang-orang biasa, adakah anda mahu untuk membezakannya
dengan beberapa ciri-ciri dari kedua-dua C dan PHP?
Apa yang membuatkan ia berbeza?
>> PENONTON: Ia tidak disusun.
>> DAVID MALAN: Katakanlah lagi?
>> PENONTON: Ia tidak disusun.
>> DAVID MALAN: Ia tidak disusun.
Oleh itu, ia juga ditafsirkan.
Jadi ia tidak disusun.
Tetapi yang menjadikan ia sedikit seperti PHP.
Tetapi ia masih berbeza daripada PHP dalam beberapa cara yang menarik,
sekurang-kurangnya dalam cara kita akan menggunakannya.
Ya?
>> PENONTON: Ia berjalan-klien.
>> DAVID MALAN: Ia berjalan pihak pelanggan, biasanya.
Itulah sesungguhnya membezakan yang ciri bagi kami sekarang.
C adalah pelayan-sampingan dalam erti kata yang kita lakukan segala-galanya dalam CS50 IDE.
PHP setakat ini telah pelayan-sampingan setakat
kerana ia juga mendapat interpreted-- tidak disusun, tetapi interpreted--
dalam CS50 IDE, yang sudah tentu hanya pelayan atau pelayan dalam awan.
>> Tetapi JavaScript, walaupun walaupun anda anda akan
untuk mula menulis untuk, katakan, pset lapan dan mungkin akhir projects-- anda
pergi ke kanan dalam CS50 IDE dan simpan
dalam fail dalam IDE CS50, CS50 IDE dan, seterusnya, pelayan awan
di mana ia menjadi tuan rumah, tidak akan mentafsir atau melaksanakan kod anda.
Sebaliknya, ia akan dihantar dalam borang tidak diubah turun ke pelayar.
Dan ia kemudian akan menjadi IE atau Chrome atau Firefox atau Safari
atau apa sahaja yang benar-benar menafsirkan ia, atas ke bawah, kiri ke kanan.
Jadi utama yang membezakan ciri-ciri untuk hari ini
ialah JavaScript pihak pelanggan dan PHP, misalnya,
mempunyai menjadi pelayan-sampingan.
Sekarang, ini mempunyai implikasi menarik untuk, seperti, harta intelek
dan yang sebenarnya boleh melihat kod anda.
Dan sesungguhnya, anda boleh pergi di web dan melihat kebanyakan
apa-apa kod yang seseorang mempunyai ditulis dalam JavaScript.
Kadang-kadang ia boleh dibaca, kadang-kadang ia dikelirukan.
Tetapi lebih kepada yang dalam masa terdekat.
>> Jadi JavaScript, baik yang cukup, adalah super sama, sintaksis, untuk C.
Dan banyak seperti PHP, tidak ada fungsi utama.
Jika anda ingin mula menulis Kod JavaScript, seperti yang anda akan lihat hari ini,
anda hanya mula menulis.
Tetapi ia adalah, anda akan lihat, terutamanya berguna dalam konteks pelayar web.
Walau bagaimanapun, sedikit saya disclaimer-- biasanya earlier--
adalah untuk mengatakan bahawa anda boleh semakin digunakan hari JavaScript pelayan-sampingan
menggunakan rangka kerja mewah dipanggil Node.js bahawa beberapa aplikasi CS50 sendiri
ditulis dalam.
Semak 50 sebenarnya menggunakan Node.js.
Tetapi kita akan memberi tumpuan kepada JavaScript klien sini pada keluar.
>> Jadi di sini adalah beberapa syarat dalam PHP.
Maaf, dalam- sebenarnya, yang kenyataan ini, juga adalah betul.
Berikut adalah juga satu set keadaan di JavaScript.
Sintaksis, ia adalah sama dengan C dan PHP.
Ungkapan Encik Boole adalah, begitu juga, sintaksis
sama dengan kedua-dua C dan PHP.
Kami juga mempunyai suis dalam JavaScript yang kelihatan sama.
Kami ada untuk gelung yang berstruktur sepercaman,
manakala gelung, lakukan semasa gelung.
>> Yang ini sedikit berbeza.
PHP mempunyai bagi setiap konstruk yang anda mungkin menggunakan
atau akan digunakan dalam pset tujuh, mungkin.
JavaScript mempunyai versi ini khas untuk di mana anda benar-benar mengatakan sesuatu
seperti untuk kekunci berubah-ubah dalam objek, yang adalah cara yang sangat ringkas untuk mengatakan,
jika saya telah mendapat object-- dan kita akan bercakap tentang ini sekali lagi dalam moment-- yang
dan saya mahu untuk melelar semua pasangan nilai utama di dalam,
Saya tidak perlu memikirkan bagaimana untuk indeks berangka mereka dengan sifar, satu,
dua, tiga.
>> Saya benar-benar boleh mengatakan ini.
Dan pada setiap lelaran, JavaScript bagi saya akan mengemas kini kunci pembolehubah
menjadi kunci yang pertama, kemudian tekan kekunci yang akan datang, kemudian tekan kekunci yang akan datang, kemudian tekan kekunci yang akan datang,
dan sebagainya.
Dan saya boleh mendapatkan di nilai dengan merawat objek dalam JavaScript, seperti yang kita akan lihat,
seolah-olah ia adalah satu pelbagai bersekutu dalam PHP.
Malah, jika anda akhirnya dibalut anda keberatan sekitar apa yang pelbagai bersekutu adalah
dalam PHP, anda boleh memikirkan ia buat masa ini sama dengan objek dalam JavaScript.
Tetapi itu sedikit melampaui batas.
>> Perlengkapan melihat, baik yang cukup, sama untuk PHP kecuali satu watak.
Ada satu perkara yang hilang di sini yang kita telah melihat minggu lepas dengan PHP.
Apa yang ditinggalkan?
Ya?
Tiada tanda dolar.
Jadi kita kembali kepada lebih biasa di mana dunia
pembolehubah tidak mempunyai tanda-tanda dolar.
Tetapi anda awalan mereka dengan var, biasanya.
Dan var bermaksud berubah-ubah.
Dan sama seperti PHP adalah longgar typed-- mana terdapat pelbagai jenis,
terdapat nombor dan tali dan terapung dan sebagainya forth--
JavaScript sama mempunyai jenis.
Tetapi ia longgar ditaip dalam kita yang pengaturcara tidak perlu menentukan mereka.
Kita hanya perlu sedar yang jenis wujud.
>> Pembolehubah, meanwhile-- di sini adalah cara kita mungkin mengisytiharkan "hello, dunia"
sebagai rentetan.
Perhatikan ia serupa dengan PHP tetapi tiada tanda dolar.
Dan ini adalah sesuatu yang kita akan mula melihat lebih hari ini,
di mana anda mempunyai objek dengan kunci dan nilai-nilai.
Dan jika anda ingin mencuba untuk membuat kesimpulan dari week-- lalu
sintaks adalah sedikit berbeza.
Tetapi kewarasan sedikit check-- berapa kunci adakah objek ini seolah-olah mempunyai?
Jadi ada empat.
Saya melihat dua.
>> Jadi ia sebenarnya dua.
Jadi ini adalah koleksi yang dua pasangan kunci-nilai.
Kuncinya adalah simbol yang nilainya FB.
Yang penting adalah harga yang nilainya 101,53.
Jadi mereka adalah dua pasangan kunci-nilai.
Dan ingat, PHP-- dan ini sekali lagi hanya jenis perbezaan sintaksis.
Ia bukan semua yang intelektual yang menarik.
PHP mungkin telah menulis yang sama Perkara seperti quote follows--, sama.
Dan saya menukar ini untuk kurungan persegi.
Dan kemudian saya menukar ini kepada satu perkataan yang disebut harga, "harga."
Dan kemudian saya tidak menggunakan noktah bertindih.
Apa yang saya gunakan minggu lepas?
Ya, itu tanda sama dengan arrow notasi funky.
>> Dan kemudian saya melakukan perkara yang sama di sini.
Perkara yang sama di sini.
Dan itu sahaja.
Jadi ia adalah baik jika ini tidak mempunyai benar-benar tenggelam dalam ke memori hanya
lagi kerana ia benar-benar intelektual tidak menarik.
Ia adalah perbezaan hanya sintaksis.
Tetapi idea-idea yang sama.
Dalam pembolehubah ini quote dalam JavaScript
adalah koleksi pasangan kunci-nilai, satu daripadanya adalah simbol, satu daripadanya
adalah harga.
Dan saya boleh mendapatkan sekurang-nilai-nilai dengan sintaks berikut.
Sama seperti dalam PHP, saya boleh melakukan sesuatu like-- biarlah
saya membuat kotak ini sedikit lebih besar.
Sama seperti dalam PHP, saya boleh membuat this-- oh, celaka.
Datang pada.
>> Sama seperti dalam PHP-- OK, kita akan hanya menggunakan nota penyampai.
Sama seperti dalam PHP, saya boleh melakukan $ $ quote quote ["simbol"],
dan ini akan mendapatkan saya nilai "simbol."
Dalam JavaScript, ia akan menjadi yang serupa, di mana saya hanya boleh melakukan ini.
Satu-satunya perkara itu hilang adalah tanda dolar.
>> Begitu baik cukup, maka, ada tidak semua yang banyak sintaks baru.
Jadi apa yang hari ini kita memberi tumpuan kepada, benar-benar, beberapa idea dan aplikasi.
Dan yang pertama itu aplikasi yang anda mungkin
lihat jika anda menyelam ke dalam pset tujuh sudah adalah sintaks ini.
Jadi dalam pset tujuh, jika anda telah dilihat atau tidak dapat dilihat lagi,
tahu bahawa ada fail yang kita berikan anda dipanggil config.json-- JavaScript
Objek Notasi.
Mengapa?
Kami mahu menjadi mampu untuk menyediakan anda dengan template dengan beberapa pasangan key-nilai.
Kami mahu menjadi mampu untuk memberikan anda senarai tuan rumah, nama pelayan.
Kami mahu memberikan anda satu pemegang tempat untuk nama pengguna anda
dan pemegang tempat bagi kata laluan anda.
Jika anda tidak melihat ini lagi, tidak perlu bimbang.
Lanjut mengenai ini dalam pset tujuh [? spec. ?] Dan kemudian,
jelas, kami mahu anda mengisi tugasan
kerana apabila anda log masuk ke dalam CS50 IDE, kamu masing-masing
mempunyai nama pengguna anda sendiri dan kata laluan.
>> Jadi kita boleh telah menggunakan setengah dozen atau lebih format fail yang berbeza.
Kita boleh menggunakan fail .txt.
Kita boleh menggunakan fail CSV.
Kita boleh telah menggunakan Fail INI, fail XML,
sejumlah lebih akronim yang anda mungkin tidak pernah mendengar.
Ia adalah jenis sewenang-wenangnya pada akhir hari.
Tetapi super popular hari ini adalah teks format dipanggil JSON-- JavaScript Objek
Notation-- yang kelihatan seperti ini.
Ia sedikit samar, tetapi notis corak.
Anda bermula dengan kerinting terbuka menyokong, dan anda berakhir dengan yang sama.
Di dalam itu adalah sesuatu.
Ia adalah satu pasangan kunci-nilai.
Jadi ini adalah satu objek yang saya melihat pada skrin di sini
yang mempunyai satu utama, yang mempunyai satu nilai.
Dan hanya membuat kesimpulan berdasarkan corak sebelumnya, apa yang penting di sini?
Pangkalan data, perkara yang perlu sebelah kiri kolon.
>> Sekarang, nilai berlaku untuk menjadi yang banyak baris masa ini.
Tetapi nilai bermula dengan kerinting yang memberanikan dan berakhir dengan dua gol kerinting.
Jadi apa yang anda akan mencadangkan adalah jenis nilai pangkalan data?
A kamus atau, hanya lebih ringkas, objek.
Betul?
Ini adalah jenis struktur data yang boleh menggunakan struktur lain dalam dirinya sendiri.
Jadi, jika semua ini kita memanggil yang object-- dan objek
adalah hanya sekumpulan nilai utama pairs-- yang nilai pangkalan data itu sendiri adalah objek.
Nilai pangkalan data mempunyai sejumlah pasangan nilai utama, di mana yang pertama
adalah tuan rumah, maka nama, kemudian nama pengguna, maka kata laluan,
setiap yang nilainya, sementara itu, ia hanya rentetan membosankan dalam tanda petik.
>> Jadi, walaupun itu bukan super jelas sahaja lagi,
tahu bahawa ini adalah hanya satu standard, cara yang agak membosankan
menyimpan data dalam format yang standard.
Tetapi kesilapan yang biasa anda mungkin membuat, walaupun dalam pset tujuh,
adalah sedikit perkara-perkara bodoh, seperti jika anda sengaja meninggalkan koma di sana.
Itu akan menyebabkan fail tidak semestinya yang dibaca.
Jika anda secara tidak sengaja meninggalkan perkara-perkara seperti sebut harga, ia tidak akan menjadi mudah dibaca.
Jadi ia adalah satu format fail cantik nitpicky, tetapi ia satu yang super biasa.
Dan kita berlaku untuk menggunakannya, walaupun anda tidak menggunakan apa-apa JavaScript sebaliknya,
dalam Serangga tujuh.
>> Baiklah.
Jadi ingat gambar ini.
Kami bercakap tentang, dalam HTML, yang kod mungkin kelihatan seperti ini.
Ini adalah HyperText Markup Language [Didengar] untuk hanya "hello, dunia."
Tetapi kemudian kami mencadangkan satu manakala belakang jika ia membantu,
anda mungkin mahu mula berfikir mengenai ini sudah sebagai pokok.
Malah, lekukan yang kita menggunakan hanya demi pembacaan ini
atau demi gaya pada kiri jenis tin
diterjemahkan ke dalam pokok ini, di mana anda mempunyai beberapa nod akar khas yang kita akan
secara umum dipanggil dokumen, di bawah yang adalah akar elemen HTML atau tag, HTML,
yang kemudiannya mempunyai dua kanak-kanak, kepala dan badan.
>> Kemudian seterusnya, kepala mempunyai tajuk.
Dan tajuk mempunyai nilai teks.
Dan badan yang sama mempunyai nilai teks.
Jadi, jika anda kata selesa bahawa ya, anda boleh mengambil HTML ini
dan melukis gambar seperti ini, sebelah kanan
adalah model mental yang bagus kerana sekarang yang kita ada JavaScript, pengaturcaraan
bahasa yang pelayar boleh melaksanakan dan mentafsir untuk anda,
ternyata bahawa apa yang kami hendak dilakukan-kod
yang mula memanipulasi ini struktur pokok dalam ingatan.
Kami tidak perlu membina pokok dalam ingatan.
Kami tidak perlu berbuat semacam struktur data-lima gaya Serangga
kerumitan.
Pelayar, baik cukup, atas mentafsirkan HTML atas ke bawah,
kiri atau kanan, secara literal akan tangan kami sama dengan penunjuk
itu keseluruhan pokok secara percuma.
Ia melakukan semua kerja keras.
Itulah yang Mozilla dan Apple dan lain-lain telah lakukan untuk kita.
>> Dan dengan JavaScript yang kita akan dapat mengawal dan mengubah dan melakukan
perkara yang menarik untuk pokok itu, jika tidak diketahui
sebagai DOM atau Document Object Model.
Apakah jenis perkara?
Nah, ternyata bahawa dalam JavaScript, ada
senarai pakaian ini peristiwa-peristiwa yang boleh berlaku.
Dan kita belum benar-benar digunakan yang perkataan sejak minggu sifar dan Serangga
sifar apabila kita bercakap tentang Scratch.
Kebanyakan anda mungkin tidak menggunakan acara di projek Scratch anda.
Tetapi anda mungkin ingat mudah Marco Polo
Sebagai contoh, di mana kita mempunyai dua sprites, seorang daripada mereka berkata, Marco.
Yang lain daripada mereka itu, setelah mendengar dan mendengar peristiwa itu, berkata, Polo.
Jika tidak, jangan ragu untuk melihat kembali yang jauh ke belakang.
>> Tetapi ini adalah hanya untuk berkata, dan anda boleh jenis
membuat kesimpulan dari nama-nama perkara, JavaScript, ternyata,
akan memberi kita satu cara untuk mendengar untuk tetikus akan turun atau tetikus naik
atau kekunci akan turun atau kekunci naik atau onselect onsubmit
atau onresizing sesuatu.
Dengan kata lain, apa-apa tindakan fizikal bahawa manusia boleh mengambil dengan pelayar
yang anda lakukan setiap hari, anda boleh menulis kod untuk mendengarkannya peristiwa
dan kemudian melakukan sesuatu yang sesuai.
>> Sebagai contoh, jika anda menggunakan Peta Google, apa yang berlaku jika anda klik dan langkah
tetikus, biasanya?
Jika anda klik dan tarik?
Ya?
Tepat sekali.
Peta ini mula bergerak.
Jadi, anda boleh menyusun daripada melihat apa yang di sini, apa yang di sana.
Dan bagaimana Google melaksanakan itu?
Well, mungkin, mereka menggunakan beberapa acara ini
pendengar, salah satu yang kata, mendengar untuk pada tetikus
down-- supaya apabila pengguna secara fizikal menolak atau pad jejak atau beliau tetikus dia
ke bawah.
Dan kemudian kita cari sesuatu seperti pergerakan
atau beberapa peristiwa lain yang membolehkan kita untuk menangkap drag.
Dan sebenarnya, drag adalah sama dalam hal ini dot dot dot senarai pilihan mungkin.
>> Jadi ini akan menjadi yang kuat cara untuk memulakan bertindak balas kepada pengguna
walaupun sebelum dia benar-benar klik sesuatu yang jelas seperti hantar.
Tetapi kita akan memperkenalkan beberapa topik untuk sampai ke sana.
Tetapi pertama, mari kita peralihan untuk beberapa kod yang sebenar.
Oleh itu, saya akan pergi ke hadapan dan membuka dom-0,
yang merupakan satu contoh yang mudah di sini bahawa jika saya zum masuk hanya
mempunyai input ini di sini untuk saya.
Dan saya akan pergi ke hadapan dan taip "David" bagi nama-Ku dan klik Hantar.
>> Dan kemudian, walaupun jenis murah, saya mempunyai segera ini yang timbul yang mengatakan,
"hello, Daud!"
Jadi ini adalah jenis seperti kami "hello, dunia"
yang kita lakukan seketika kembali dalam C dan walaupun dalam PHP kerana saya telah secara dinamik
outputted nama saya.
Yang boleh saya lakukan nama orang lain di sini.
Saya hanya boleh menukar ini kepada, seperti, Hana, klik Hantar.
Dan sesungguhnya, perubahan pop timbul sedikit.
>> Sekarang, pop-up adalah salah satu daripada ciri yang paling didera web.
Dan sebenarnya, kembali pada penghalang pop-up hari
datang ke dalam tren kerana anda akan pergi ke beberapa website--
mungkin place-- dipersoalkan yang akan kemudian tiba-tiba
mula bertubi skrin anda dengan sejumlah besar pop-up.
Dan supaya keupayaan ini untuk menimbulkan tingkap di hadapan pengguna
telah tidak begitu diterima baik oleh umat manusia.
Jadi itulah sebabnya anda lihat ini mengelakkan perkara,
yang hanya menjadikan isu ini hodoh.
Jadi, kita akan memerlukan cara yang lebih baik untuk meminta pengguna.
Tetapi untuk sekarang, yang seolah-olah untuk bekerja.
Jadi hanya intuitif, apa seolah-olah akan berlaku di sini?
Saya pergi ke hadapan dan Klik Hantar dan maka sesuatu yang berlaku, dengan jelas.
Tetapi apa yang tidak berlaku yang telah berlaku minggu lepas bila-bila masa saya klik Submit?
Apa yang tidak berlaku pada skrin?
Maaf?
Muat semula.
URL tidak berubah sama sekali.
Saya berkata ini dom-0, dan saya masih di dom-0.
Biasanya, kita akan mendapat berubah kepada beberapa lain URL, seperti register.php atau sebagainya.
>> Tetapi apabila saya menolak perkara ini dengan mengklik OK,
melihat bahawa URL yang kekal benar-benar meletakkan.
Dan, sebenarnya, jika saya sedikit ragu-ragu, saya membuka Chrome.
Biar saya membuka tab Rangkaian.
Dan notis itu kosong pada masa ini.
Biar saya pergi ke hadapan dan mengemukakan semula Maria.
Tidak ada trafik rangkaian sekalipun.
Jadi tidak ada HTTP.
>> Maka sesungguhnya, jika saya melihat kod sumber untuk this-- biarlah saya tutup tetingkap ini
dan pergi ke Lihat Source.
Menarik.
Ia kelihatan seperti ada beberapa tag baru, antaranya skrip.
Jadi mari kita lihat dalam CS50 IDE apa yang saya dihantar kepada pengguna.
>> Jadi di sini is-- mari memberi tumpuan kepada HTML sahaja.
Berikut adalah separuh bahagian bawah dom-0.html.
Dan perhatikan bahawa ia mendapat tajuk, tag kepala, tag badan, tag bentuk.
Tetapi apa yang melompat keluar kepada anda sebagai yang berbeza, terutamanya jika anda tidak pernah
ditulis apa-apa JavaScript diri sendiri.
Biar saya tatal sedikit ke sini yang betul.
Saya telah mendapat input, input lain untuk klik.
Saya telah mendapat satu ID, yang merupakan jenis baru.
Tetapi kita melihat ini dengan CSS.
Apa lagi yang pasti baru?
Ya?
Nice.
>> Baiklah.
Jadi di mana ia berkata onsubmit, melihat apa yang seolah-olah mengikuti.
Ini adalah atribut dalam HTML tatanama.
Nilainya adalah rentetan ini dipetik di sini.
Dan ini kelihatan sedikit pelik pada pandangan pertama.
Ia bukan HTML.
Ia bukan CSS.
Ini adalah, seperti yang anda sangka, JavaScript.
Oleh itu, ia seolah-olah bahawa dibina ke dalam ini Laman web ini adalah fungsi yang dipanggil memberi salam.
Dan saya membuat kesimpulan bahawa hanya kerana ia adalah satu perkataan, memberi salam.
Ia mendapat paren terbuka, paren dekat, koma bertitik.
Nampaknya fungsi C, kelihatan seperti fungsi PHP.
>> Dan sesungguhnya, ia akan menjadi fungsi JavaScript.
Kemudian saya kembali palsu.
Kami akan kembali kepada bahawa dalam hanya seketika.
Tetapi di mana fungsi ini ditakrifkan?
Nah biar saya tatal ke atas ke atas fail.
Dan walaupun ia adalah garis yang panjang, ia adalah agak mudah.
Biar saya zum keluar di sini dan memberi tumpuan kepada empat baris.
>> Jadi dalam JavaScript, hanya seperti PHP, anda hanya
berkata, secara literal, perkataan "fungsi" nama majlis itu,
dan kemudian kurungan dengan mana-mana arguments-- ada hujah dalam kes ini.
Dan tidak ada jenis pulangan dalam JavaScript, sama seperti PHP.
Jadi ia sedikit lebih longgar daripada C. Kerinting terbuka, kerinting rapat.
Dibina ke dalam JavaScript function-- yang bukan function-- disyorkan
tetapi fungsi yang dipanggil amaran tujuan yang tunggal dalam kehidupan
adalah untuk menarik yang cukup hodoh segera yang kita lihat sebentar tadi.
>> Sekarang ini adalah jenis hal yg penting.
Apa yang berlaku di sini?
Jadi mari kita mulakan untuk menyerlahkan segala-galanya di sini.
Itulah hujah yang sama untuk memberi amaran.
Dan apa yang berlaku?
Ini hanya kelihatan seperti tali.
Dan ternyata, tidak seperti PHP dan tidak seperti C, ia tidak kira dalam JavaScript
jika anda petikan tunggal atau petikan berganda.
Mereka akan menjadi setara.
Dan terus-terang, ia hanya popular pada hari ini
untuk pengaturcara JavaScript untuk sentiasa menggunakan tanda petikan tunggal untuk sebab-sebab tertentu.
Ia hanya perkara yang perlu dilakukan.
Tetapi kita boleh menggunakan tanda petik, juga.
>> Jadi plus adalah watak baru.
Tetapi orang-orang di antara kamu yang telah dilakukan ini sebelum ini, apakah ditambah maksudkan?
Yeah.
Menyatukan.
Oleh itu, kita melihat ini dalam PHP.
Terdapat hanya titik pengendali dalam PHP yang
akan menyatukan dua tali bersama-sama.
C adalah sakit di leher untuk melakukan ini.
Ingat dari pset enam, yang yang sakit secara khusus di leher,
anda perlu menggunakan sesuatu seperti strcat
selepas memperuntukkan memori pada timbunan atau timbunan itu.
Anda mempunyai untuk melompat melalui gelung hanya untuk menyatukan dua tali.
Dalam JavaScript, ia sangat mudah.
Hanya menggunakan operator campur di antara mereka.
>> Jadi kompleks yang berpandangan Perkara yang seolah-olah ini
kerana pada akhir rentetan ini keseluruhan, saya hanya
concatenate pada tanda seru.
Jadi, jika apa yang muncul telah "hello, Daud:" "hello, Hannah,"
"hello, Maria," dan sebagainya, jelas bahawa perkara pertengahan di antara kedua-dua
plus harus memberikan akses kepada apa?
Apa yang ada di sana untuk memastikan?
Yeah.
Jadi saya akan berpura-pura di sini menjawab nama mereka, bukan?
Jadi nama mereka muncul pada perlawanan akhir hasil. Jadi apa maknanya?
Well, saya mencadangkan awal yang gambar yang kononnya DOM
mempunyai unsur akar ini khas cara sehingga atas dipanggil dokumen.
Dan kini, ternyata, yang akan sebagai pembolehubah global khas
dalam JavaScript, dibina ke dalam yang merupakan sejumlah besar fungsi yang berguna.
Antara fungsi yang berguna adalah keupayaan untuk mendapatkan di mana-mana nod keturunan.
Mereka dataran atau segi empat tepat atau elips hanya nod di pokok, jadi untuk bercakap.
>> Jadi ia ternyata bahawa yang dibina ke dalam Objek dokumen JavaScript ini
adalah fungsi, atau dikenali sebagai kaedah, yang dinamakan getElementById.
Syntax untuk memanggil fungsi dalam JavaScript
yang berada di dalam sesuatu objek atau berubah hanya dengan notasi titik.
Dan kita melihat ini dalam C apa sintaks struct.
Anda lihat ini dalam pset tujuh, jenis, jenis, apabila anda melihat CS50 :: pertanyaan.
Kolon kolon dalam PHP adalah satu lagi cara memanggil fungsi itu
dalam beberapa objek.
>> Tetapi buat masa ini dalam JavaScript, ia hanya titik.
Dan supaya fungsi ini, baik cukup, jenis
mengatakan apa yang ia does-- mendapatkan unsur oleh ID.
Satu elemen hanyalah nama lain untuk tag atau nod dalam DOM.
Dan oleh itu elemen dengan ID "nama" bermakna this-- inilah HTML saya.
Dan berdasarkan HTML ini, apa yang nod atau apa HTML tag aku
akan pengaturcaraan menjadi tangan dengan memanggil document.getElementByID?
>> Ya, betul-betul.
Saya akan mendapatkan input unsur terdapat yang ID adalah "nama."
Jadi secara khusus, anda boleh memikirkan fungsi ini,
getElementById, sebagai satu cara untuk memberi menyokong penunjuk kepada nod tertentu
di pokok itu.
Kami tidak disediakan ini pokok, tetapi ia adalah cara yang
untuk mendapat akses kepada yang segi empat tepat atau segi empat tepat yang
dengan secara unik mengenal pasti melalui ID itu.
>> Sekarang, mengapa ini berguna kepada anda?
Nah, ternyata bahawa apabila anda telah mendapat
nod, yang segi empat tepat daripada picture, nod yang di dalamnya,
seterusnya, mempunyai sejumlah besar properties-- pasangan kunci nilai
atau data, salah satu yang dipanggil nilai.
Jadi secara literal, ia adalah jenis yang hal yg menjelaskan segala-galanya.
Tetapi pada akhir hari, semua ini tidak adalah memberikan anda
rentetan yang pengguna ditaip dalam fesyen hierarki ini.
Tetapi saya tidak suka beberapa perkara-perkara ini.
Atau sebaliknya, ada beberapa rasa ingin tahu masih.
Semua itu seolah-olah bekerja.
Mengapa anda berfikir saya kembali palsu selepas memanggil menyambut?
Ini kelihatan sedikit hodoh, yang Saya mempunyai dua kenyataan terdapat
dipisahkan oleh koma bertitik.
Cuba teka.
Jika saya dikeluarkan kembali palsu, apa yang mungkin berlaku, hanya naluri?
Maaf, katakan lagi?
>> Buka sekumpulan Windows.
Jadi berpotensi mungkin sesuatu seperti itu akan berlaku.
Apa lagi?
Mungkin mengemukakan permintaan di mana?
Untuk halaman yang sama.
Jadi, sebenarnya, itu yang lebih dekat menjawab di sini,
walaupun, tidak seperti pada masa lalu, saya tidak ada
dinyatakan sifat tindakan itu, yang biasanya kita perlu lakukan.
Ternyata ada lalai. Jika anda tidak menentukan tindakan,
ia seperti mengatakan quote, unquote atau nama fail itu sendiri,
yang dalam kes ini akan menjadi seperti dom-0.html.
Ia hanya jenis disimpulkan, atau sebaliknya tersirat.
>> Dan jadi jika saya tidak melakukan ini, mari kita perhatikan.
Biar saya simpan ini.
Dan saya telah dikeluarkan penyata palsu.
Biar saya kembali ke ini contoh dan daya masukkannya semula.
Dan anda mungkin telah melihat saya mencadangkan ini di CS50 Bincangkan sekumpulan kali.
Jika apa-apa yang pernah bertindak funky dan pelayar tidak berkelakuan seperti yang anda harapkan,
sering kali anda akan mahu untuk memegang Beralih dan kemudian klik Reload.
Yang akan memaksa setiap fail untuk memuat semula dan tidak menggunakan cache tempatan penyemak imbas anda
atau salinan supaya sekarang, biarlah saya pergi ke hadapan dan membuka Inspektor saya, tab Rangkaian.
Saya akan klik Memelihara Log kerana saya
tidak mahu ia untuk memadam baris sekali saya akan dibawa pergi tempat lain.
>> Biar saya pergi ke hadapan di sini dan taip Andi, klik Submit.
Baiklah.
Yang seolah-olah seperti yang diharapkan.
Ia berkata "hello, Andi."
Biar saya klik OK.
Menarik.
Perhatikan bahawa halaman yang berubah, walaupun ke halaman asal.
Perhatikan jenis URL yang berubah.
Ia menambah tanda tanya, yang biasanya petunjuk
yang kita cuba untuk mengemukakan sesuatu.
Dan kemudian di bahagian bawah, lebih jelas,
di sini adalah permintaan HTTP sebenar, yang mendapat sambutan 200 yang
membawa saya ke sini.
>> Jadi ini bukan apa yang kita mahu lakukan, bukan?
Kerana saya tidak mahu menambah nilai keseluruhan halaman.
Saya bukannya mahu kembali palsu bagi litar pintas
kelakuan lalai pelayar, yang adalah, sudah tentu, untuk mengemukakan halaman.
>> Jadi mari kita lihat pada contoh yang lebih baik sedikit.
Ini adalah dom versi satu.
Dan perhatikan yang berikut.
Tidak mengapa jika anda tidak grok semua baris kod.
Tetapi apa yang adalah berbeza tentang pelaksanaan ini?
Saya akan menetapkan ia berkelakuan sama, melakukan perkara yang sama.
Apa yang telah saya jelas dilakukan berbeza?
Ya?
>> PENONTON: [didengar].
DAVID MALAN: Ya.
Jadi fungsi yang ditakrifkan differently-- dengan kata lain, tidak ada di bentuk,
di sana pada baris 7-- atau sebaliknya, garis 8-- tidak lagi
adakah saya perlu sifat yang onsubmit.
Dalam contoh sebelum ini, saya mempunyai ini.
Dan kemudian saya benar-benar menulis kod saya di sini.
Dan kemudian saya berkata kembali palsu.
Dan jika ia tidak gosok anda dengan cara yang salah lagi,
ia harus bermula untuk setakat kerana, seperti dalam HTML,
apabila kita mula bersama bergaul ia dengan CSS dalam sifat-sifat gaya,
ia hanya mula mendapat sedikit tidak kemas atau merasa salah sedikit.
>> Begitu juga di sini, jika anda mula mengambil HTML,
dan kemudian anda secara automatik mencebur beberapa kod JavaScript
di tengah-tengah tali dipetik, ia tidak akan menjadi sangat dipertahankan.
Betul?
Ia bukan juga jelas pada mulanya tempat di mana kod JavaScript itu.
Jadi ia akan menjadi benar-benar baik sebagai prinsip reka bentuk yang lebih baik,
mari kita menyimpan HTML kami benar-benar berasingan daripada JavaScript kami.
>> Untuk berbuat demikian itu, apa yang kita ada dilakukan di sini adalah following-- yang
kita hanya menggunakan HTML untuk markup sahaja.
Dan sebagainya dalam versi salah satu daripada ini, semua Saya mempunyai satu bentuk ID yang unik.
Dan kemudian turun di sini, saya mengambil kesempatan daripada ciri khas JavaScript
di mana saya boleh mempunyai apa yang dipanggil fungsi tanpa nama.
Jadi ternyata bahawa jika saya memanggil document.getElementByID dari 'demo'
itu seperti memberi saya penunjuk kepada nod ini dalam pokok saya, unsur bentuk,
boleh dikatakan.
>> Sekarang, saya hanya tahu dari mengetahui sedikit HTML
sekarang kita telah membaca beberapa talian rujukan, yang unsur bentuk menyokong
sejumlah besar listeners-- acara di erti kata lain, senarai pakaian acara
pendengar yang kita lihat sebentar tadi.
Aku mengetahui dari membaca dokumentasi onsubmit yang merupakan acara yang sah
pendengar untuk elemen bentuk.
>> Jadi apabila saya tahu bahawa, ia adalah selamat bagi saya untuk melakukan
yang following-- mendapatkan nod yang dari pokok itu, unsur bentuk,
dan aksesnya dipanggil harta onsubmit.
Jadi titik hanya bermakna ini adalah harta,
seperti nilai istimewa di dalamnya.
Dan apa jenis data aku menyerahhakkan, nampaknya,
untuk onsubmit, yang berkesan pembolehubah dalam
itu nod dalam pokok itu?
Ia adalah satu bidang dalam struct itu.
Apakah jenis data?
>> Fungsi A, yeah.
Jadi ia ternyata bahawa PHP mempunyai ini.
Dan walaupun kita tidak memberitahu anda tentang hal itu,
C juga mempunyai fungsi petunjuk, yang keupayaan untuk lulus dan memberi fungsi
sebagai nilai-nilai pembolehubah 'diri mereka sendiri.
Dan kita tidak akan mundur kembali ke C.
Tetapi untuk sekarang, ternyata bahawa di sebelah kanan di sini,
walaupun ia kelihatan sedikit funky, cara ini, hey pelayar,
memberi saya fungsi.
Saya tidak akan peduli memberi nama yang kerana saya benar-benar
akan memberikan mari kita memanggilnya alamat fungsi ini
segera kepada onsubmit.
Dalam erti kata lain, pelayar, anda tidak perlu untuk mengetahui apa yang dipanggil fungsi ini.
Anda hanya perlu tahu di mana ia adalah dalam ingatan.
Dan supaya ia mencukupi hanya untuk mempunyai tanda sama ada
dan tidak mengganggu menamakan ini, seperti foo atau menyambut atau mana-mana perkataan lain.
Dan sekarang ini adalah hanya satu perkara yang gaya.
Saya boleh bergerak kerinting ini ke the-- talian berikut sorry--
seperti biasanya kita lakukan CS50.
Tetapi dalam JavaScript, ia sebenarnya segi gaya biasa
untuk hanya menyimpan pendakap kerinting, yang Yang pertama, pada garis pertama.
>> Tetapi selepas ini, ada apa yang menarik.
Yang kerinting terbuka hanya demarcates permulaan fungsi saya.
Majlis tersebut kini sama, kecuali saya telah
termasuk palsu pulangan dalam fungsi ini.
Kerana ia ternyata out-- dan anda hanya akan
tahu ini daripada membaca documentation-- yang
bahawa jika fungsi yang anda menetapkan untuk pengendali yang onsubmit pulangan palsu,
pelayar hanya tahu dan bersetuju tidak mengemukakan borang untuk pelayan.
Jika ia kembali benar, ia akan mengemukakan kepada pelayan atas sebab-sebab kita akan melihat
berguna dalam hanya seketika.
>> Dan kemudian selepas koma bernoktah pendakap kerinting sana hanya
bermakna saya selesai menentukan fungsi.
Anda tahu apa yang memanggil sebaik kerana anda mendengar penyerahan.
Baiklah.
Ini masih boleh dikatakan jenis hodoh.
Jadi apa lagi yang boleh kita lakukan?
>> Nah, ternyata kemudian dalam versi dua, yang merupakan last--
dan kami akan hanya renungan ini.
Pada risiko membuat ia bertambah gawat, ternyata
bahawa ada perpustakaan di dunia yang dipanggil jQuery.
Dan jQuery adalah super yang JavaScript perpustakaan popular
yang begitu popular bahawa kebanyakan sebarang JavaScript-- ia bukan
sesuatu yang luar biasa bagi orang-orang untuk mengelirukan jQuery dengan JavaScript.
Mengapa?
JavaScript sendiri mempunyai sangat cara lantung menjalankan things--
document.getElementByID, dadadadadada.
Anda akhirnya mempunyai sangat barisan panjang kod.
>> Jadi rakan-rakan yang bernama John Resid, yang benar-benar bekerja untuk permulaan yang
sehingga hari ini, keluar dengan perpustakaan ini tahun
lalu bahawa ramai orang telah menyumbang untuk dipanggil jQuery yang berubah
sintaks dengan cara yang berikut.
Dan hanya jadi anda lihat ini, kerana anda akan sentiasa
melihat ini jika melakukan projek akhir berasaskan web,
ini akan menjadi cara yang sama dengan melaksanakan fungsi yang sama dengan menggunakan
perpustakaan istimewa ini.
>> Sekarang, daripada menggoda ia selain secara keseluruhan,
mari kita lihat beberapa corak.
Sintaks ini nampaknya mempunyai berapa banyak fungsi tanpa nama
atau fungsi bernama atau fungsi lambda AKA?
Dua, bukan?
Dan anda tahu bahawa, walaupun anda tidak super selesa dengan ini,
hanya dengan fakta bahawa ia kata () fungsi dua kali.
>> Dan ternyata bahawa apa kod ini adalah doing--
dan kami akan merujuk kepada rujukan dalam talian, akhirnya, mencari bantuan dengan ini.
Ini hanya bermakna bahawa apabila dokumen itu siap,
pergi ke depan dan mendaftar fungsi berikut
sebagai pengendali yang mengemukakan bagi HTML elemen yang unik idea adalah demo.
Dan kemudian, apabila itu berlaku, memanggil kedua-dua baris kod.
Dan ini adalah, tragedi, yang lebih cara berjela-jela untuk mengatakan kembali palsu.
Dan yang telah dinyatakan ini hanya kerana anda akan melihat kod seperti dalam talian ini.
Dan ia adalah apa-apa yang gentar dengan.
Tetapi sebaliknya, perlu diingat bahawa apa yang akan menjadi biasa dalam JavaScript
adalah paradigma ini.
Dan itulah sebabnya mengapa kita menunjukkan ia buat masa ini.
Baiklah.
Jadi tanpa kediaman terlalu banyak pada sintaks itu,
adalah terdapat sebarang soalan mengenai contoh-contoh atau idea setakat ini?
Baiklah.
Jadi mari kita menggunakan ini untuk sesuatu yang berguna.
Membuat sebuah laman web yang hanya berkata hello, Fulan tidak semua yang menarik,
tidak underwhelm.
Yang ini tidak akan menjadi cantik, tetapi ia akan melakukan sesuatu yang berguna.
Biar saya kembali ke direktori saya di sini dan membuka, berkata, bentuk-0.html.
>> Jadi andaikan ini adalah mahasiswa laman pendaftaran sukan antara dinding
tanpa apa-apa CSS atau apa-apa rasa reka bentuk.
Dan saya mahu pergi ke depan dan mendaftar di sini dengan kata laluan.
Dan saya akan bersetuju dengan terma dan syarat-syarat dan klik Daftar.
Dan kini laman web itu berkata, "Anda di berdaftar! (Well, tidak benar-benar.) "
Yang seolah-olah seperti ia bekerja, tetapi biarlah saya pergi ke hadapan dan memaksa tambah nilai.
>> Dan saya katakan, tidak, anda tidak memerlukan alamat e-mel saya yang sebenar.
Atau mungkin kita hanya akan mengatakan mel dalam sana.
Kata laluan akan, seperti, 12345.
Dan kemudian, hanya kerana saya bodoh, kini ia adalah 123456789.
Dan saya tidak akan semak kotak anda.
>> Hmm.
Baiklah.
Jadi ada beberapa peluang untuk penambahbaikan di sini.
Dan anda tahu, atau akan melihat dalam pset tujuh, yang anda boleh menulis code--
dan anda akan mempunyai untuk menulis kod dalam PHP-- untuk mempertahankan
terhadap jenis-jenis pengguna kesilapan kerana pengguna dengan jelas
tidak bekerjasama.
Dan dia tidak memberikan anda semua nilai-nilai yang anda mahu atau dalam format yang
yang anda mahu mereka.
Jadi, anda akan melihat dalam pset tujuh yang kita pasti boleh mempunyai beberapa
jika keadaan yang mengatakan jika alamat e-mel
tidak username@something.edu yang, kita boleh hanya
memohon maaf dan meminta maaf kepada pengguna banyak, seperti yang anda mungkin berada di dalam pset tujuh.
Atau jika mereka telah tidak diperiksa kotak itu, ternyata dalam PHP, anda boleh mengesan itu,
juga.
Dan demi sesungguhnya, jika kata laluan tidak sama seperti dalam register.php
untuk pset tujuh, anda boleh mengesan itu.
Tetapi itu sakit di leher yang kini mereka meminta
kita untuk pergi sepanjang jalan ke pelayan.
Pengguna ini dimaklumkan mengenai kesilapan itu.
Dan sekurang-kurangnya melainkan jika anda menggunakan beberapa teknik penjaga,
kini mereka perlu klik anak panah ke belakang.
Bukankah lebih baik, seperti banyak laman web hari ini,
jika anda mempunyai lebih segera maklum balas, serta-merta?
>> Dalam erti kata lain, saya pergi kepada versi satu, yang akan menjadi tidak cantik.
Tetapi ia mempunyai ciri-ciri ini.
Malan, 12345, 123456789, tidak akan menyemak kotak, Daftar.
Kata laluan tidak sepadan.
Jadi, walaupun ini Pop-up adalah ugly-- kita boleh menggantikan ini akhirnya
dengan sesuatu seperti Bootstrap, yang anda akan lihat dalam pset tujuh
adalah library-- sangat popular yang saya lakukan mengesan bahawa kata laluan tidak sepadan.
Baiklah.
Baiklah, biar saya menetapkan bahawa sebagai pengguna.
Biar saya pergi ke hadapan dan berkata 12345, 12345.
Masih tidak menyemak perjanjian.
Anda mesti bersetuju dengan terma dan syarat.
Jadi mengapa?
>> Jika kita sudah dikemukakan bahawa ada cara yang,
dan kami telah dikehendaki anda Serangga tujuh untuk mengesan ralat
keadaan seperti ini pelayan, apa guna aku
mengganggu juga melakukan ini dalam JavaScript?
Apakah hujah dalam memihak kepada menambah apa
anda kira-kira untuk melihat sebagai some-- ada kerumitan tambahan.
>> Mungkin tidak ada terbalik.
Apa yang boleh?
PENONTON: [didengar].
DAVID MALAN: Oh, menarik.
Eksploitasi berpotensi.
Begitu yakin, jika anda tidak mengendalikan input pengguna salah yang besar,
mungkin ia semua lebih baik jika ia tidak pun mencapai pelayan anda.
Saya akan menolak kembali ke sana dan katakan, anda harus mungkin
menetapkan kedua-dua masalah tersebut.
Tetapi itu adil.
Apa lagi?
>> PENONTON: [didengar].
>> DAVID MALAN: Ya.
Kod ini, seperti yang kita katakan sebelum ini, adalah ditafsirkan pada pihak pelanggan.
Ia tidak mengganggu pelayan, yang bermakna ia tidak
kesan beban pelayan atau keupayaan.
Dan kini, bagi saya tua sedikit, ini mempunyai kesan yang bermakna
kerana saya mempunyai seorang pengguna sekarang.
>> Tetapi jika anda apa-apa laman web saiz yang baik,
terutamanya yang terbesar, seperti Facebook, lebih banyak anda boleh menyimpan orang luar
pelayan anda yang lebih baik kerana pelayan, sudah tentu,
hanya mempunyai jumlah terhad RAM, beberapa terhingga gigahertz,
beberapa terhingga perkara ia boleh lakukan per unit masa.
Jadi, jika terdapat lebih ramai orang di dunia memukul pelayan anda,
sengaja pembalakan tidak betul, sama dengan baik jika anda
boleh menyimpan beban yang luar pelayan anda.
Plus, terutama di mudah alih device-- jika anda telah pernah
log masuk ke my.harvard atau Netid Yale atau sebagainya,
ada ini kependaman dengan banyak laman web seperti itu di mana yang diperlukan,
seperti, sialan kedua atau dua kadang-kadang.
Dan kemudian, Allahku, jika anda tersilap menaip, maka anda perlu bangkit dan buat semula.
Jadi ada kependaman, terutamanya pada sambungan rangkaian perlahan.
Tetapi JavaScript, kerana ia berjalan di atas pelanggan
dan tidak perlu berulang-alik di internet yang berpotensi perlahan
sambungan, anda boleh mendapatkan maklum balas hampir serta-merta.
>> Jadi mari kita lihat ini.
Biar saya membuka borang-0 dan melihat HTML di sini.
Dan mari kita hanya melihat apa yang sedang berlaku.
Ini adalah satu bentuk yang tindakan register.php.
Saya hanya menggunakan mendapatkan begitu bahawa saya dapat melihat URL.
Tetapi untuk kata laluan, kita pasti akan mahu untuk menukar ini untuk hantar dalam realiti.
Berikut adalah medan input jenis teks.
Berikut adalah input lain bidang kata laluan jenis.
Di sini ialah, jika anda tidak pernah dilihat, input jenis kotak semak.
>> Tetapi tidak ada JavaScript di sini sekalipun.
Ini hanyalah HTML yang pergi ke register.php.
Tetapi dalam versi satu, di mana saya mula mendapatkan orang-orang pop-up,
mari kita lihat apa yang sebenarnya berlaku di sini.
Dalam versi satu, apa Saya akan see-- Saya
fikir saya boleh gerai cukup dengan kata-kata yang cukup, tetapi saya berlari keluar.
>> Dalam versi one-- ada kita pergi.
Dalam versi satu, perasan following-- dan tidak melaksanakan yang terbaik,
tetapi ia pertama saya.
Perhatikan bahawa di bawah bentuk, saya mempunyai tag skrip.
Dan tag skrip bermaksud, hey, pelayar, di sini
datang beberapa kod di, biasanya, JavaScript.
Dan kini, melihat apa yang saya lakukan.
Pada garis ini-- saya boleh hampir tidak membaca kitab itu beratur 32, ia berkata,
var supaya form-- memberi saya pembolehubah yang dipanggil bentuk.
Dan kemudian mendapatkan document.getElementId "pendaftaran."
Apakah ini?
Baiklah, biar saya putar balik di sini.
Dan notis, ah, saya memberikan bentuk elemen idea sewenang-wenangnya tetapi deskriptif
pendaftaran.
Jadi ini memberikan saya pembolehubah yang membolehkan saya untuk merebut nod itu,
yang segi empat tepat di pokok yang dipanggil bentuk.
cara form.onsubmit, hey pelayar, mendaftar pendengar acara
dalam borang ini.
Dalam erti kata lain, apabila borang ini adalah dikemukakan, melaksanakan kod berikut.
Ia tidak memerlukan nama kerana mengapa anda perlu tahu nama?
Anda hanya perlu tahu apa yang perlu melaksanakan, ergo
ia adalah satu fungsi tanpa nama atau lambda.
Dan fungsi yang semua ayat-ayat ini di sini.
Oleh sebab itu, untuk menjadi jujur, walaupun anda mungkin belum pernah ditulis JavaScript
sebelum ini, ia hanya C dan PHP logik.
Jadi, jika form.email.value == "" - jadi jika bidang e-mel yang kosong,
menjerit pada pengguna dengan "Anda mesti Alamat e-mel anda. "
Lain jika form.password.value adalah menjerit kosong pada pengguna,
"Anda perlu menyediakan kata laluan anda."
>> Lebih menarik secara logik, jika form.password.value tidak
form.confirmation.value-- sama di mana yang pengesahan datang?
Biar saya putar balik.
Well, saya dipanggil input ini bidang di sini kata laluan.
Dan saya memanggil salah ini di sini pengesahan.
Saya boleh memanggilnya kata dua atau apa-apa lagi.
Saya hanya logik memeriksa bahawa kedua-dua adalah sama.
Else-- ternyata ini adalah Encik Boole again-- nilai Boolean, kotak semak.
Jadi, jika saya katakan, seru point-- jika tidak form.agreement.checked,
menjerit pada pengguna juga.
>> Jadi sintaks ini, anda akan lihat adalah perkara biasa dalam JavaScript,
di mana anda perlu notasi putus-putus ini.
Anda bermula dengan objek di sini.
Anda menyelam lebih dalam untuk ke harta seperti kata laluan.
Dan kemudian anda dapat di nilai sebenar.
Dan sekali lagi, di sini adalah input.
Berikut adalah kata nama.
Dan nilai adalah apa sahaja manusia sebenarnya telah ditaip.
>> Jadi, dalam semua ini kes, saya pulang palsu.
Tetapi jika tidak, saya kembali benar.
Dan sekarang kita melihat penggunaan menarik apabila
anda akan kembali palsu kepada menghentikan apa pengguna yang melakukan
dan membuat dia atau dia memilih lagi atau menaip lagi.
Jika tidak, kita kembali benar.
>> Dan biarlah saya memperkenalkan satu varian lain ini hanya
benih sedikit pemahaman daripadanya.
Nah, dalam versi 2 ini, bentuk-2-- Saya akan melakukannya dengan gelombang tangan.
Ini, bagi mereka yang ingin tahu, versi jQuery,
Persekitaran yang mungkin mahu melibatkan diri dalam perpustakaan tersebut.
Tetapi mari kita start-- dan apa-apa soalan?
Biar saya fikir seketika kerana yang pantas dan banyak.
>> Tetapi perkara yang baik di sini ialah semua kod ini cukup banyak yang sama.
The barangan baru adalah apa yang dom ini?
Apakah segi empat tepat ini?
Apakah nod ini?
Apakah fungsi tanpa nama?
Apakah yang dimaksudkan dengan pengendali peristiwa?
Tetapi bersyukur kerana, kebanyakan yang hanya bulatan penuh daripada, katakan, minggu sifar.
Baiklah.
Jadi sesuatu yang sedikit lebih menarik?
Well, pertama sekali, saya pergi hadapan dan membuka Peta Google.
Dan anda akan melihat bahawa untuk masa, pada kedua perpecahan,
melihat apa yang berlaku apabila Saya klik cukup pantas.
Dan hal ini di Harvard begitu cepat bahawa anda tidak benar-benar menyedarinya.
Tetapi apa yang anda jenis jenis melihat jika saya klik dan seret dengan pantas?
Orang-orang menonton dalam talian, jika anda memperlahankan ini kepada kelajuan 0.5x,
anda boleh melihat ini lebih baik.
>> Apa yang berlaku hanya sebelum saya klik dan mengheret?
Biar saya cuba sini-- biar saya sesuatu yang lain, seperti 90210.
Mari kita pergi jauh.
Itu adalah benar-benar cepat juga.
Bagaimana pula dengan Disney World?
Di sana kami pergi.
OKAY.
Apa yang anda lihat untuk kedua perpecahan?
Hanya, seperti, kuasa dua, bukan?
Pemegang tempat untuk jubin?
>> Nah, apa yang berlaku di sini?
Peta Google adalah contoh yang bagus teknologi ini yang dinamakan AJAX.
Dan di sinilah kita akan mula menggunakan JavaScript dalam terutamanya
cara memikat.
Kembali pada hari, terdapat Laman web ini dipanggil MapQuest.
Dan dapat pula aku mengambil screenshot ini dari tahun 1990-an,
di mana jika anda mahu kelihatan di sini pada peta,
anda benar-benar akan klik anak panah sehingga di bahagian atas yang menunjukkan anda
persegi yang berlainan peta.
Jika anda mahu untuk bergerak ke kiri, anda klik anak panah yang menunjukkan anda
persegi yang berlainan peta.
Dan beberapa laman web yang masih lakukan hari ini.
Tetapi MapQuest telah mendapat yang lebih baik, seperti Peta Google.
>> Sebaliknya, apa yang lebih baik ini hari adalah laman web yang menggunakan AJAX.
AJAX-- atau dikenali sebagai Asynchronous JavaScript dan XML,
yang hanya satu cara mewah untuk mengatakan teknologi atau teknik yang
membolehkan pelayar menggunakan JavaScript untuk membuat permintaan HTTP tambahan
selepas halaman telah dimuatkan.
Jadi apa maknanya?
Nah, ia akan berbuat baik menjengkelkan dalam Gmail
jika setiap kali anda mahu untuk memeriksa mel anda,
anda telah benar-benar memukul Kawalan-R atau Perintah-R atau klik butang Muat semula yang
dan halaman darn keseluruhan akan menambah nilai.
Betul?
Ia akan berkelip putih mungkin untuk kali kedua.
Anda akan melihat bar kemajuan bodoh.
Dan hanya untuk melihat jika anda mempunyai baru mel, laman web keseluruhan dan URL
anda berada di perlu untuk menambah nilai.
>> Tetapi itu bukan apa yang berlaku dalam Gmail.
Betul?
Apabila anda mendapat e-mel baru dalam Gmail, apa yang berlaku pada skrin?
Ia hanya muncul, bukan?
Ia hanya ajaib muncul sebagai baris baru dalam jadual.
Yang benar-benar melibatkan jumlah yang layak kerumitan.
Malah, jika anda berfikir tentang pokok ini, yang walaupun adalah satu yang mudah di sini,
Gmail-- dan saya perlu melihat pada kod menjadi sure--
mungkin mempunyai jadual HTML atau mungkin senarai tidak tertib bahawa ia menyebabkan
setiap peti masuk e-mel anda sebagai.
>> Dan jadi jika anda bayangkan ini terdapat adalah pokok dalam ingatan apabila anda berada
menggunakan Gmail yang kelihatan jenis jenis seperti ini, apabila Google menyedari, aduh,
anda mempunyai e-mel baru, ia tidak mahu untuk membina semula keseluruhan pokok.
Sebaliknya, ia mahu mencari nod dalam pokok yang mewakili peti masuk anda
dan hanya memasukkan nod baru.
>> Jadi hampir sama dengan Serangga lima, di mana anda terpaksa memasukkan nod ke dalam jadual hash,
begitu juga tidak Google, melalui Kod JavaScript yang ia telah menulis,
traverse pokok ini, memikirkan di mana adalah bahawa peti masuk sebahagian daripada tingkap,
dan kemudian memasukkan baris baru.
Dan baris baru hanya bermakna satu atau lebih nod baru di pokok.
>> Dan sebagainya AJAX adalah teknik ini yang membolehkan perkara tersebut.
Sebaik sahaja anda telah lawati URL, bagaimanapun gila lama ia adalah,
dan apabila halaman yang mempunyai telah dimuatkan, anda masih boleh
merebut lebih banyak data daripada internet-- sama ada
e-mel atau jubin map-- yang merebut belakang tabir
dan kemudian masukkannya ke dalam halaman supaya manusia tidak benar-benar
perlu menunggu untuk itu.
>> Facebook Messenger berfungsi dengan cara yang sama.
Apa-apa bilangan websites-- lain oh, sebenarnya, walaupun ini.
Maksud saya, ini adalah, terus-terang, jenis yang menjengkelkan menampilkan hari ini.
Jika saya mula mencari cats-- ini adalah jenis pengalaman pengguna yang dahsyat.
Ia hanya mula mencari untuk saya.
Juga apa yang ia buat?
URL tidak benar-benar berubah sejak saya mula menaip.
Tetapi apa yang berlaku di seluruh wire-- OK, hmm menarik.
Apa yang berlaku di seluruh wayar di sini hanya mendapat aneh.
>> OKAY.
Jadi biarlah saya pergi ke hadapan dan memeriksa elemen dan pergi ke tab Rangkaian
dan cuba untuk membuat ini teknikal dan kurang tentang kucing.
Kerana saya menaip, secara literal, kucing dan- apa yang berlaku
per-- Saya tidak akan klik itu.
Baiklah.
Jadi turun di sini, apa yang berlaku setiap masa saya menaip watak, nampaknya?
Seperti, tahap rendah?
Apa yang berlaku dengan setiap orang-orang Watak saya menaip di papan kekunci saya?
Ya?
PENONTON: [didengar].
>> DAVID MALAN: Tepat sekali.
Setiap satu daripada watak-watak adalah pergi ke Google, satu demi satu.
Mereka membina rentetan pada pelayan mereka yang mewakili
semua yang saya telah ditaip setakat ini.
Dan setiap kali saya menaip watak lain, mereka
menggunakan sos rahsia mereka daripada mencari algoritma dan memikirkan,
ia tidak bermakna halaman kucing ini atau ini halaman kucing atau sebagainya?
Jadi dalam erti kata lain, ia menyediakan saya dengan pengalaman yang lebih baik dalam bahawa saya tidak melakukan lebih
perlu melengkapkan pemikiran saya.
Dan sesungguhnya, ia adalah berguna perkara, auto-lengkap secara umum.
Jika algoritma mereka cukup baik dan jika carian saya cukup jelas,
Saya tidak perlu menaip perkataan penuh.
Mereka akan beritahu saya apa yang ia adalah saya sebenarnya mencari.
Jadi apa yang Google panggilan segera carian hanya menggunakan AJAX,
menggunakan kod yang membolehkan mereka untuk meminta kandungan tambahan melalui pelayar web
di belakang tabir menggunakan ini bahasa baru, JavaScript.
Oleh itu, kita mempunyai beberapa minit.
Dan biarlah saya memanggil rakan saya Colton naik ke atas pentas,
kerana ia seolah-olah terutamanya menyeronokkan masa lalu
untuk memperkenalkan teknologi sebahagian dari anda
telah menunjukkan minat yang dalam untuk projek akhir.
Kami fikir ia akan menjadi seronok untuk membawa sehingga sukarelawan, walaupun, hari ini
menunjukkan tambahan kepada ini yang membolehkan atasmu, ya,
Saya melihat tangan ini pertama.
Naiklah.
Sangat baik dilakukan.
Kerja yang baik.
Saya akan projek ini di skrin dalam hanya seketika.
Apa nama anda untuk semua orang?
>> EFA: Saya Efa.
>> DAVID MALAN: Etha?
>> EFA: Efa.
>> DAVID MALAN: Efa?
>> EFA: Ya.
>> DAVID MALAN: Nice melihat anda.
Baiklah.
Biar saya mendapatkan ini bersedia.
Datang pada lebih kepada pertengahan dengan Colton sini.
Apa Colton mempunyai di tangannya hari ini adalah satu kawalan jauh.
Jadi, daripada hanya berdiri di sana dalam dunia tiga dimensi melihat-
sebagai Colton lakukan, kini Efa boleh sebenarnya berjalan dengan pergi ke atas,
bawah, kiri dan kanan seperti Nintendo atau Xbox pengawal.
EFA: Saya akan jatuh pentas.
DAVID MALAN: Aku kehendaki berdiri secara kasar di sini.
Tetapi itu adalah risiko.
OKAY.
Jadi teruskan dan meletakkan mereka pada.
Biar saya pergi ke hadapan dan beralih kepada skrin di sini.
Biar saya meredupkan.
Dan Colton, biarlah saya datang berdiri di sebelah anda.
>> Adakah anda ingin jelaskan di sini dengan mikrofon apa yang kita lakukan?
Di sini anda pergi.
>> COLTON: Pasti.
Jadi sekarang kita memuatkan Oculus,
Saya rasa operating-- tidak beroperasi sistem, tetapi program utama, di mana
anda boleh mengakses semua permainan dan aplikasi yang berada di dalam perpustakaan anda.
Jadi sekarang, ada yang berkata ketuk pad sentuh untuk bermula.
Touchpad akan berada di kanan alat dengar.
Jadi teruskan dan tap--
EFA: Oh, manusia.
DAVID MALAN: Ya, ada anda pergi.
Kualiti Efa adalah melihat adalah kualiti yang lebih tinggi.
Ini hanyalah Wi-Fi di sini.
COLTON: Jadi apa yang anda akan mahu lakukan
adalah melihat ke arah bahagian atas kanan skrin.
Yep, bahawa permainan di sebelah kanan paling atas.
Dan kemudian apabila anda memilih , ketik pad sentuh lagi.
Saya rasa Dreadhalls itu.
Dan kemudian di sini adalah a-- sini, mari saya memegang cermin mata anda untuk anda.
>> Jadi saya hanya memberinya pengawal.
Oleh sebab itu dia boleh mengawal permainan.
Dia boleh bergerak dan barangan seperti itu.
Jadi teruskan dan memandang ke atas.
Anda akan dapat melihat Permainan Baru.
Jadi teruskan dan anda boleh berbuat demikian.
Sekarang, anda akan dapat untuk mengawal diri anda dengan pengawal,
juga, dengan seberapa segera yang permainan memuatkan di sini.
Ini mungkin menjadi sedikit menakutkan.
>> EFA: Sekarang anda beritahu saya.
OKAY.
>> COLTON: Baiklah.
Jadi mengesahkan bahawa anda boleh bergerak.
OKAY.
Anda boleh bergerak di sekitar.
Perfect.
Jadi, jika anda melihat ke bawah, anda perlu peta.
Peta menunjukkan kepada anda di mana anda berada.
Anda boleh melihat sekitar bilik.
Anda benar-benar boleh pulih.
Ya, betul-betul.
Pusing.
>> Jadi melihat ke kiri anda.
Saya fikir ada sesuatu yang anda boleh mengambil di atas tong di dalam bilik.
>> EFA: Bagaimana untuk saya mendapatkan map keluar dari jalan?
COLTON: Lihatlah ke atas.
Lihat sahaja naik.
Baiklah.
Itupun dia.
Sekarang pergi ke depan dan hanya pulih.
Oleh itu, mencari lebih jauh ke kiri anda.
Terus bergerak meninggalkan.
Teruskan mencari tinggal.
Teruskan.
Yeah.
>> EFA: Oh, begitu.
>> COLTON: Ya.
Berjalan ke arah itu dengan pengawal.
Itupun dia.
Sekarang ada yang berkata mengambilnya.
Itupun dia.
Kutip.
Baiklah.
Sekarang, mari kita keluar dari bilik ini.
Teruskan dan berjalan kaki ke pintu itu.
Jadi, anda akan hold-- ia berkata tahan butang untuk memaksanya terbuka.
Jadi teruskan dan tahan butang.
Yep, memaksanya dibuka.
Baiklah.
Kerja yang baik.
Sekarang kami sedang berjalan keluar dari bilik.
Jadi saya akan meninggalkan yang lain sehingga kepada anda dan melihat apa yang anda ketahui.
EFA: Saya tidak akan di dalam bilik gelap.
Oh, tunggu.
Sekarang saya perlu pergi ke dewan gelap?
OK, saya akan kembali [didengar].
COLTON: Baiklah.
Beberapa barangan yang lebih meningkat.
Nampaknya beberapa syiling.
Itulah satu kawasan yang paling kunci.
Jadi, jika anda mencari dikunci pintu, anda boleh menggunakan itu.
Adakah anda takut?
>> EFA: Belum lagi.
COLTON: OK.
>> Pretend-- yeah.
Hanya berpura-pura anda sebenarnya berdiri di sana.
Dan jika kamu berpaling around-- anda perlu membiasakan diri dengannya.
Tetapi ia masuk akal.
DAVID MALAN: Dan ketika Efa terus bermain, kerana kita boleh melakukan ini sepanjang hari,
kita semua tip-kaki di sini.
Tetapi kita mempunyai dua pasang lain, jika anda ingin untuk datang dan bermain.
Jika tidak, kita akan dapat melihat anda yang akan datang pada hari Rabu.
Terima kasih kepada sukarelawan kita hari ini.
[Tepuk tangan]
>> [MUZIK - "Seinfeld TEMA"]
SPEAKER 1: Baik, saya meletakkan PL baru dipasang pada.
Saya hanya mengubah OLPF--
>> SPEAKER 2: Jadi apa sebenarnya yang anda lakukan?
>> SPEAKER 1: Sebenarnya, setiap seorang daripada these-- di sini, saya akan menunjukkan kepada anda satu ini di sini.
Anda boleh melihatnya di sini.
>> SPEAKER 3: Saya rasa saya baik dengan ini.
Anda mahu lagi?
>> SPEAKER 4: Tidak, saya baik. [Didengar].
>> SPEAKER 3: Tiada [didengar].
Mempunyai beberapa.
SPEAKER 1: warna yang berbeza.
SPEAKER 2: OK.
SPEAKER 1: Jadi akhirnya apa yang ia tidak adalah ia menyesuaikan warna daripada-