>> [MUSIC PLAYING]
>> DAVID Malan: Ini adalah CS 50, dan ini adalah awal minggu sembilan.
Dan apa yang kami pikir kami akan lakukan hari ini adalah tidak hanya menutup bab tentang minggu lalu
materi mana kami fokus pada server pemrograman web side dengan PHP dan SQL,
beberapa hal basis data.
Kita akan berbicara tentang sedikit keamanan saat dan kemudian
transisi ke pemrograman sisi klien bahasa yang dikenal sebagai JavaScript.
Tapi pertama-tama, beberapa penebusan.
>> Anda mungkin ingat bahwa pada Rabu, saya berangkat
untuk menulis sebuah situs web yang mengambil input pengguna
oleh HTML bentuk yang kemudian disimpan bahwa nama input pengguna, ponsel
angka, dan ponsel operator dalam database.
Dan kemudian aku perintah sedikit naskah baris yang ditulis dalam PHP
yang seharusnya iterate atas baris dalam database
dan mengirimkan pesan teks.
Meskipun beberapa, beberapa upaya, kita tidak mendapatkan kerja bahwa pada akhirnya.
>> Jadi aku menghabiskan seluruh minggu ini bekerja pada kode yang untuk mendapatkan kita melewati titik
tempat kami tinggalkan, dimana semua Aku punya pada akhir Rabu
adalah pesan teks ini dari Margo saat aku berjuang,
diikuti dengan pesan teks dari yang lain teman sekelas, Anda punya David ini.
Diikuti oleh satu ini, luar biasa menggembirakan.
Terus terjadi, sangat menggembirakan.
Aku hampir mendapatkannya sampai then-- dan itulah catatan kita berakhir pada hari Rabu.
Dan kemudian benar-benar mungkin favorit saya, sesaat kemudian, ini datang.
Sial Hidup Stream.
>> Jadi hari ini, kami memperbaiki ini dengan cepat melihat apa yang telah saya lakukan sejak.
Jadi semua kode ini tersedia online dari minggu lalu, minggu delapan,
kode sumber.
Dan Anda akan melihat bahwa saya pergi melalui, dan aku benar-benar dibersihkan hal-hal sedikit.
Saya memperkenalkan pasangan lain fitur database SQL.
Misalnya, daripada hanya membuat pembawa var arang
karena saya pikir saya lakukan dengan cepat pekan lalu.
Saya bukannya didefinisikan sebagai apa yang disebut enum.
>> Dan beberapa dari Anda mungkin telah melihat ini seperti kami menjelajahi C. Enum sebenarnya
fitur C di mana Anda dapat menghitung sejumlah besar konstanta
dan menetapkan mereka nilai otomatis, seperti satu, dua, tiga, empat
tanpa harus nomor kode keras.
Jadi SQL mendukung sama, dimana jika Anda memiliki bidang database yang Anda hanya
ingin mengambil salah satu terbatas nilai-nilai, Anda benar-benar dapat menentukan
seperti yang saya lakukan di sana selama empat populer US operator ponsel.
>> Jadi saya melakukan itu.
Dan saya membuat beberapa perubahan sebagai baik, yang paling penting yang
adalah untuk mendapatkan email bekerja karena ingat, bahwa program ini bergantung pada yang
umumnya disebut email ke SMS gateway, yang hanya
cara mewah untuk mengatakan bahwa Verizon, dan AT & T, dan orang-orang lainnya mendukung server,
dimana jika menerima email, itu mengkonversi ke SMS
dan mengirimkan teks pesan ke ponsel seseorang.
Jadi jika saya melakukan ini dengan benar, di sini adalah bentuk baru dan ditingkatkan
yang akan berbicara dengan baru dan lebih baik kode, yang
Anda dapat bermain dengan online.
Dan mudah-mudahan akan membuat saya bip telepon hanya dalam beberapa saat.
>> Jadi pertama, saya akan mengetikkan nama saya.
Kedua, aku tidak akan untuk melakukan hal ini saat ini.
Aku akan melakukan Inspect Element.
Dan ini hanyalah sebuah hal kecil jadi saya tidak melakukan
membuat jam pasca produksi bekerja seperti yang saya lakukan terakhir kali.
Ada sekarang adalah nomor telepon saya.
>> Aku akan memilih Verizon.
Dan di sini, mari kita menghidupkan mikrofon ini di sini, dan tujuan ini di ponsel saya di sini.
Aku akan klik Register, yang seharusnya mudah-mudahan
memasukkannya ke dalam database.
Sekarang aku akan pergi ke program baris perintah, yang
ingat disebut dot slash teks, dan lintas jari-jari Anda.
Di sini kita pergi.
>> [Bantingan PHONE]
>> [Tepuk Tangan]
DAVID Malan: Jadi lebih menyenangkan daripada this-- itu menyenangkan, tentu saja, jika saya mendapatkan ke dalamnya.
Tapi itu lebih menyenangkan, saya pikir, jika kita menciptakan salah satu momen film
mana seperti sesuatu yang benar-benar buruk telah terjadi di dunia,
dan seperti semua NSA rakyat ponsel mulai berbunyi
dengan pesan teks mengingatkan mereka untuk fakta ini.
Jadi saya pikir kami akan mencoba untuk menciptakan yang sama di sini,
dimana tidak menggunakan database, Aku bukan di muka
menulis sebuah program yang terlihat seperti ini.
>> Ini adalah index.php-- dan saya meletakkan kode ini secara online
seperti baik yang tampaknya hanya membuat form.php,
menggunakan paradigma gaya MVC yang kita berbicara tentang secara lebih rinci dalam masalah set
tujuh.
Bentuk yang cukup sederhana.
Ini akan tunduk kepada file bernama here.php melalui pos.
Dan itu tampaknya akan bertanya untuk nama, dan nomor telepon,
dan kemudian melalui apa yang disebut- Pilih menu, itu
akan memberikan setidaknya empat US operator ponsel populer,
dan kemudian memungkinkan Anda untuk secara efektif mengambil kehadiran dengan mengklik di sini.
>> Dan di sini, sementara itu, akan meminjam beberapa kode dari terakhir kali.
Dan jika Anda hanya skim ini, Anda akan melihat bahwa ada
sejumlah besar pengecekan error.
Tapi keindahan di akhir adalah bahwa kita tidak menulis ke database saat ini.
Kami menjaganya agar tetap sederhana dan hanya mengirimkan mudah-mudahan
pesan teks melalui fungsi I menulis selama beberapa hari panggilan terakhir
Teks, yang dalam Fungsi. php, yang lagi tersedia secara online.
>> Jadi jika Anda ingin mengambil bagian dalam hal ini.
Kami tidak akan menyimpan apa-apa.
Pergi ke URL ini di sini secara real time.
Jangan mengirimkannya dulu, tapi mari kita melihat apakah kita dapat memiliki salah satu dari film ini
saat di mana ponsel semua orang mulai berbunyi, mudah-mudahan saja
sekali tahun ini tidak seperti tahun 2011 di mana hal ini pergi mengerikan kacau.
Dan setelah Anda pergi ke alamat tersebut, Anda akan melihat bentuk yang super sederhana
bahwa jika Anda memiliki nama, ponsel nomor, dan operator ponsel yang
cocok daftar sana, pergi depan dan mengisi formulir.
Tapi jangan kemudian ajukan dulu.
>> Bentuknya akan terlihat seperti ini.
Pergi ke depan dan ketik nama, nomor telepon.
Oop, seseorang akan di depan kurva.
Tidak apa-apa.
OK, semua orang mengisi formulir.
Ini harus bekerja pada telepon, juga, jika Anda ingin.
Baiklah, pada tanda Anda, mendapatkan set, pergi.
Hit sini.
Apa?
Tidak.
Aku bersumpah demi Tuhan, saya diuji ini beberapa kali hari ini.
Anda mendapatkannya?
>> [Interposing SUARA]
>> DAVID Malan: OK, kesalahan pengguna mungkin.
Itu dua.
Ini bekerja untuk dua dari beberapa ratus, tiga, empat.
OK, itu bagus.
Empat dari lima untuk Kebenaran bagaimana.
>> Jadi apa yang baru saja terjadi?
Jadi mungkin, tanpa melihat Anda layar, mengapa mungkin itu telah errored?
Ini mungkin bahwa kita hanya mencoba untuk membuat terlalu banyak koneksi
ke server mail Harvard semua pada sekali dari alamat IP yang sama.
Aku hanya menebak karena saya tidak memiliki kemewahan pengujian
kode ini dengan beberapa 300 orang di muka
tapi untuk saat ini menyadari bahwa bahwa setidaknya harus
mendapatkan pekerjaan yang dilakukan saat ini.
>> Baiklah, jadi mengapa ini semua lebih erat dengan apa yang terjadi?
Yah pertama, cepat beberapa pengumuman.
Jadi satu, jika Anda ingin bergabung Chang, dan Nick, dan lain-lain saat makan siang hari Jumat ini,
melakukan RSVP pada URL biasa ada.
Jika Anda berpikir untuk berkonsentrasi di atau melakukan sekunder di CS,
apakah Anda seorang mahasiswa, atau mahasiswa, atau bahkan junior atau senior di titik ini
dan masih bisa menekan dalam kursus, menyadari bahwa sekolah teknik
adalah mengumpulkan secara gratis Ben dan Jerry es krim dan saran
tak lama setelah kelas Rabu ini di 04:00 di gedung CS
di Maxwell Dworkin.
Jika ini terlalu cepat di layar, hanya pergi
untuk cs50.harvard.edu untuk Link ke acara Facebook
di mana Anda dapat melihat rincian lebih lanjut.
>> Sementara itu, saya pikir saya akan memperbaiki satu hal lain yang saya melakukan kesalahan pada hari Rabu.
Ternyata bahwa Markus ID di Facebook tidak tiga.
Itu empat.
Ternyata dia memiliki lebih banyak tes rekening daripada aku ingat.
Tapi apa ini merasa seperti kesempatan lakukan adalah untuk menarik sebuah URL seperti ini.
>> Jadi ternyata bahwa Facebook memiliki API, Application Programming Interface,
yang merupakan mekanisme dimana Anda dapat meminta data pemrograman
di Facebook dan mendapatkan kembali mesin informasi yang dapat dibaca, tidak pada halaman web
tapi hanya teks mentah, sesuatu disebut JavaScript Object Notation.
Dan pada kenyataannya, jika saya mengunjungi ini URL, dan zoom in, secara default,
ini adalah Markus publik informasi yang dapat diakses.
>> Dan detail yang menarik di sini adalah hanya bahwa ID nya
memang, nomor empat, yang saya menyadari begitu aku melakukan ini.
Anda dapat melakukan ini sendiri jika Anda tahu nama pengguna Facebook Anda jika Anda memiliki satu.
Ketik saja di bagian atas sana.
Dan semua ini adalah pribadi.
Aku hanya melakukan hal ini bahkan dalam mode penyamaran.
Jadi aku bahkan tidak login.
Dan kau melihat bahwa saya rupanya pengguna nomor 6454
di Facebook, yang tidak terlalu buruk hari ini.
Jadi bagaimanapun, Anda juga akan melihat informasi tambahan di sana.
>> Dan aspek yang berguna itu adalah bahwa Anda
bisa menulis perangkat lunak Anda sendiri yang entah bagaimana mengintegrasikan data seperti ini
ke dalam aplikasi Anda sendiri.
Anda dapat memberdayakan pengguna untuk login ke website Anda,
tidak menggunakan nama pengguna kustom mereka sendiri dan sandi tapi mungkin login Facebook mereka
dan mendapatkan informasi bahkan tentang teman-teman mereka,
jika mereka menyetujui seperti, atau serupa.
Jadi perhatikan CS50 itu juga, memiliki beberapa API sendiri,
satu untuk data katalog saja, beberapa untuk menu pelukan di makan
ruang, semua bangunan dan lokasi
di kampus kita memiliki API untuk juga bahwa Anda dapat query sama dan mendapatkan
data tekstual kembali yang Anda dapat mengintegrasikan menjadi PHP, atau JavaScript, atau bahkan,
meskipun kurang umum, sebuah Tugas akhir C berbasis.
>> Memang ke depan untuk final proyek adalah beberapa tonggak.
Anda mendapat email dari kami hari lain.
Sadarilah bahwa proposal adalah karena ini hari Senin mendatang.
Ini tidak selalu mengikat, tetapi Anda perlu untuk menerima rekan-rekan mengajar Anda
persetujuan sebelum membuat perubahan setelahnya.
Dan kemudian ke depan adalah jumlah tonggak lain.
>> Jadi untuk menggoda Anda, juga, dengan beberapa kemungkinan,
kami memiliki sekelompok ini lampu hue.
Dan beberapa dari kalian sekarang memiliki beberapa ini di kamar asrama Anda juga.
Dan mereka juga memiliki API.
Jadi ingat mereka umbi minggu biner lalu bahwa Dan Bradley dan Ansel
Duff diciptakan untuk kita.
Mereka menggunakan antarmuka perangkat lunak untuk bola lampu ini, yang pada saat ini
dicolokkan ke listrik dan kemudian melalui wireless
terhubung ke hal kecil disebut Jembatan di sini,
seperti milik router kecil ke perangkat tertentu.
>> Tapi ternyata jika saya tahu bagaimana mengirim pesan HTTP, seperti yang kita semua lakukan sekarang,
Saya dapat mengirimkan pesan seperti ini untuk bola lampu ini untuk mengaktifkan atau mematikan
atau melakukan sejumlah operasi lain di atasnya.
Perhatikan bahwa itu tidak mendapatkan, itu tidak posting.
Ada satu lagi yang disebut put.
Sebenarnya ada beberapa kata kerja seperti lainnya.
Tapi melihat ada jalan di sana, slash API, slash pengembang baru,
slash cahaya, slash satu, slash negara.
>> Itu tampaknya hanya jalan yang perusahaan, Philips,
memutuskan Anda harus memukul dengan permintaan HTTP
jika Anda ingin mengubah negara dari bola menggunakan HTTP 1.1.
Kemudian perhatikan baris kosong.
Dan kemudian terakhir apa yang tampak seperti jenis array dari beberapa macam,
ini lagi akan dipanggil JavaScript Object Notation, atau Jason.
Dan apa yang Anda lihat di sini adalah bahwa ada tiga pasangan nilai kunci.
>> Salah satu kuncinya adalah meminta.
Dan nilainya rupanya akan menjadi kenyataan.
Kecerahan adalah 128, yang adalah semacam int.
Dan kemudian waktu transisi adalah nol, yang tampaknya
berapa lama itu akan ambil untuk menghidupkan hal ini pada.
>> Jadi sekarang bola lampu ini tidak aktif.
Tapi kalau aku melakukan persis this-- membiarkan saya pergi ke contekan kecil
bahwa Dan didirikan di advance-- dan aku akan
untuk terus maju dan menyalin perintah berikut.
Curl, karena beberapa dari Anda mungkin diperoleh pada CS50
Diskusikan adalah utilitas seperti Telnet seperti Anda dapat mensimulasikan permintaan HTTP,
khusus menempatkan.
Aku dapat mengirim data ini, khusus apa kita hanya
melihat beberapa saat yang lalu khusus ke URL ini di sini.
Dan kemudian Curl akan menangani semua header yang diperlukan
dan parsing dari sana.
>> Jadi semua saya harus lakukan adalah menyalin ini ke jendela terminal dan kemudian tekan Enter.
Dan bola lampu akan menyala.
Dan ini semua akan melalui komputer saya secara nirkabel
entah bagaimana sampai ke jembatan, yang kemudian berbicara dengan bola lampu ini.
Saya dapat melakukan sesuatu yang lain.
Aku bisa membuat hal ini pergi merah misalnya.
Saya bisa misalnya membuat Hal ini go green.
Aku bisa membuatnya pergi biru.
>> Dan melihat di masing-masing contoh, semua yang aku berubah
adalah apa yang disebut nilai hue ke benar-benar memberikan beberapa warna.
Jadi biarkan aku sisipkan satu ini juga.
Sekarang biru.
>> Dan Anda dapat melakukan bahkan lebih menarik hal where-- mari kita pergi ke green.
Dan aku bisa melakukan ini Tentu saja dengan kode sendiri.
Tetapi bahkan API sendiri mendukung operasi yang funky
seperti ini, yang sekarang akan repot-repot kami selama 30 detik berikutnya.
>> Jadi itulah salah satu rasa dari apa yang Anda mungkin lakukan dengan API, yang satu ini melibatkan
bola lampu.
Perhatikan bahwa CS50 memiliki pasangan pasang Google Glass jika Anda lebih
ingin mengatasi sesuatu bersama baris tersebut, Arduino Unos, yang
adalah komputer kecil kecil, dasarnya, pada papan sirkuit kecil
Anda dapat menghubungkan kabel dan hal-hal lain
untuk dan benar-benar kontrol lingkungan dunia nyata Anda.
Dan kemudian ada pasangan mainan baru yang kita miliki.
Yang satu ini benar-benar hanya tiba hari melalui surat, seorang Myo Armband.
Dan saya pikir itu adalah cara untuk membuat Anda bersemangat tentang proyek
yang mungkin Anda gunakan dengan perangkat ini akan
adalah untuk memainkan klip pendek ini yang mereka gunakan untuk menggoda orang-orang
bahwa kita sekarang hidup di masa depan.
>> [MUSIC PLAYING]
>> DAVID Malan: Jadi hanya dalam beberapa minggu, Anda juga dapat bahwa dingin di pameran CS50.
Perangkat lain yang kita memiliki banyak bahwa kita
senang meminjamkan untuk proyek-proyek disebut motion controller.
Ini adalah perangkat USB kecil Anda terhubung ke komputer yang
memungkinkan Anda untuk berinteraksi dengan laptop Anda, Mac atau PC,
seolah-olah Anda memiliki seperti Xbox Kinect dan benar-benar membuat gerakan fisik banyak
seperti kita lihat dalam hal ini visi masa depan.
>> [MUSIC PLAYING]
>> DAVID Malan: Jadi bahkan jika Anda memiliki tidak tahu bagaimana sesuatu seperti itu
mungkin bisa diciptakan atau bekerja pada tingkat perangkat keras, tidak peduli.
Bahkan setelah hanya beberapa bulan CS50, dan pemahaman tentang pemrograman
lebih umum, dan pemrograman web lainnya Baru-baru ini, dan kemudian juga API, dan HTTP,
Anda akan memiliki akses melalui API perangkat lunak jika Anda
ingin meminjam salah satu dari ini perangkat untuk benar-benar berbicara dengan itu
dan tidak perlu khawatir tentang pelaksanaan yang mendasari
Rincian, yang benar-benar konsisten dengan gagasan ini layering
abstraksi yang kita sudah dilihat sepanjang semester.
>> Begitu juga selama akhir pekan, melihat beberapa potongan berita.
Pergi dulu, pergi ke seminar jika Anda ingin belajar sesuatu
lebih pada sejumlah topik.
Melihat URL di sana.
Dan yang satu ini dikirim ke saya oleh Chang, siapa yang kamu kenal,
siapa yang mencetak tentara kita gajah.
Dan itu judul sebagai berikut.
Aku takut TV baru saya.
Mengapa aku takut untuk mengubah ini hal dan Anda akan terlalu.
Jadi kita sekarang di titik dalam semester,
juga, di mana bahkan jika Anda memiliki sedikit pun dari pemahaman
bagaimana web bekerja, dan HTTP, dan keamanan, hal-hal seperti ini
harus mulai untuk menangkap mata Anda.
Tapi juga, Anda akan mengerti apakah hal-hal ini atau tidak
ancaman aktual.
>> Jadi saya mengambil beberapa kutipan dari artikel ini di sini.
Dan cerita ini sebagai berikut.
Aku sekarang pemilik cerdas TV baru, yang
menjanjikan untuk memberikan streaming yang konten multimedia, games, aplikasi,
media sosial, dan internet browsing, oh dan TV juga.
Satu-satunya masalah adalah bahwa aku sekarang takut untuk menggunakannya, kata penulis.
Anda akan, juga, jika Anda membaca kebijakan privasi 46 halaman untuk TV Anda.
Jumlah data ini Hal terkumpul sangat mengejutkan.
Ini log di mana, kapan, bagaimana, dan untuk berapa lama Anda menggunakan TV.
Ini set pelacakan cookie, seperti yang telah kita bahas,
dan beacon dirancang untuk mendeteksi ketika Anda memiliki
konten tertentu melihat atau pesan email tertentu
jika Anda ingin memeriksa email di TV Anda.
Ini catatan aplikasi Anda gunakan, situs web yang Anda kunjungi,
dan bagaimana Anda berinteraksi dengan konten, melakukan semua itu melalui smart TV Anda.
Hal ini juga, creepier yet-- itu addition-- saya
telah built in kamera dengan pengenalan wajah.
>> Tujuannya adalah untuk memberikan kontrol gerakan untuk TV
dan memungkinkan Anda untuk log in ke personalisasi akun dengan menggunakan wajah Anda.
Pada terbalik, gambar yang disimpan di TV bukan upload
ke server perusahaan.
Pada sisi negatifnya, internet koneksi membuat seluruh TV
rentan terhadap hacker yang telah menunjukkan kemampuan
untuk mengambil kontrol penuh dari mesin.
>> Lebih mengganggu, seolah-olah itu tidak cukup pintar, adalah mikrofon.
TV ini menawarkan suara fitur pengenal
yang memungkinkan pemirsa untuk mengontrol layar dengan perintah suara.
Tapi layanan datang dengan peringatan agak menyenangkan.
Perlu diketahui bahwa jika kata-kata Anda diucapkan termasuk
pribadi atau sensitif lainnya informasi, bahwa informasi
akan menjadi salah satu data yang diambil dan dikirim ke pihak ketiga.
Punya itu?
Jangan katakan pribadi atau sensitif barang di depan TV Anda.
>> Jadi ini benar-benar nyata.
Dan sulit untuk tidak melihat apakah Anda pergi ke Best Buy atau sejenisnya untuk TV
hari ini.
Mereka semua cerdas dalam beberapa cara.
Dan mereka mendapatkan lebih cerdas dan creepier.
Dan mereka hanya mengumpulkan data dengan cara yang kita bicarakan
dan kemudian meng-upload melalui HTTP atau beberapa protokol lain beberapa server.
>> Jadi ini adalah sebuah artikel menyenangkan di situs online ini
di sini, yang berbicara tentang bug tertentu atau kode keliru
bahwa kita benar-benar bisa mengikat dalam diskusi pekan lalu.
Jadi judul ini adalah sebagai berikut, menurut cerita di sini,
Josh Breckman bekerja untuk perusahaan yang mendarat kontrak
untuk mengembangkan manajemen konten sistem, atau CMS seperti mereka disebut,
untuk situs web pemerintah yang cukup besar.
Sebagian besar proyek yang terlibat mengembangkan sistem manajemen konten
sehingga karyawan akan mampu membangun dan memelihara
yang terus berubah konten untuk situs mereka.
Hal berjalan cukup baik untuk beberapa hari setelah hidup.
Tetapi pada hari keenam, hal-hal berjalan tidak begitu baik.
Semua konten pada situs telah benar-benar menghilang.
Dan semua halaman menyebabkan default, Cukup masukkan halaman web konten.
Whoops.
Josh dipanggil untuk menyelidiki dan melihat
bahwa salah satu sangat merepotkan alamat IP eksternal memiliki
pergi dalam dan dihapus semua konten pada sistem.
>> Alamat IP tidak termasuk beberapa hacker membungkuk di luar negeri
menghancurkan bermanfaat informasi pemerintah.
Itu memutuskan untuk googlebot.com, Web merangkak spider sendiri Google.
Whoops.
Setelah sedikit riset dan berebut sekitar untuk menemukan cadangan noncorrupt,
Josh menemukan masalah.
>> Seorang pengguna telah disalin dan disisipkan beberapa konten dari satu
halaman ke halaman lainnya, termasuk sebuah Sunting Hyperlink
untuk mengedit konten pada halaman.
Biasanya ini tidak akan menjadi masalah karena pengguna di luar akan
perlu untuk memasukkan nama dan password, namun sistem otentikasi CMS,
sistem login, tidak memperhitungkan
hacking yang canggih teknik Spider Google.
Whoops.
>> Ternyata, Google Spider tidak menggunakan
cookie, yang berarti bahwa itu dapat mudah memotong cek untuk
login kue set menjadi false.
Ini juga tidak memperhatikan JavaScript, yang biasanya akan
meminta dan mengarahkan pengguna yang belum login.
Namun itu mengikuti setiap hyperlink pada setiap halaman yang ditemukan,
termasuk mereka yang Hapus Halaman dalam judul.
Whoops.
>> Jadi apa artinya ini lebih teknis tetapi cukup diakses istilah?
Ini hanya berarti bahwa seluruh situs web mereka,
mereka memiliki URL yang tidak berbeda satu ini yang Anda mungkin melihat dalam masalah set tujuh.
Ingat dalam masalah set tujuh atau tahu di permasalahan yang tujuh
bahwa Anda ditantang, antara lain,
untuk menjual saham atas nama pengguna.
Tapi menerapkan bahwa fitur dengan cara dari mendapatkan melalui hyperlink di pengguna Anda
antarmuka, mungkin bukan ide cerdas
karena jika situs Anda adalah entah bagaimana diakses baik oleh manusia
siapa yang mengklik sekitar atau membeli bot seperti Google atau Spider sebuah
karena mereka disebut itu hanya merangkak web mencoba untuk indeks
web sebagai mesin pencari, mereka bisa sangat mudah
memukul via mendapatkan jenis URL.
Dan itu fungsional setara dengan, dalam hal ini,
menjual seluruh saham Google.
>> Sekarang terus terang, itu benar-benar bodoh bahwa CMS
digunakan JavaScript dan cookie untuk menerapkan sistem login-nya
dan tidak melakukan hal itu sisi server, seperti kalian lakukan dan akan di PSet 7--
ada login.php sebuah file-- selalu, selalu,
selalu keamanan harus dilakukan pada sisi server,
tidak di sisi klien karena, seperti ini Artikel menyarankan dan Anda mungkin sendiri
lihat di beberapa titik, itu adalah sepele bagi pengguna, baik atau buruk,
hanya mematikan JavaScript belum lagi cookies.
Jadi itu adalah WTF harian Anda.
>> Ada satu lagi, yang hanya agak menakutkan,
jadi saya akan menyebutkan jika hanya sebagai pelajaran kehidupan.
Setiap kali Anda menggunakan aplikasi disebut seperti Snapchat atau sejenisnya
yang mengatakan foto-foto ini hanya berlangsung selama lima detik, sepuluh detik, atau entah apa lagi.
Mereka fana Itu benar-benar tidak terjadi.
Seperti tidak ada cara, digital, untuk mengimplementasikan beberapa bentuk video,
atau gambar, atau tekstual berbagi seperti bahwa penerima di ujung lainnya
tidak bisa entah bagaimana menyimpan data.
>> Dengan cara yang paling naif, seseorang bisa mengambil telepon mereka.
Dan mereka memiliki jendela 10 detik sambil melihat beberapa kancing
untuk hanya mengambil beberapa telepon lain dan foto itu, jelas.
Sehingga Anda dapat melestarikan sesuatu secara digital seperti itu.
Beberapa dari Anda tahu bagaimana untuk mengambil screenshot pada ponsel Anda.
Bahkan, jika Anda tidak mengetahui hal ini, menyadari bahwa setidaknya Snapchat,
dan saya pikir lainnya aplikasi hari ini,
setidaknya memberitahu Anda jika penerima telah benar-benar
mengambil screenshot dari gambar Anda.
>> Tapi lebih buruk lagi, ini adalah snappening tersebut, sebagai seseorang diciptakan baru-baru ini,
di mana sekitar 100.000 snaps telah dibebaskan
dalam apa yang disebut file torrent di berbagai website akhirnya.
Dan ini berisi seluruh bunch pesan pribadi dan posting.
Ternyata sebagian besar dari mereka jinak, jadi tidak apa yang Anda harapkan.
Tapi karena orang memiliki menggunakan situs pihak ketiga,
login dengan Snapchat mereka username dan password dan kemudian
menyimpan semua mereka terkunci di website ini pihak ketiga.
Dan itu adalah bahwa pihak ketiga website yang hacked,
yang hanya berarti seseorang menemukan cara untuk mendapatkan semua 100.000 plus gambar-gambar
ke hard drive mereka sendiri untuk berbagi berikutnya.
Terus terang, di sini juga, itu semacam dari bodoh yang Snapchat
diimplementasikan dalam sedemikian rupa sehingga pihak ketiga dapat mengurutkan intercept
data dan bahwa itu tidak terikat pada Anda aplikasi sendiri yang berjalan di telepon.
Tapi di sini, juga, menyadari bahwa ini hal seharusnya tidak menangkap Anda dengan kejutan,
atau setidaknya harus ada menjadi pelajaran hidup di sini.
Jika Anda ingin teknis Rincian, pergi ke URL yang ada
yang ada di slide saat ini.
Baiklah, pertanyaan pada pelajaran hidup hari ini di CS?
Menghidupkan yang mati.
Apa-apa?
Aku punya banyak orang memeriksa Snapchat atau sesuatu sekarang.
>> Baiklah, jadi SQL, Structured Query Bahasa.
Mari kita bungkus ini.
Dan juga, meskipun kami hanya menggaruk
permukaan ini bahasa, kami akan memberikan
cukup bahasa dalam bentuk PSet 7
sehingga Anda dapat mengatasi beberapa fungsionalitas yang cukup umum.
Tapi menyadari ada pasangan hal yang kita tidak memerlukan Anda,
tetapi mereka akan menjadi penting datang tugas akhir
dan pasti datang membuat aktual situs dengan pengguna yang sebenarnya
adalah keputusan desain ini.
>> Ternyata bahwa dalam database MySQL, Anda
memiliki tandan pilihan seperti tipe data untuk kolom Anda
dan hal-hal lain, tetapi Anda juga memiliki pilihan yang disebut storage
mesin untuk semua data Anda, jenis sistem file,
jika Anda terbiasa, untuk semua data Anda.
Format apa yang akhirnya disimpan dalam?
Dan yang paling umum, mungkin, telah MyISAM dan InnoDB, istilah-istilah teknis
bahwa kita akan peduli hanya sejauh satu yang memiliki
dan seseorang tidak memiliki fitur berikut.
>> Misalkan Anda memiliki kulkas asrama kecil.
Dan anggaplah bahwa Anda dan Anda Teman sekamar, yang berbagi lemari es ini,
benar-benar menyukai susu mengatakan.
Dan ini, pada kenyataannya, bagaimana cerita diceritakan kepada saya jalan kembali
pada hari ketika saya mengambil kursus disebut CS 161 Sistem Operasi, yang
sama mengeksplorasi topik ini.
Jadi Anda punya kulkas ini.
Kau keluar dari susu.
Dan kamu pulang, teman sekamar Anda masih di kelas atau apa pun,
dan Anda memutuskan aku akan pergi keluar dan mendapatkan beberapa susu.
Jadi Anda menutup lemari es, penjara kamar asrama, pergi di seberang jalan
CVS atau di mana pun, dan mendapatkan dalam antrean untuk membeli susu.
>> Sementara itu, teman sekamar Anda pulang ke rumah dari kelas, masuk ke kamar asrama,
membuka lemari es, juga menyadari ooph, kami keluar dari susu.
Jadi ia menutup kulkas dan kemudian terjadi
untuk pergi ke yang lain CVS, yang kebetulan
satu blok jauhnya dari CVS lainnya di alun-alun, dan mendapatkan sejalan
ada untuk mendapatkan susu.
Sekarang, tentu saja, beberapa menit kemudian, Anda berdua kembali,
dan yang terburuk dari semua kemungkinan hasil yang telah terjadi.
Anda berdua memiliki susu.
Dan Anda tidak benar-benar seperti susu yang banyak.
Jadi salah satu dari mereka hanya akan masam di beberapa titik.
Jadi sekarang Anda memiliki jumlah yang berlebihan susu di lemari es semua karena mengapa?
>> [Tidak terdengar]
DAVID Malan: Ya, Anda tidak entah bagaimana berkomunikasi satu sama lain
bahwa Anda mendapatkan susu.
Jadi dalam paling sederhana cara di dunia manusia,
bagaimana mungkin Anda menghindari hal ini konyol skenario terjadi seperti
bahwa Anda hanya berakhir dengan satu.
Teks mereka, ya baik.
Tapi bagaimana lagi?
Post-it notes.
DAVID Malan: A Post-it note.
Setiap bentuk komunikasi yang memberitahu teman sekamar Anda
tidak masuk ke lemari es untuk susu.
Aku akan pergi mengisi kembali pada saya sendiri.
Jadi Anda entah bagaimana membutuhkan untuk mengunci sumber daya ini.
Jadi kita bisa membuat this-- kita bisa jenis merusak cerita dan berubah menjadi sebuah cerita CS
dimana berpikir ini sebagai hanya seperti variabel, yang menyimpan beberapa nilai.
Dan sekarang, yang Nilai susu adalah nol,
yang Anda tidak ingin Anda teman sekamar untuk memeriksa variabel yang
dan kemudian membuat keputusan dirinya sendiri berdasarkan keadaan variabel yang
jika Anda dalam proses mengubah keadaan variabel tersebut.
>> Jadi salah satu baris SQL yang kita memberi Anda dalam PSet 7 spesifikasi
adalah salah satu ini di sini.
Dan kita tidak menghabiskan besar jumlah waktu berbicara tentang hal itu.
Tapi ternyata, jika Anda mencoba untuk membeli beberapa saham di CS50 keuangan
bahwa Anda sudah memiliki beberapa saham, Anda
ingin dapat melakukan nomor hal langsung bersama-sama.
Anda ingin dapat efektif, pada tingkat tinggi,
periksa baik-baik, jika saya ingin untuk membeli lebih banyak saham dari Free,
kita saham penny berbicara tentang di spec,
Saya ingin cek pertama berapa banyak saham yang saya miliki.
Dan rasa itu lima.
Dan misalkan saya ingin membeli 10 lebih, saya akhirnya
ingin memiliki 15 saham.
Jadi saya harus mengajukan dua pertanyaan.
Apa keadaan variabel?
Apa keadaan baris?
Berapa banyak saham yang saya miliki saat ini?
Kemudian Anda ingin untuk terus maju dan memperbaruinya.
Jadi itulah analog ke susu yang Anda memeriksa baris,
dan kemudian Anda ingin memperbaruinya karena jika Anda ingin membeli 10 saham,
Anda tidak ingin mengubah baris ke 10, Anda
ingin mengubahnya ke 5 ditambah 10 atau, tentu saja, 15.
>> Baris kode memastikan bahwa dua gagasan konseptual
terjadi bersama-sama atau tidak sama sekali.
Tidak ada satu, termasuk beberapa pengguna lain siapa yang login ke website yang sama,
entah bagaimana dapat mengganggu pengecekan baris
dan memperbarui baris, yang pilih dan update jika Anda mau.
Dan sintaks tidak super jelas, tapi garis yang satu ini, panjang itu,
memastikan bahwa kedua operasi memeriksa variabel atau periksa baris
dan memperbarui baris terjadi atom.
>> Oh di sini kita pergi lagi.
Pesan teks pada ponsel saya.
Jadi mari kita membuat ini sedikit lebih konkret.
Misalkan Anda tidak menerapkan kulkas,
dan Anda tidak menerapkan PSet 7 tapi bank yang sebenarnya,
atau ATM, Automated Teller Mesin, dimana Anda entah bagaimana
ingin dapat memberdayakan pengguna untuk mentransfer uang
dari satu account ke account lainnya.
OK, tunggu.
Aku akan mematikan sekarang ini, terima kasih.
Jadi kita ingin memindahkan uang dari satu nomor rekening
ke akun lain jumlah, khususnya dari $ 100.
Jadi ini adalah jenis sewenang-wenang Misalnya, dimana Anda, ATM,
mungkin ingin mengeksekusi dua SQL query, kurangi dari satu account,
dan menambah akun lain.
Tapi Anda ingin memastikan bahwa ini Dua baris kedua terjadi atau tidak sama sekali.
Anda tidak ingin sesuatu mendapatkan terganggu.
Anda tidak melakukan beberapa orang jahat cerdas entah bagaimana berdiri di Bank of America
dengan dua ATM di depan dia dan entah bagaimana
semacam mengetik di perintah pada saat yang sama,
mudah-mudahan mencoba untuk memotong $ 200 sebagai ganti $ 100 dan hanya memiliki $ 100 dikreditkan.
Singkatnya, Anda ingin hal ini berperilaku persis seperti yang Anda harapkan.
>> Dan seperti yang Anda lakukan ini dalam SQL database
Anda bungkus dalam apa disebut transaksi.
Secara harfiah dalam SQL, Anda dapat menghubungi CS50 ini fungsi permintaan dengan kutipan tanda kutip start
transaksi.
Kemudian Anda dapat mengeksekusi sejumlah query SQL berikutnya,
namun tidak satupun dari mereka mengambil efek pada database
sampai Anda menelepon permintaan kutipan tanda kutip komit, kalau lagi menggunakan PHP.
Dan dengan cara ini, Anda dapat memastikan bahwa pengguna bahkan jika Anda memiliki 1.000 semua
memukul database Anda pada saat yang sama, SQL
akan berjanji bahwa ini dua pertanyaan akan
dilaksanakan satu setelah yang lain.
Jadi Anda tidak berakhir dengan lebih dari susu atau jumlah yang salah, pada akhirnya,
uang.
>> Jadi ingatlah ini, tidak begitu banyak untuk PSet 7
tapi untuk tugas akhir jika Anda benar-benar
mencoba untuk memindahkan data sekitar di tabel seperti yang mungkin di sini.
Tetapi bahkan mungkin lebih sederhana dan lebih jelas untuk memahami dengan contoh
adalah salah satu ini di sini.
Dan seseorang diemail kami tentang hanya beberapa hari ini
ketika ia melihat sesuatu secara online serupa.
>> Jadi untuk pengetahuan saya, sistem pin tidak rentan terhadap serangan ini.
Dan saya tidak tahu apakah itu bahkan menggunakan database SQL di bawah tenda.
Tapi mari kita menggunakannya untuk kepentingan diskusi.
Berikut layar yang Harvard orang cenderung
untuk melihat saat login dengan mereka Nomor Harvard ID dan pin mereka.
Dan anggaplah bahwa sistem pin yang diimplementasikan di PHP dan MySQL dengan
Database, kode bahwa seseorang tahun mungkin telah menulis lalu
mungkin terlihat seperti ini.
Pertama, menyatakan variabel yang disebut nama.
Dan hanya mendapatkan bahwa dari yang superglobal POST.
Kemudian mendapatkan variabel lain disebut kata sandi dan melakukan hal yang sama.
Dan kemudian hanya menjalankan query yang panjang ini di sini,
pilih bintang dari pengguna mana nama sama ini dan itu
dan password sama dengan ini dan itu.
>> Perhatikan bahwa keriting kurung Aku sudah digunakan di sini
hanya berarti untuk PHP, pergi depan dan pengganti
nilai dari dua variabel di sana.
Mereka tidak benar-benar diperlukan, tetapi mereka cenderung untuk menghindari kesalahan sintaks halus.
Jadi ini tampak benar-benar benar pada pandangan pertama.
Dan itu adalah.
Anda bisa menerapkan Sistem pin dengan cara ini.
>> Tapi anggaplah bahwa super mahasiswa cerdas dan berbahaya
masukan ini sebagai nya pin.
Jadi saya telah menghapus peluru tanda-tanda di sini di mock up,
dan aku sudah benar-benar terungkap apa yang dia mungkin mengetik.
Dan itu agak aneh.
Tapi apa melompat keluar pada Anda di berpotensi mengkhawatirkan tentang input pengguna,
bahkan jika Anda tidak tahu apa serangan injeksi SQL berarti.
Mengapa hal ini terlihat sedikit mencurigakan?
Apa itu?
[Tidak terdengar]
DAVID Malan: The atau agak curiga.
Bahkan, itu adalah kata kunci dari SQL.
Sehingga bukan pertanda baik.
Fakta bahwa ada semua ini tanda kutip tunggal
besar-- pada kenyataannya, salah satu yang termudah cara untuk memecahkan beberapa database
adalah dengan mengetikkan nama seperti O'Reilly yang memiliki apostrof di dalamnya
karena jika manusia yang menulis kode belakang layar
tidak memperhitungkan bahwa ada mungkin tanda kutip tunggal dalam pengguna
masukan, dan dia menggunakan tanda kutip tunggal dalam kode mereka,
hal-hal buruk bisa terjadi.
>> Bahkan, lebih buruk lagi, pertimbangkan ini.
Jika ini lagi kode bahwa seseorang di Harvard tahun
lalu menulis untuk pin sistem, perhatikan apa yang
akan mendapatkan diganti untuk username dan password
jika jenis pengguna dalam lagi skroob sebagai username mereka
dan kemudian satu, dua, tiga, empat, lima, quote atau kutipan tanda kutip satu equals
mengutip satu.
Dan perhatikan apa kuncinya di sini adalah pengguna tidak
mulai password atau pin mereka dengan kutipan.
Dan mereka belum berakhir itu dengan kutipan karena dia
adalah asumsi bahwa jika programmer tidak begitu tajam,
mereka akan memiliki orang-orang tanda kutip tunggal dalam kode mereka.
>> Jadi, inilah kode.
Dan substitusi yang sekarang mungkin terjadi adalah ini.
Dan aku sudah digarisbawahi apa pengguna telah diketik dalam.
Jadi sebelum, sesudah.
Dan perhatikan apa yang agak mengkhawatirkan sekarang tentang kanan setengah dari kode SQL ini?
Ini sedikit lebih kompleks, diakui, daripada query yang telah kita lihat.
Tapi ini tidak bisa mungkin menjadi hal yang baik jika Anda
mengatakan pilih bintang, yang pilih segala sesuatu dari tabel pengguna
dimana username sama skroob dan sandi sama dengan satu, dua, tiga, empat,
lima atau satu sama dengan satu.
Apa implikasi logis dari klausa terakhir mungkin?
Hanya saja selalu benar.
>> Dan karena kita telah semacam menebak atau tahu dengan trial and error
bahwa programmer yang menulis kode ini tidak
mengantisipasi manusia atau buruk mengetik dalam tanda kutip tunggal juga,
kita dapat sintaksis menyelesaikan query SQL
dengan sesuatu yang tidak masuk akal tetapi sesuatu yang
adalah sintaksis benar yang selalu bernilai true.
Jadi jika kode ini digunakan untuk menjawab pertanyaan benar atau salah harus
pengguna ini diizinkan untuk lulus, yang Jawabannya selalu tampaknya akan
untuk menjadi kenyataan karena ini selalu terjadi untuk memilih sesuatu dari database
karena salah satu tentu saja akan selalu sama dengan satu.
>> Jadi apa solusinya?
Nah di PSet 7, kita benar-benar menghindari ini semua bersama-sama.
Kami memberikan fungsi permintaan, dan kami mendorong Anda untuk menggunakan tanda tanya
sebagai penampung, mirip semangat yang printf ini% s,
tapi apa kunci tentang tanda tanya di sini adalah jika Anda benar-benar membaca
functions.php, di mana kami fungsi permintaan diimplementasikan,
tanda tanya yang melarikan diri, dimana sesuatu yang berpotensi berbahaya
seperti kutip tunggal diaktifkan menjadi single quote melarikan diri.
>> Jadi ini adalah apa yang benar-benar terjadi jika Anda
menggunakan fungsi permintaan CS50 atau sejumlah perpustakaan gratis pihak ketiga yang
melakukan hal yang sama.
Tidak masalah dalam hal ini, dalam warna hijau, jika pengguna telah diketik dalam tanda kutip tunggal
karena query fungsi yang kita tulis adalah
akan menambahkan backslash sebelum setiap kutipan berbahaya tersebut.
Jadi ini bukan, dalam Bahkan, akan menjadi legit.
Hal ini seperti mengetik di gila mencari password yang, tentu saja, tidak akan
menjadi password yang sebenarnya skroob ini.
>> Jadi takeaway untuk CS50 adalah satu, benar-benar selalu menggunakan sesuatu
seperti fungsi permintaan CS50 ini atau perpustakaan yang mendasari,
yang terjadi untuk disebut PDO.
Tapi tidak pernah, tidak pernah, tidak pernah melakukan kode seperti ini
tanpa melarikan diri atau scrubbing seperti yang mereka katakan masukan Anda.
Dan Anda akan di beberapa titik mungkin menemukan beberapa website seperti ini.
Bahkan, tampaknya menjadi kasus seperti di bandara dan hotel di tempat
di mana mereka memiliki Wi-Fi gratis Akses bahwa Anda harus login ke,
website ini selalu mengerikan dilaksanakan.
Dan jadi semacam menyenangkan di latihan di rumah, bukan untuk tujuan jahat atau lebih
yang menyenangkan di jalan olahraga, adalah dengan hanya mengetik
apostrof, tanda kutip tunggal, menjadi bentuk pada beberapa situs
dan melihat apa yang terjadi.
Dan jika server crash atau memberikan Anda beberapa jenis pesan kesalahan,
mungkin sangat baik menjadi bahwa seseorang belum mengantisipasi hal ini.
Dan kemudian Anda harus waspada tepat otoritas dan melanjutkan lagi.
>> Jadi sekarang kalian harus mudah-mudahan memahami sedikit lebih pecandu humor di sini.
>> [Tertawa]
DAVID Malan: Anda tahu bahwa Anda geek.
Selama beberapa berikutnya tahun, Anda akan ingat
yang sedikit Tables Bobby adalah karena kartun ini di sini.
Jadi ingat-ingat seperti yang kita konteks beralih untuk terakhir kalinya
hari ini untuk JavaScript.
Kami telah menghabiskan relatif sedikit waktu pada sintaks PHP
karena itu benar-benar Super mirip dengan C.
Dan cukup baik, JavaScript juga super mirip dengan sintaks C
serta kita akan lihat dalam hanya sesaat dan seperti yang akan kita
lihat akhir pekan ini pada khususnya.
Apa yang dapat Anda lakukan dengan bahasa ini, meskipun, adalah semua lebih kuat,
terutama dengan API.
>> Tapi pertama-tama tur singkat.
Jadi satu, dalam JavaScript, ada ada fungsi utama, yang bagus.
Seperti PHP, Anda hanya dapat menulis kode.
Kondisi terlihat seperti ini.
Dan ekspresi Boolean mungkin terlihat seperti ini atau seperti ini.
Switch ada, dan mereka mungkin terlihat seperti ini.
Empat loop terlihat seperti ini.
Sementara loop terlihat seperti ini.
Apakah sesekali terlihat seperti ini.
Dan kemudian array terlihat seperti ini, sangat mirip dengan PHP.
Tetapi perhatikan, bahwa dalam JavaScript Anda mendeklarasikan variabel tidak dengan dolar
menandatangani, bukan dengan tipe data tapi secara harfiah dengan mengatakan var untuk variabel sebelum.
Juga longgar diketik dalam hal ini memiliki jenis,
tetapi Anda tidak secara eksplisit menyatakan mereka.
Dan kemudian string, untuk Misalnya, mungkin terlihat
seperti ini, string yang dipanggil dalam kasus ini.
Dan kemudian suatu objek.
Dan kita ini akan melihat lebih lama.
Dan objek mungkin salah satu paling sering dilihat struktur data
dalam JavaScript berdasarkan Program karena memungkinkan
Anda mengasosiasikan sewenang-wenang pasangan nilai kunci hanya
seperti array asosiatif PHP dan seperti tabel hash Anda sendiri
atau mencoba seperti yang kita diterapkan beberapa minggu lalu.
Jadi mari kita benar-benar melihat apa yang bisa kita lakukan dengan JavaScript.
Dan khususnya, ini adalah daftar cucian fitur
bahwa browser memiliki memungkinkan kita untuk menghubungkan JavaScript
ke situs web dengan cara berikut.
JavaScript sering digunakan sebagai sisi klien bahasa scripting.
Ini tidak dikompilasi.
Juga ditafsirkan.
Tapi tidak seperti PHP, yang sudah berjalan di server, di server web,
atau dalam mendalam dari klien, JavaScript
berbeda di dalamnya yang biasanya berlangsung dalam browser.
>> Jadi kode JavaScript Anda mulai menulis untuk PSet 8, atau tugas akhir Anda,
atau di dunia nyata umumnya akan yang akan disimpan di server, benar-benar
dalam HTML dot atau titik JS file JavaScript.
Tapi browser akan untuk men-download bahwa JavaScript
kode untuk contoh Anda sendiri Chrome, atau IE, atau Firefox, atau apa pun.
Dan kode ini benar-benar akan mendapatkan dijalankan di dalam browser Anda sendiri.
Hanya untuk membuat ini lebih nyata, mari kita lihat ini dalam bentuk konkret.
>> Kami tidak tahu apa kode ini tidak tanpa benar-benar membaca melalui itu.
Tapi biarkan aku pergi ke Facebook.com tanpa login.
Biarkan aku pergi ke Inspect Element dan pergi ke, katakanlah, Jaringan dan Reload Page.
Dan kita akan see-- biarkan aku menggeser Reload yang Halaman untuk mendapatkan semua permintaan untuk baru.
Dan yang pertama File saya lihat adalah CSS, CSS.
Berikut pertama File JavaScript, dan saya harus
tidak tahu apa yang dilakukan, tapi di sini adalah beberapa kode JavaScript
yang mendorong Facebook.
Ini bahkan tidak benar-benar mengungkapkan untuk memperbesar.
Ini masih sama tidak masuk akal.
>> Tapi Anda akan melihat bahkan di bawah, ada bahkan lebih dari file JavaScript ini.
Whoops.
Itu ping.
Mari kita turun sedikit lanjut, lebih lanjut, lebih lanjut.
Ada satu.
>> Jadi meskipun Facebook, di belakang adegan, ditulis dalam bagian dalam PHP
dan Facebook sendiri versi daripadanya, ada sejumlah besar JavaScript.
Bahkan, salah satu mengobrol Anda lakukan di Facebook,
salah satu pembaruan inline waktu yang terjadi secara real time, semua itu
didorong oleh JavaScript.
Ya?
>> AUDIENCE: Saya tidak yakin jika ini adalah Facebook,
tapi saya pikir bahwa Facebook dikembangkan sendiri di-rumah bahasa kode mereka?
DAVID Malan: Mereka melakukannya.
Jadi itulah sebabnya saya katakan varians PHP disebut Hip Hop yang mereka benar-benar
fitur yang ditambahkan untuk sedemikian rupa sehingga ketika Mark pertama kali diimplementasikan Facebook,
itu ditulis dalam PHP.
Dan itu semacam tetap jenis bahasa front end
yang mereka gunakan untuk banyak coding mereka, tetapi
belum bahasa yang skala sangat baik untuk miliaran
orang.
Dan sehingga mereka telah menambahkan mereka sendiri perbaikan di balik layar.
Dan mereka menggunakan sejumlah bahasa lain
untuk berbagai potongan infrastruktur mereka.
Jadi ya, itu adalah varians dari apa yang sekarang kita kenal sebagai PHP.
>> Jadi mari kita lihat pada beberapa contoh
bagaimana kita bisa menggunakan JavaScript sini.
Dalam kode sumber saat ini, kami memiliki sekelompok file, yang pertama,
mari kita disebut DOM nol.
Jadi DOM nol terlihat sebagai berikut.
Biarkan aku pergi ke direktori ini dan membuka domzero.html,
bagian atas yang memiliki tipe doc deklarasi, mengatakan inilah HTML 5.
Dan sekarang di sini adalah tag HTML.
Berikut tag kepala.
Dan inilah apa yang baru hari ini.
>> Kami sekarang memiliki tag script dalam kepala halaman.
Dan ini tampaknya tidak sangat sedikit, tapi pemberitahuan
bahwa saya telah didefinisikan Script, JavaScript.
Dan sebagai samping, karena ini adalah kesalahpahaman umum,
JavaScript sama sekali tidak ada hubungannya dengan Java, bahasa
bahwa beberapa dari Anda mungkin telah belajar di APCS.
Itu lebih dari pemasaran hal dari apa pun,
naik coattails Jawa tahun yang lalu.
Tapi JavaScript, tidak ada hubungannya dengan Java, hanya sama, dan mengganggu,
membingungkan bernama.
>> Jadi di sini adalah bagaimana Anda mendeklarasikan fungsi dalam JavaScript, secara harfiah mengatakan fungsi,
maka nama fungsi, maka argumen mungkin mengambil,
sama seperti di PHP.
Ternyata dalam JavaScript, salah satu yang paling fungsi menjengkelkan yang ada adalah Pemberitahuan.
Ini adalah sebuah jendela kecil yang akan muncul dan mengingatkan Anda
untuk beberapa bagian dari informasi.
Ini umumnya disukai.
Tapi kita akan menggunakannya sebagai kami latihan pertama di sini.
>> Perhatikan beberapa fitur JavaScript.
Tanda kutip tunggal dan tanda kutip ganda tidak benar-benar penting lagi.
Tanda kutip tunggal dan ganda kutipan dapat dipertukarkan,
sedangkan di C, Anda harus menggunakan tanda kutip ganda untuk string,
dan Anda memiliki dua single mengutip untuk karakter.
Dalam dunia JavaScript, banyak orang, kebanyakan orang
menggunakan tanda kutip tunggal di sekitar string hanya karena itu hal gaya.
Tapi apa operator plus di sini, yang kita belum lihat sebelumnya?
>> AUDIENCE: Penggabungan.
DAVID Malan: Penggabungan.
Jadi C bahkan tidak memiliki ini.
PHP memiliki operator dot, yang melakukan hal ini.
JavaScript memiliki operator positifnya, yang membingungkan adalah seperti Java.
Sekarang apa yang terjadi di sini?
>> Jadi, di sinilah dasar pemahaman tentang gambar yang
kami muntah pasangan hari yang lalu datang ke dalam bermain.
Ingat ketika kami memiliki sederhana versi HTML page--
itu hanya berkata, hello world.
Dan kemudian kita menarik pohon ke kanan, yang
memiliki sekelompok empat persegi panjang dan garis menghubungkan mereka seperti pohon keluarga.
Jadi itulah yang disebut DOM atau Document Object Model.
Dan ternyata bahwa Anda dapat mengakses persegi panjang di pohon dengan sintaks
seperti berikut ini.
Anda benar-benar mengatakan dokumen, yang merupakan variabel global khusus dalam JavaScript
program yang memiliki fungsi terkait dengan itu bahwa Anda dapat mengakses
mirip dengan struct, tetapi Anda hanya mengatakan titik dan kemudian nama fungsi,
mendapatkan elemen dengan ID.
>> Unsur saya ingin dapatkan adalah rupanya mengutip nama tanda kutip.
Dan kemudian saya ingin mendapatkan nilai.
Sekarang kita mendapatkan depan diri kita sendiri.
Aku bahkan tidak yakin apa semua ini adalah tentang.
Mari kita maju cepat untuk HTML pada halaman, yang super sederhana.
>> Perhatikan bahwa saya telah didefinisikan a membentuk di sini.
Perhatikan Aku sudah diberikan itu unik ID, meskipun kami sudah tidak digunakan
atribut ini sebelumnya.
Tapi ini ada dalam HTML.
Anda dapat secara unik mengidentifikasi beberapa potongan HTML dengan identifier seperti ini.
>> Pemberitahuan sekarang this-- ternyata HTML mendukung, per yang daftar cucian
beberapa saat yang lalu, keseluruhan sekelompok event handler.
Dan event handler ini tertulis di kirimkan.
Pada pengajuan pengguna ini bentuk, sebut kode berikut.
Dan kode yang akan untuk dipanggil atau dieksekusi
persis ini, Yunani Fungsi diikuti oleh return false.
Segala sesuatu yang lain harus cukup akrab.
>> Berikut adalah masukan dari jenis teks, yang ID, dalam hal ini, akan menjadi nama.
Kami tidak memiliki atribut nama sebenarnya time-- ini dan tombol kirim.
Jadi halaman yang dihasilkan terlihat seperti ini.
Dan perilaku yang dihasilkan, Anda akan melihat, terlihat seperti ini.
Halaman itu host lokal mengatakan, halo David, hampir tidak estetis menyenangkan
cara untuk menyambut pengguna.
Tapi apa yang sebenarnya terjadi?
>> Nah, pertimbangkan apa ini.
Ini adalah kolom teks.
Dan menurut HTML di sini, saya telah diberikan itu
pengenal unik disebut quote nama tanda kutip.
Sementara itu, saya katakan saat pengguna mengirimkan formulir ini
dengan menekan Enter atau klik Submit tombol, memanggil fungsi disebut Greet
dan kemudian kembali False.
Mari kita pertimbangkan mereka yang terbalik.
Perhatikan ketika saya klik Submit, yang URL halaman ini tidak berubah.
Ikon browser tidak mulai berputar.
Aku tidak pergi ke mana pun, dan itu harfiah karena aku bilang kembali False.
Kembali sirkuit pendek Palsu atau berhenti perilaku default formulir.
Sehingga kemudian meninggalkan kita dengan satu pertanyaan terakhir ini.
Apa Greet lakukan?
Nah, rupanya Greet panggilan fungsi yang disebut
Alert, lewat di satu argumen panjang itu
hasil dari concatenating bersama sekelompok substring, halo ruang koma,
maka apa pun ini kembali.
Sehingga dokumen seperti global variabel dengan akar pohon itu,
memanggil fungsi khusus, jika tidak sekarang dikenal sebagai metode.
Sebuah fungsi yang dalam suatu variabel
disebut metode bukan fungsi.
>> Jadi bisa elemen dengan ID.
Apa elemen yang Anda ingin mendapatkan oleh ID-nya?
Mengutip nama tanda kutip dan kemudian secara khusus menghargai.
Jadi dengan kata lain, kode yang hanya menemukan bidang teks yang ID adalah nama
dan kemudian mendapat nilai.
Jadi jika saya harus mengubah ini dan mengatakan Davin bukan David,
dan klik Submit, sekarang kita memiliki ucapan untuk Davin.
>> Baiklah, jadi semua baik dan bagus.
Tapi mari kita lihat apakah kita dapat membuat ini sedikit lebih bersih karena hanya
menulis kode seperti ini umumnya akan disukai.
Ini akan terlihat menakutkan.
Tapi apa yang pertama perbedaan yang Anda perhatikan di sini
dalam versi ini selain nama berubah untuk DOM satu?
Apa struktural terlihat berbeda tentang hal ini dibandingkan yang lain?
Ya?
AUDIENCE: Apakah formulir di atas naskah sekarang?
DAVID Malan: Ya, bentuknya adalah di atas naskah untuk beberapa alasan penasaran.
Jadi itulah hal pertama yang melompat keluar pada saya, juga.
Dan untungnya setidaknya, Bagian ini identik.
Jadi satu-satunya hal yang tampaknya menjadi berbeda adalah ini.
>> Jadi, inilah yang rapi tentang JavaScript 2.
Dan itu membuat sulit untuk memahami pada pandangan pertama,
terutama untuk proyek-proyek akhir jika Anda sedang melihat kode contoh online,
tapi itu bermuara pada beberapa fitur sintaksis dasar.
Di sini sekali lagi adalah bahwa Dokumen variabel global.
Di sini sekali lagi adalah bahwa metode atau fungsi yang mengatakan mendapatkan elemen dengan ID.
Kali ini saya ingin mendapatkan ID yang disebut demo.
Dimana itu?
Itu tampaknya benar di sini, bentuk itu sendiri.
>> Dan sekarang melihat bahwa ternyata jika saya mendapatkan kembali bahwa simpul dari pohon yang
merupakan bentuk itu sendiri, bukan bidang teks,
ternyata bentuk itu, yang node atau persegi panjang dari pohon,
memiliki apa yang akan kita sebut properti, sangat, sangat, sangat mirip
semangat yang struct di C. Ini hanya anggota data di dalam persegi panjang ini.
>> Jadi aku punya bentuk di sini, dan saya melampirkan,
atau aku menugaskan, kepada para On Kirim handler atau lebih tepatnya On Submit properti
fungsi berikut.
Dan ini adalah, sejauh ini, paling gila yang hal sejauh sintaksis.
Ternyata dalam JavaScript dan PHP, dan terus terang dalam hal ini di C,
meskipun kami tidak melakukannya, Anda dapat menambahkan tak bernama, anonim, atau AKA lambda
fungsi yang tidak memiliki nama tapi bisa disebut tetap.
>> Jadi apa yang saya lakukan di sini adalah aku menugaskan ini On Submit properti, yang
adalah dalam node ini pohon DOM saya, fungsi, fungsi pointer jika Anda mau.
Fungsi yang tidak memiliki nama, tapi itu tidak
masalah karena kita akan melihat sebentar lagi bagaimana menyebutnya.
Ketika fungsi ini disebut, kode ini dijalankan, maka
palsu dikembalikan seperti sebelumnya.
>> Tapi perhatikan apa yang telah kulakukan.
Pada titik ini dalam cerita, aku punya formulir.
Itu punya ID unik yang disebut demo.
Di sini, saya memiliki tag script yang mengeksekusi kode berikut.
Itu menempel dengan simpul di pohon untuk itu On Kirim
properti fungsi ini di sini.
Dan hanya dengan sifat bagaimana browser bekerja, ketika saya sekarang klik Submit atau tekan Enter,
fungsi yang akan dipanggil.
Itu tidak membutuhkan nama karena yang sih peduli apa namanya.
Satu-satunya waktu itu pernah akan mendapatkan disebut adalah ketika saya mengirimkan formulir.
Tidak perlu bagi saya, pengembang manusia,
untuk benar-benar menyebutnya tempat lain.
>> Sekarang hanya sebagai teaser, seolah-olah itu tidak keberatan cukup lentur,
kita bahkan dapat membuat ini terlihat lebih samar menggunakan
perpustakaan super populer disebut jQuery.
Bahkan jQuery dan JavaScript sering digabungkan.
Dan apa yang akan kita lakukan pada hari Rabu adalah awal menggunakan bahasa ini dan perpustakaan ini
untuk membangun semakin asynchronous dan aplikasi dinamis
seperti peta mendapatkan aplikasi, aplikasi
yang memperbarui halaman web secara real waktu, seperti Facebook atau Gchat
dilakukan, dan tidak lagi membatasi diri untuk Memukul Dikirim oleh get atau hanya posting
saja.
Jadi saya akan melihat Anda pada hari Rabu.
>> [MUSIC PLAYING]