[Powered by Google Translate] [Minggu 9] [David J. Malan - Universitas Harvard] [Ini adalah CS50. - CS50.TV] Baiklah. Selamat datang kembali. Ini adalah CS50, dan ini adalah awal minggu 9. Hari ini kita terfokus pada desain, tidak lagi dalam konteks C tetapi dalam konteks PHP dan sedikit SQL dan sedikit JavaScript, terutama menuju akhir dari kedua pset 7 dan juga proyek akhir Anda. Bahkan, jika Anda berada pada saat itu dalam proyek akhir Anda mana mungkin pada satu jam atau lebih yang lalu Anda setidaknya mulai memberikan beberapa pemikiran untuk proyek akhir Anda dan Anda berpikir Anda ingin berkolaborasi dengan 1 atau 2 teman sekelas, jika Anda mengalami kesulitan menghubungkan dengan kata teman sekelas, merasa bebas untuk mengisi formulir di cs50.net/partners/form. Itu hanya meminta Anda siapa Anda, apa jenis proyek Anda berpikir tentang, di mana Anda tinggal hanya untuk alasan logistik. Dan kemudian jika Anda ingin mengawasi selama minggu depan atau lebih URL spreadsheet sana, Anda kemudian dapat melihat versi read-only dari doc Google di mana kita sedang mengumpulkan informasi tersebut. Jadi jika Anda ingin bekerja dengan seseorang, dengan segala cara merasa bebas untuk menjangkau orang melalui mekanisme tersebut. Namun sebagian besar dari orang-orang melakukan solo kerja. Itu benar-benar baik-baik saja. Jadi jangan merasa bahwa ini adalah cara apapun wajib. Pada hari Jumat itu hanya saya dan beberapa tim di sini, kosong teater untuk sebagian besar. Ada yang 3 turis duduk di atas sana, jadi itu sedikit canggung. Apa yang kita bicarakan adalah database dan kami berbicara tentang pset 7 sedikit. Dan jika Anda tidak terjadi untuk menangkap bahwa di video dulu, itu bagus. Saya akan mencoba untuk mendefinisikan istilah yang kita akan sebaliknya mengambil untuk diberikan berdasarkan kuliah Jumat. 

Tapi hari ini kita akan mencoba untuk mendapatkan Anda ke titik dari tidak hanya mampu melakukan sesuatu seperti pset 7 tapi benar-benar memahami apa yang terjadi di bawah tenda, khususnya beberapa abstraksi yang kita tempatkan di tempat dalam file functions.php untuk membuat hidup Anda sedikit lebih mudah, tetapi agar Anda akhirnya mengerti sehingga ketika roda pelatihan datang dari dalam beberapa minggu Anda masih bisa bertahan di dunia nyata dan melakukan hal ini tanpa kerangka CS50 di bawah Anda. Ini $ _SESSION, bagi anda yang akrab atau yang sudah tertangkap video pada Jumat, apa SESI mari kita lakukan dalam aplikasi web berbasis PHP? Ini adalah variabel superglobal, yang berarti itu memiliki semangat yang sama GET dan POST dan beberapa orang lainnya, tapi apa hal ini berguna untuk? 

Apa SESI digunakan untuk? Ya. [Mahasiswa] Logging masuk Maaf? [Mahasiswa] Logging Logging masuk masuk Memang. Dalam pset 7 kita menggunakan superglobal SESI untuk memfasilitasi login Dan apa yang bagus tentang superglobal ini adalah bahwa itu adalah array asosiatif. Array asosiatif, ingat, hanya array tetapi tidak lagi yang indeks harus nomor seperti 012. Mereka dapat nomor atau mereka dapat menjadi lebih string. Dan jadi jika Anda sudah menyelam ke pset 7 belum, Anda mungkin ingat bahwa kita menyimpan ID disebut kunci dalam array asosiatif yang nilainya adalah sesuatu seperti 123 - apapun saat ini login ID pengguna adalah. Motivasi untuk ini adalah bahwa bahkan setelah pengguna telah mengunjungi localhost atau website saya lebih umum dan kemudian mereka sudah masuk, bahkan jika mereka tidak mengklik link atau kembali ke website saya selama 5 menit atau bahkan satu jam atau bahkan hari tetapi mereka meninggalkan jendela browser mereka terbuka, melalui superglobal ini bisa saya ingat bahwa mereka login 

Dengan kata lain, itu memungkinkan saya untuk menyimpan sesuatu yang jangka panjang saya ingin sedikit tentang user. Dan Anda bisa memikirkan itu benar-benar sebagai inkarnasi dari keranjang belanja. Tempat-tempat seperti Amazon jelas membiarkan Anda meletakkan segala sesuatu ke dalam keranjang belanja, tapi HTTP, protokol yang kekuatan Web, adalah stateless dalam arti bahwa ketika Anda mengunjungi sebuah website, untuk sebagian besar Anda tidak memiliki koneksi jaringan konstan antara browser dan server. Segera setelah Anda sudah download HTML dan file JPEG dan GIF dan semua itu, koneksi pergi dan Anda hanya memiliki salinan dari HTML dan yang lainnya dari server. Tetapi jika server ingin mengingat sesuatu tentang Anda, beban adalah pada server untuk benar-benar merekam informasi tersebut. Dan sehingga Anda programmer yang memiliki kontrol atas server dapat menempatkan sebagian besar apa pun yang Anda inginkan dalam ini array asosiatif superglobal dan itu akan berada di sana waktu berikutnya pengguna datang kembali, apakah itu menit atau bahkan hari kemudian, kecuali mereka menutup jendela browser mereka, di mana SESI titik menghilang. Jadi penyimpanan fana, itu non-persistent, dan itu dimaksudkan untuk pergi segera setelah pengguna menutup browser mereka - tidak hanya itu tab, sering seluruh browser, sehingga secara efektif logging pengguna keluar. Jadi bagaimana hal ini benar-benar diterapkan? Mari kita lihat sebuah contoh sederhana kita melihat pada hari Jumat. Bagi mereka yang tidak terbiasa, itu sesederhana ini. Ini adalah halaman web yang tujuan utamanya dalam hidup adalah untuk memberitahu saya berapa kali saya telah mengunjungi halaman ini. Ini adalah pertama kalinya di sini pada hari Senin bahwa saya mengunjungi, sehingga ia mengatakan 0 kali. 

Tapi kalau aku mulai reload halaman ini, ia mengatakan 1 kali, 2, 3, 4, 5, dan ini pada akhirnya akan hanya terus menghitung, naik, naik, naik, naik untuk setiap kali saya benar-benar klik Reload di atasnya. Jadi bagaimana ini bekerja? Biarkan aku pergi dalam file ini disebut counter.php. Bagian atas dari itu semua komentar biru, tapi yang menarik di sini. On line 13 kita sebut ini session_start fungsi, dan yang secara harfiah semua yang perlu Anda lakukan jika Anda ingin memiliki akses ini superglobal khusus yang disebut $ _SESSION. Itu akan membuat semuanya mungkin, dan kami akan melihat di saat bagaimana itu semua mungkin. Sejalan 16 pemberitahuan apa yang saya lakukan. Jika kunci, yang disebut kontra - dengan kata lain, nilai indeks - "kontra" ada dalam array ini disebut SESI, maka apa yang saya lakukan dengan itu di baris bawah? Apa baris 18 lakukan? 

[Respon siswa terdengar] Apa itu? [Mahasiswa] Menyimpan nilai. Baik. Ini menyimpan nilai yang ada di SESI sekarang dalam variabel sementara lokal baru, $ Kontra dalam huruf kecil semua. Perhatikan bahwa PHP sudah menjadi sedikit malas di sini. Perhatikan kita tidak memiliki penyebutan int atau float atau string atau sesuatu seperti itu karena PHP lemah diketik, dimana Anda tidak perlu menentukan jenis variabel, dan dalam hal ini di sini saya sudah tidak bahkan menyatakan itu belum. Saya menyatakan di dalam satu kurung kurawal dan tidak seperti C, ini sebenarnya baik-baik saja. Tidak peduli seberapa dalam bersarang deklarasi variabel adalah di PHP - dalam tanda kurung kurawal, dalam tanda kurung kurawal dan sejenisnya - itu akan pada saat itu dalam waktu ada untuk sisa program, untuk lebih baik atau lebih buruk. Jadi segera menjadi global segera setelah Anda mendefinisikannya seperti yang kita lakukan di sini. 

Kalau tidak, jika saya tidak menemukan bahwa ada sesuatu di superglobal SESI, Saya rupanya menginisialisasi ini variabel counter ke 0, sehingga hanya asumsi pengguna belum pernah di sini sebelumnya. Dan kemudian ini tentu saja adalah incrementing counter bagaimana? Saya memperbarui nilai yang dalam ini array asosiatif dengan menetapkan sama dengan apa kontra saat ini + 1. Jika saya scroll ke bawah sini untuk HTML halaman, itu sebenarnya cukup sederhana. Semua yang saya miliki dalam badan halaman ini, "Anda telah mengunjungi situs ini kali begitu-dan-begitu." Dan ini adalah membangun PHP. Jika Anda melakukan <=, ini setara efektif untuk apa fungsi? Ini benar-benar setara dengan sesuatu seperti printf, yang kita telah melihat berkali-kali dalam C, meskipun seperti yang Anda mungkin sudah tahu dari spec di pset 7, cetak juga merupakan fungsi yang hanya mencetak sesuatu, itu tidak benar-benar menggunakan kode format, dan Anda benar-benar dapat mengatakan gema juga. Mereka semua pernah jadi sedikit berbeda meskipun efek bersih pada akhirnya sama. Jadi ini penggunaan tanda sama hanya semacam cara yang elegan untuk melakukannya lebih ringkas dari yang Anda mungkin bisa. Jadi itu semua situs ini tidak. Ini mencetak nilai dari counter. Bagaimana ini semua benar-benar terjadi? Anda mungkin ingat seminggu atau yang lalu kami mulai mencari di bawah tenda bagaimana sebuah halaman web bekerja dengan menggunakan tab Inspektur. 

Chrome memiliki ini baik dalam versi Mac, versi Windows, dan bahkan versi Linux, dan Firefox dan IE memiliki mekanisme yang sama dimana Anda memiliki built-in debugger dalam browser. Mari kita lihat berikut ini. Kami punya sejumlah besar tab di sini, dan ingat bahwa yang paling kiri adalah Elements, dan tidak peduli seberapa godawful HTML dan JavaScript di halaman, ingat bahwa dengan tab Elemen Anda benar-benar dapat menavigasi HTML hirarki dan bagus dan rapi. Jadi jika Anda mencoba untuk belajar dari sebuah situs web seperti Google atau Facebook atau benar-benar situs web apapun, menyadari bahwa Anda mungkin lebih baik melihat kode sumber ini cara yang bertentangan dengan melihat sumber mentah, yang dapat menjadi berantakan, seperti yang kita lihat terutama pada situs Google. Jadi jika saya bukan klik pada tab Jaringan di sini, mari kita lihat apa yang terjadi ketika saya mengunjungi halaman ini. Pertama izinkan saya menghapus cache saya. Aku akan pergi ke Pengaturan di Chrome dan kemudian pergi ke Sejarah dan kemudian Hapus semua data perambanan. Anda dapat digunakan untuk melakukan hal ini untuk keperluan lain, [tertawa] tetapi ketika datang ke situs web berkembang, itu benar-benar berguna - jika Anda tertawa Anda tahu. [Tertawa] Ini sebenarnya sangat berguna ketika mengembangkan website karena kenyataannya adalah hal-hal seperti kue dan hal-hal seperti file HTML cache, cache file JavaScript benar-benar dapat menjadi besar kepala, karena jika karena alasan apapun browser memutuskan untuk cache beberapa file dan belum Anda telah membuat perubahan pada file tersebut di server tapi browser belum benar-benar menyadari bahwa file tersebut telah berubah dan karena itu tidak benar-benar kembali men-download bahkan ketika Anda mengklik tombol Reload, salah satu cara yang paling jitu untuk hanya memastikan kesalahan bukan dengan kode Anda, itu dengan perilaku browser, adalah untuk pergi di sini pada browser Anda dan hanya menghapus seluruh sejarah sehingga tidak ada kebingungan. 

Dan kemudian jika Anda benar-benar ingin menjadi paranoid, keluar dari browser, restart, dan kemudian pastikan semua bekerja seperti yang diharapkan. Jadi singkatnya, cache kliring baik ketika melakukan pembangunan. Jadi di sini kita memiliki tab Jaringan. Saya sebelumnya telah mengunjungi situs 9 kali, tapi biarkan aku pergi ke depan sekarang dan klik Reload. Dan aku kembali ke 0. Mari kita benar-benar melihat bagaimana itu adalah bahwa ini superglobal SESI sedang dilaksanakan. Aku akan klik pada permintaan HTTP 1 yang dibuat, dan ini jendela debugging membuat saya melihat ke dalam itu. Di sini saya hanya melihat respon dari server, yang tidak menarik. Aku pernah melihat ini dalam beberapa cara. Tapi apa secara teknis menarik adalah header. Jika saya scroll ke bawah sini dan fokus pada header permintaan dan klik view source, apa yang saya akan melihat secara harfiah permintaan HTTP yang hanya pergi dari browser saya ke server, GET menjadi kata dan kemudian / counter.php menjadi nama file, HTTP/1.1 hanya menjadi versi HTTP yang browser saya menggunakan. Baris ini di sini adalah sedikit pengingat dari browser ke server apa nama server bahwa ia ingin berbicara dengan. Dan kemudian sisa ini kadang-kadang menarik tetapi tidak relevan sekarang. 

Ini hanya semacam rasa ingin tahu. Cryptic meskipun string ini adalah, setiap saat browser Anda mengunjungi sebuah website itu menginformasikan server apa browser yang Anda gunakan dan apa sistem operasi yang Anda gunakan dan apa versi daripadanya. Jadi jika Anda pernah bertanya-tanya bagaimana situs-situs seperti CNN dan yang lainnya tahu apa persentase pengguna Mac pada pengguna Web, PC, Pengguna IE, pengguna Chrome dan sejenisnya, itu karena semua browser kami mengatakan kepada setiap situs tunggal di luar sana apa yang kita. Itu tidak selalu berisi informasi pribadi, tetapi tidak memberitahu server apa alamat IP Anda dan apa browser dan OS yang Anda gunakan. Jadi itulah di mana informasi ini. Tapi apa yang lebih menarik sekarang ketika datang ke sesi ini adalah header respon. Biarkan saya klik view source sebelah respon. Yang menarik di sini adalah beberapa hal. 1, kami kembali kode status 200. Kami tidak pernah melihat kode status karena itu berarti semuanya baik-baik. Ini berarti harfiah apa-apa berbeda dengan sesuatu yang lain. Apa nomor kadang-kadang kita melihat itu buruk? [Mahasiswa] 404. 404, file tidak ditemukan, 403 Anda mungkin tersandung atas sudah, yang dilarang, yang berarti Anda lupa sesuatu chmod, kemungkinan besar. Dan ada sekelompok orang lain. 

Di sini, ini sedikit gila. Aku benar-benar hanya menulis file ini beberapa menit lalu dengan menyisipkan ke gedit. Mengapa halaman ini berakhir pada tahun 1981 sebelum ada benar-benar sebuah Web? Apa yang terjadi di sana? 

[Respon siswa terdengar] The cap waktu. Tapi kenapa? Ini agak sewenang-wenang, tapi itu benar-benar berguna. Apa ini mengatakan kepada browser saya ini file PHP Anda baru saja diminta telah kedaluwarsa. Bahkan, itu berakhir 30 tahun yang lalu. Tapi apa benar-benar berarti? Ini hanya berarti waktu berikutnya pengguna mengunjungi halaman ini, apakah dengan reload atau mengetik URL di address bar, pastikan Anda pergi dan mengambil salinan baru dari itu. Ini adalah semacam contoh penghilang cache, kata bodoh yang hanya berarti berusaha untuk mencegah browser dari sebenarnya HTML caching yang telah dikirim dari server sehingga Anda tidak sengaja memukul ulang dan kemudian melihat versi yang sama dari file. Anda benar-benar ingin server untuk mengirim salinan baru. Jadi fakta bahwa itu hanya berarti bahwa 1.981 itulah alat yang memilih sebagai tanggal yang sewenang-wenang di masa lalu. Tapi garis berair nyata sekarang satu ini. Bahkan sebelum 50 Anda mungkin samar-samar akrab dengan cookie. Sampai sekarang, terutama di kalangan mereka yang kurang nyaman atau di antara, apa cookie dalam pemahaman Anda sekarang meskipun kami akan membuat pemahaman Anda lebih teknis? Apa cookie? Ya. [Mahasiswa] Informasi tentang pengguna, seperti jika mereka telah menulis nama pengguna mereka atau sesuatu. 

Baik. Ini informasi tentang pengguna, apakah mereka telah mengetik nama pengguna mereka sudah. Cookie adalah cara dimana server dapat mengingat sesuatu tentang pengguna. Dan apa cookie benar-benar adalah file teks atau beberapa urutan byte yang ditanam oleh server dalam browser Anda, dan dalam file tersebut atau di antara mereka byte adalah semacam pengenal. Mungkin secara harfiah nama pengguna Anda, tetapi lebih sering itu sesuatu yang lebih samar-tampak hal seperti ini di sini - bo8dal3ct dan sebagainya - string alfanumerik sangat besar itu benar-benar hanya dimaksudkan untuk menjadi sebuah identifikasi unik untuk Anda. Atau Anda dapat menganggapnya sebagai semacam cap tangan virtual. Jika Anda pergi ke beberapa klub atau sebuah taman hiburan, mengingat bahwa Anda telah benar-benar dibayar dan pergi, mereka memasang stiker merah kecil di tangan Anda dari beberapa macam, dan yang mengingatkan orang-orang di meja yang sudah dibayar dan Anda bisa datang dan pergi sesuka hati. Cookie adalah sedikit semangat yang sama itu. Pertama kali saya mengunjungi website ini, karena saya hanya lakukan setelah membersihkan cache saya, server web, alat dalam hal ini, membubuhkan cap di tanganku yang namanya PHPSESSID, sesi ID, yang nilainya adalah string alfanumerik sangat panjang. 

Jadi yang sekarang semacam terpampang di tangan saya sehingga waktu berikutnya aku memukul ulang atau secara manual kunjungi URL ini di browser, browser saya dengan definisi HTTP akan menyajikan cap tangan lagi dan lagi dan lagi. Jadi meskipun server tidak selalu tahu siapa aku, mereka setidaknya tahu bahwa aku pengguna yang sama atau setidaknya, lebih khusus, browser yang sama. Dan jadi ini pada akhirnya bagaimana superglobal SESI diimplementasikan. Server tidak tahu siapa Anda ketika Anda mengunjungi sebuah situs web untuk kedua atau ketiga kalinya kecuali Anda hadir ini cap tangan. Dan segera setelah Anda hadir bahwa cap tangan, server web pada dasarnya masuk ke database kecil sendiri dan cek, oke, saya baru saja melihat cap tangan bo8dal3ct pengguna dan sebagainya. Biarkan saya melihat informasi apa programmer telah disimpan bagian dalam superglobal tentang pengguna ini, dan kemudian membiarkan saya memastikan bahwa data yang lagi dalam SESI superglobal sehingga pemrogram dapat kembali mengakses data bahkan jika itu mengatur beberapa menit atau jam lalu. Jadi dengan kata lain, cookies, yang mendapat rap buruk selama beberapa waktu karena ketidakamanan di browser dan mereka benar-benar dapat melanggar privasi kami dan semua ini, mereka benar-benar memiliki utilitas besar karena tanpa mereka Anda terus-menerus akan masuk ke setiap halaman Facebook Anda kunjungi atau setiap email Gmail Anda membaca jika browser tidak memiliki beberapa cara untuk mengingat bahwa Anda sudah dikonfirmasi. 

Jadi dengan cara ini cookie dikirim bolak-balik melintasi kawat. Lain rasa ingin tahu tentang cookie, terutama di sini, adalah bahwa ini adalah benar-benar dalam teks-jelas. Tidak ada enkripsi terjadi di sini apapun, dan memang saya menggunakan HTTP saat ini. Salah satu momen favorit kami di CS50, yang sekarang 2 tahun yang lalu, adalah sekitar waktu alat yang disebut Firesheep keluar. Ini adalah software gratis yang dibuat oleh seorang peneliti keamanan sebagai wake-up call bagi masyarakat untuk mengatakan betapa atrociously dilaksanakan mekanisme otentikasi tertentu pada web itu. Jadi untuk beberapa waktu, Facebook hampir seluruhnya melalui HTTP, HTTPS no. Dan bahkan jika Anda tidak tahu bagaimana kripto bekerja, S adalah aman jadi itu berarti ada setidaknya beberapa enkripsi yang terlibat. Facebook memang digunakan untuk mengenkripsi nama pengguna dan password, tetapi segera setelah Anda melihat Anda pokes atau pesan atau feed berita Anda, semua yang tidak terenkripsi. Begitu Gmail sampai hanya setahun atau 2 lalu. Setiap kali Anda login, ya, mereka menggunakan enkripsi yang aman, tetapi setelah itu mereka tidak. Dan mengapa bisa begitu? Mengapa tidak hanya menggunakan kriptografi sepanjang waktu dalam kasus penggunaan seperti ini? Apa itu? Saya pikir saya mendengar sesuatu. [Mahasiswa] Kecepatan. Kecepatan, kan? Ada cara untuk melakukannya. Tetapi jika Anda hanya semacam memikirkan secara logis, jika Anda mengenkripsi sesuatu, Anda harus melakukan setidaknya sedikit lebih banyak pekerjaan. Dalam pset 2 ketika Anda menerapkan Caesar atau Vigenere atau bahkan Crack, hanya mencetak string relatif mudah. Enkripsi dan kemudian mencetak string minimal membutuhkan kerja sedikit lebih. 

 Untuk website super populer seperti Google dan Facebook, jika Anda harus melakukan lebih banyak pekerjaan untuk setiap pengguna untuk setiap halaman web saja yang mereka kunjungi, yang hanya membutuhkan lebih banyak waktu CPU. Dan jika Anda membutuhkan lebih banyak waktu CPU, Anda mungkin perlu lebih banyak server, yang berarti Anda mungkin perlu lebih banyak uang. Dan begitu selama bertahun-tahun ini hanya benar-benar tidak praktek terbaik. Orang-orang akan menggunakan enkripsi SSL hanya ketika mereka perlu. Tapi ternyata, dan karena hal ini sesama dengan Firesheep dibuat super jelas, ketika kalian yang saat ini di Facebook sekarang - Karena penasaran, mari kita lihat apakah Anda akan mengaku. Jika Anda di Facebook sekarang di tab tertentu, bahkan jika itu tidak dikedepankan, adalah URL HTTP atau HTTPS? [Beberapa siswa] S. S? [Tertawa] Oke. Setiap HTTP? Hanya 1? Oke. Jadi kita semua bisa hack bahwa pria akun Facebook sekarang. Untuk sebagian besar ini telah menjadi diaktifkan secara default, setidaknya di beberapa website. Dan cerita panjang pendek, jika lalu lintas web Anda tidak dienkripsi, tidak hanya HTML bolak-balik melintasi WiFis tidak terenkripsi, jadi jangan hal-hal seperti cookies bolak-balik seluruh udara tanpa bentuk enkripsi. Jadi jika Anda hanya memiliki sedikit cerdas pemrograman atau sedikit Googling keterampilan untuk menemukan perangkat lunak bebas yang melakukan ini, yang harus Anda lakukan adalah duduk di Starbucks atau duduk di bandara di mana ada yang umumnya tidak terenkripsi WiFi dan hanya menonton untuk kata kunci seperti Set-Cookie: PHPSESSID atau karena jika Anda memiliki cerdas teknis untuk hanya menonton WiFi untuk semua bit yang mengalir sepanjang udara untuk pola ini, Anda kemudian dapat mengatakan bahwa PHPSESSID orang itu kebetulan bo8dal dan sebagainya. Dan sekali lagi jika Anda cukup teknis cerdas atau memiliki alat yang tepat, Anda kemudian dapat saja mengkonfigurasi ulang peramban Anda sendiri untuk mulai menyajikan bahwa cap tangan ke Facebook.com, dan Facebook hanya akan berasumsi bahwa Anda seorang pria yang karena semua yang mereka tahu tidak siapa Anda tetapi Anda memiliki pengenal yang unik. Jadi jika Anda mencuri pengenal yang unik dan menyampaikannya ke server web Anda sendiri, mereka hanya akan menunjukkan kepada Anda feed berita orang itu atau orang itu pesan atau menusuk. 

Dan saya akan Google sekarang bagaimana mengaktifkan HTTPS untuk Facebook mungkin. Tapi itu benar-benar sesederhana itu. Dan begitu Facebook dan Google dan sejenisnya mendapatkan benar-benar baik ini, tapi mengawasi keluar semua lebih untuk setiap situs yang Anda kunjungi yang tidak menggunakan HTTP dan memiliki beberapa jenis informasi sensitif pada mereka, apakah itu keuangan atau pribadi atau sejenisnya. Jika mereka tidak menggunakan ini, sangat mungkin bisa cookies seperti ini menjadi sangat mudah dicuri dan kemudian ditempa, dan itulah apa yang Firesheep lakukan. Anda tidak perlu menjadi seorang programmer. Yang Anda harus lakukan adalah memiliki koneksi internet, men-download perangkat gratis ini, dan apa yang akan dilakukan adalah Anda log in dan kemudian akan menunjukkan nama Facebook dari semua orang di Sanders, dalam demonstrasi tertentu, di sekitar Anda dan semua yang Anda harus lakukan adalah klik pada nama mereka dan perangkat lunak otomatis proses mengendus cookie, menyajikannya ke Facebook Anda sendiri, dan, voila, Anda login Jadi ini adalah salah satu dari mereka "jangan lakukan ini" resmi. Jika Anda memiliki jaringan rumah Anda sendiri dan Anda ingin bermain-main, dengan segala cara, tapi menyadari hal ini tidak menyeberangi garis pada lingkungan universitas. 

Tetapi tujuan sini benar-benar untuk menekankan tidak bagaimana melakukan ini tapi bagaimana untuk membela terhadap jenis-jenis hal. Dan solusi yang sepele di sini, meskipun itu sendiri adalah cacat, adalah untuk benar-benar mengurangi penggunaan situs manapun yang tidak menggunakan HTTPS terus-menerus. Jadi situs seperti Facebook dan Google semakin memiliki kotak centang di mana Anda dapat memilih untuk hal semacam ini, dan bank telah memiliki hal ini selama bertahun-tahun untuk alasan yang sama. Jadi hanya sedikit faktor takut jika kita bisa. Tapi hanya itu singkatnya. Itu adalah bagaimana server mengingat siapa Anda. Dan segera setelah mereka bisa mengingat siapa Anda, mereka bisa mengingat apa-apa tentang Anda bahwa programmer telah disimpan dalam ini superglobal khusus yang disebut $ _SESSION. Dan untuk pset 7 kita menggunakannya sepele hanya untuk mengingat int, yaitu ID unik dari pengguna yang telah login, sehingga kita tahu mereka sudah berada di sana sebelumnya. Setiap pertanyaan kemudian pada sesi atau cookie atau sejenisnya? Firesheep tidak bekerja dengan baik lagi, dan Anda harus menempatkan komputer Anda ke dalam modus promiscuous khusus sehingga Anda benar-benar mendengarkan untuk lalu lintas selain dirimu. Jadi jika Anda sedang men-download Firesheep, menyadari itu tidak cukup semudah seperti dulu untuk menunjukkan. Baiklah. Dan jangan melakukannya di Sanders. Melakukannya di rumah. Database. Salah satu hal yang kita lakukan di pset 7 sangat sengaja adalah kami memberikan tabel database sampel untuk pengguna yang memiliki beberapa ID pengguna, beberapa nama pengguna, password terenkripsi dan beberapa di dalamnya. Dan seperti yang Anda akan melihat, jika Anda belum melakukannya, Anda akan harus mengubah meja sedikit. Anda akan harus menambahkan beberapa tembolok masing-masing pengguna dalam tabel itu, dan Anda akan harus menambahkan tabel sejarah, meja portofolio, atau mungkin menyebutnya sesuatu yang lain. Tapi dalam hal berpikir tentang bagaimana melakukan hal ini, mari kita membuka alat ini yang kita digunakan pada hari Jumat, tetapi jika tidak terbiasa, alat dilengkapi dengan alat disebut phpMyAdmin yang kebetulan ditulis dalam PHP, tetapi tujuannya dalam hidup, setelah saya login di sini sebagai jharvard dengan merah, adalah untuk memberikan cara user-friendly dari melihat dan mengubah database saya. 

Database bahwa aku berjalan pada alat yang disebut MySQL. Ini sangat populer, dan itu database open source gratis yang luar biasa mudah digunakan, terutama dengan depan berakhir seperti ini. Apa alat ini memungkinkan saya untuk melakukan, misalnya, adalah menyodok sekitar meja. Biarkan aku pergi ke depan dan melakukan hal ini. Pada hari Jumat kami menciptakan sebuah tabel yang disebut siswa yang super sederhana. Itu 3 kolom - id, nama, dan email - dan saya secara manual memasukkan beberapa baris seperti David dan Mike dalam contoh tertentu. Mari kita mengambil sedikit lebih jauh, dan mari kita asumsikan bahwa kita ingin mengingat lebih dari sekedar nama dan email tentang pengguna. Mari saya klik Struktur di sini di bagian atas. Dan lagi, pset yang menuntun Anda melalui langkah-langkah yang diperlukan di sini, jadi jangan khawatir jika beberapa dari hal ini adalah sedikit cepat. Lalu aku akan klik di sini. Aku akan menambahkan beberapa jumlah kolom setelah email karena saya ingin menambahkan sesuatu seperti rumah. Aku lupa untuk merekam rumah siswa. Biarkan saya klik Go, dan sekarang kami memiliki bentuk yang sayangnya agak lebar dari kiri ke kanan, tapi aku akan memanggil nama rumah lapangan, dan kemudian ketik yang sekarang saya harus memilih. Jadi mari kita obrolan singkat tentang berbagai jenis di MySQL karena sementara PHP lemah diketik dan semacam bermain cepat dan lepas dengan jenis, dalam database terutama itu super penting untuk benar-benar menggunakan untuk keuntungan Anda mengetik karena salah satu hal MySQL dan mesin database lain dapat lakukan untuk Anda adalah memastikan bahwa Anda tidak memasukkan data palsu ke dalam database Anda. Ini adalah semacam bebas dari kesalahan pengecekan tersedia untuk Anda. 

Untuk rumah kami jelas tidak ingin itu menjadi int, yang merupakan nilai 32-bit di MySQL. Kami melakukan bicara sebentar pada hari Jumat sekitar varchar, yang merupakan singkatan dari panjang variabel char. Apa ini? Hal ini memungkinkan Anda untuk menentukan bahwa Anda ingin ini menjadi string dari beberapa macam. Anda tidak benar-benar tahu sebelumnya berapa lama itu, sehingga kita sewenang-wenang akan mengatakan nama rumah bisa 255 karakter, tapi Anda bisa pergi dengan 32, 64 - nomor apapun benar-benar. Namun keuntungan dari menggunakan varchar atas lapangan disebut char adalah apa? Hanya intuitif jika saya scroll ke bawah sini, melihat ada char dan varchar ada. Varchar adalah panjang variabel char, char adalah panjang tetap char. Jadi hanya berdasarkan definisi itu, apa keuntungan atau kerugian dari masing-masing? Dengan kata lain, siapa yang peduli tentang perbedaan, atau mengapa Anda harus peduli? 

Ya. [Mahasiswa] VARCHAR memiliki fleksibilitas lebih tetapi membutuhkan lebih banyak memori. Baik. Varchar mencakup lebih - Mari kita lihat. Saya tidak yakin apakah saya dengar itu. Dapatkah Anda mengatakan bahwa sekali lagi? [Mahasiswa] Aku berkata varchar mungkin memiliki lebih banyak fleksibilitas, tetapi tidak memakan banyak memori. Menarik. Oke. Varchar mungkin memberi Anda lebih banyak fleksibilitas, tetapi membutuhkan lebih banyak memori. Yang terakhir ini belum tentu benar. Hal ini tergantung pada konteks, tapi mari kita kembali ke itu. 

[Respon siswa terdengar] Tepat. Ini benar-benar terjadi bahwa char biasanya akan menggunakan lebih banyak memori karena char, seperti di C, seperti string, itu sebuah array dari karakter. Jadi jika Anda mengatakan bidang char panjang 255, database secara harfiah akan memberi Anda 255 karakter. Dan jika rumah akhirnya menjadi Mather dan 6 karakter total, Anda membuang-buang lebih dari 200 karakter. 

Jadi varchar efektif hanya menggunakan sebagai karakter sebanyak yang diperlukan sampai jumlah maksimum. Tapi harga yang Anda bayar sebenarnya kinerja, berpotensi. Jika Anda tahu sebelumnya bahwa semua string Anda akan menjadi 8 karakter - Misalnya, anggaplah bahwa Anda memerlukan password dengan panjang 8 - terbalik menggunakan field char pada kesempatan, meskipun tidak sering, adalah untuk menentukan panjang tetap untuk sesuatu seperti sandi karena sekarang database dapat menjadi lebih pintar. Jika ia tahu bahwa setiap bidang char, setiap string dalam kolom yang sama panjang, Anda mendapatkan kembali fitur akses acak. Anda dapat melompat-lompat di antara bidang arang berbagai tabel database Anda karena memikirkan database sebagai baris dan kolom. Jadi jika setiap salah satu dari string adalah panjang yang sama, Anda tahu bahwa yang pertama adalah pada byte 0, yang berikutnya adalah pada byte 8 dan kemudian 16 dan kemudian 24 dan sebagainya. Jadi jika semua string adalah dari panjang yang sama, Anda bisa melompat-lompat jauh lebih efisien. Sehingga dapat menjadi manfaat dalam hal kinerja, tetapi biasanya Anda tidak memiliki kemewahan untuk mengetahui di muka, sehingga varchar adalah cara untuk pergi. Berikut detail lain yang bahkan berlari ke Facebook akhirnya. Ints besar, dan kami semacam menggunakannya secara default setiap saat kita ingin nomor, tapi itu hanya 32 bit. 

Dan meskipun Facebook tidak cukup memiliki 4 miliar pengguna sekarang, pasti ada beberapa orang di luar sana dengan beberapa account atau rekening yang telah dibuka dan kemudian ditutup, dan begitu Facebook sendiri saya percaya beberapa tahun yang lalu harus transisi dari int untuk, seperti yang tepat disebut, bigint, yang hanya 64 bit sebagai gantinya. Jadi ini juga merupakan keputusan desain. Anda akan menjadi luar biasa beruntung jika proyek akhir Anda berubah startup, memiliki 4 miliar dan 1 pengguna, memberi atau mengambil, dalam hal ini menggunakan ints mungkin agak rabun. Namun pada kenyataannya, pengguna meja Anda mungkin baik dengan ints. Tapi untuk sesuatu seperti pset 7, seperti tabel sejarah Anda, Anda mungkin memiliki ribuan, jutaan pengguna jika Anda berkembang menjadi etrade.com. Jadi sementara Anda mungkin tidak memiliki lebih dari 4 miliar pengguna, para pengguna Anda memiliki mungkin memiliki lebih dari 4 miliar transaksi dari waktu ke waktu - membeli dan menjual, dan hal dalam sejarah mereka. Jadi jika Anda mengantisipasi - lagi, ini adalah masalah yang baik untuk memiliki jika Anda memiliki banyak data - jika Anda mengantisipasi data yang melebihi ukuran int, pergi dengan sesuatu seperti bigint adalah arah tidak cukup sering diadopsi oleh desainer karena orang sosok yang tidak akan menjadi masalah, tapi ini mudah untuk memilih sesuatu yang lebih besar dari itu. Desimal kita menggunakan di pset 7, yang menentukan tetap presisi sehingga Anda dapat menghindari masalah yang melibatkan mengapung dan ganda dan real dan sejenisnya. 

Dan kemudian ada beberapa bidang lain di sini. Kami akan melambaikan tangan kami pada mereka sampai batas tertentu. Tapi tanggal, waktu semua memiliki format yang ditentukan dalam MySQL, dan keuntungan dari tanggal menyimpan sebagai tanggal dan tidak varchars berarti bahwa database benar-benar dapat memformat mereka ke dalam format yang berbeda, apakah format AS atau format Eropa atau sejenisnya - namun Anda inginkan - jauh lebih efisien daripada jika hanya beberapa varchar generik. Dan kemudian ada beberapa biner lainnya, varbinary, gumpalan. Ini adalah benda besar biner, dan Anda juga dapat menyimpan data biner serta data geometris dalam database. Tapi bagi kita, kita biasanya akan peduli ints dan varchars dan sejenisnya. Mari kita selesaikan contoh ini dengan rumah. Rumah aku akan sewenang-wenang mengatakan akan 255 karakter. Kemudian nilai default kita bisa melakukan ini. Kita bisa secara default menempatkan setiap orang di Mather House misalnya. Itulah bagaimana kita bisa menentukan bahwa database harus memastikan bahwa seseorang selalu memiliki nilai. Tapi aku akan meninggalkan itu menjadi. Bahkan, bagi orang-orang yang hidup dari kampus dan tidak di rumah, mungkin aku benar-benar ingin menentukan bahwa nilai default untuk rumah adalah NULL, dan kemudian saya perlu memeriksa kotak ini dan memberitahu database apa-apa jika rumah pengguna adalah NULL. 

Sekali lagi, ini merupakan salah satu mekanisme pertahanan Anda dapat menempatkan di tempat sehingga Anda bahkan tidak harus memasukkannya ke dalam kode PHP Anda tentu. Database akan memastikan bahwa hal-hal yang tidak atau NULL. Dan kemudian terakhir, Atribut. Tak satu pun dari ini adalah benar-benar relevan. Biner, unsigned - tidak satupun dari mereka adalah relevan dengan varchar. Index. Apakah ada yang tahu atau ingat atau memiliki menebak seperti apa indeks adalah untuk sesuatu seperti rumah? Hal ini juga sebenarnya merupakan keputusan desain yang penting dan relatif mudah. Bagi mereka yang belum melihatnya, pada hari Jumat kami berbicara singkat tentang kunci primer. Dalam tabel database, primary key adalah bidang atau kolom yang secara unik mengidentifikasi baris dalam tabel. Jadi dalam tabel saat ini kita memiliki ID, kita memiliki nama dan email. Mana yang adalah kandidat terbaik untuk menjadi primary key, Peran yang adalah untuk secara unik mengidentifikasi baris? Mungkin ID. Diperdebatkan, kita juga bisa menggunakan apa meskipun? Mungkin Anda bisa menggunakan email karena dalam teori itu unik kecuali orang yang berbagi account email. Tetapi kenyataannya adalah bahwa jika Anda menggunakan ID numerik seperti 1234, itu hanya 32 bit, sedangkan alamat email bisa ini banyak byte atau byte ini banyak. Jadi dalam hal efisiensi untuk pengidentifikasi unik, itu cenderung menjadi praktek yang baik hanya untuk menggunakan int bahkan jika Anda memiliki beberapa calon string yang Anda dibilang bisa menggunakan. 

Untuk sesuatu seperti rumah, ini seharusnya tidak menjadi primary key karena kemudian hanya 1 orang bisa hidup di Mather dan 1 orang di Currier dan sejenisnya. Demikian pula, hal ini tidak harus unik. Perbedaan antara primer dan unik adalah bahwa dalam kasus meja kami saat ini, ID akan primer tetapi email tidak utama untuk alasan kami hanya disebutkan - kinerja - tetapi masih harus unik. Jadi Anda masih dapat menegakkan keunikan tanpa membuat klaim bahwa itu adalah bidang utama super penting. Tapi yang satu ini cukup membantu: Index. Jika Anda tahu di muka untuk proyek akhir Anda, untuk pset 7, atau secara umum, bahwa rumah lapangan akan menjadi sesuatu yang Anda cari pada banyak menggunakan kata kunci pilih atau sesuatu yang lain, maka Anda preemptively dapat memberitahu database untuk bekerja sihir dan pastikan bahwa hal itu menciptakan dalam memori setiap struktur data yang diperlukan mewah untuk mempercepat pencarian berdasarkan rumah. Mungkin akan menggunakan tabel hash, mungkin itu akan menggunakan linked list. Pada kenyataannya, ia cenderung menggunakan pohon, sering struktur yang disebut B-tree - bukan pohon biner tetapi B-pohon - yang merupakan pohon yang sangat luas yang mungkin Anda lihat di kelas seperti CS124, data struktur kelas. Tetapi dalam waktu singkat, Anda tidak perlu khawatir tentang hal itu ketika menggunakan perangkat lunak database cerdas. Anda hanya bisa mengatakan itu, "Indeks bidang ini sehingga saya dapat mencari pada lebih efisien." 

Jika Anda meninggalkan dari ini dan Anda mencoba untuk mencari semua orang dalam database yang tinggal di Mather, itu akan berpindah ke pencarian linear. Dan jika Anda punya 6.000 undergrads hidup semua di rumah sebagian, Anda akan mencari seluruh tabel untuk menemukan Matherites, sedangkan jika Anda mengatakan Index, mudah-mudahan itu akan menjadi sesuatu yang dekat dengan pencarian logaritmik untuk menemukan orang-orang macam siswa. Ini hanyalah sebuah fitur gratis untuk menghidupkan, meskipun tidak datang dengan harga beberapa jumlah ruang. Terakhir, auto-increment, bidang AI, yang hanya berarti jika int dan Anda tidak ingin peduli untuk kenaikan itu sendiri setiap kali ada pengguna baru, periksa, dan setiap pengguna yang akan dimasukkan secara otomatis akan mendapatkan ID baru. Mari kita klik Simpan, dan sekarang mari kita menemukan kesalahan dengan desain ini. Jika saya pergi ke People, perhatikan bahwa Mike dan rumah saya adalah NULL. Saya bisa menggunakan phpMyAdmin untuk mengedit ini secara manual. Aku bisa pergi di sini dan ketik Mather dan kemudian tekan Enter, dan sekarang perhatikan tabel berbeda. Tapi perhatikan aku bisa melakukan sesuatu yang lain juga. ID David adalah 1, sehingga phpMyAdmin lagi adalah hanya sebuah alat administratif; ini bukan sesuatu yang pengguna Anda pernah akan melihat. Jadi jika saya bukan klik tab SQL di bagian atas - dan lagi, pset 7 akan memperkenalkan Anda ke lebih dari pertanyaan - Saya secara manual bisa mengeksekusi perintah bahasa query SQL terstruktur Pengguna UPDATE SET rumah = 'Pfoho' WHERE id = 1. Ini query SQL, baik cukup, cukup dibaca dari kiri ke kanan. Memperbarui tabel pengguna, setel field yang disebut rumah untuk Pfoho mana ID pengguna adalah 1. Atau aku bahkan bisa dilakukan di mana email = 'malan@harvard.edu'. Selama yang secara unik mengidentifikasi saya, yang akan bekerja dengan baik. Tapi ID cenderung kinerja yang lebih tinggi, jadi mari kita lakukan itu. Mari kita klik Go. Oke, lecture.users tidak ada. Apa kesalahan saya? Apa meja sebenarnya disebut di sini? Ini disebut siswa hanya karena itulah apa yang kita lakukan di sini di sebelah kiri atas. Ini disebut siswa, bukan pengguna. Jadi klik Go sekarang. 1 baris terpengaruh. Permintaan membutuhkan 0,01 detik. Jika saya klik Browse sekarang, sekarang tinggal di Malan Pfoho. Jadi itulah rasa lain SQL, tetapi pset akan memandu Anda melalui sedikit lebih dari itu. 

Ada keputusan yang bodoh Aku sudah dibuat di sini. Saya berpendapat bahwa ini desain database tidak efisien karena banyak orang saya tambahkan ke meja siswa, lebih dari kita saya mulai menambahkan, lebih dari TF saya mulai menambahkan, kita akan mulai melihat apa yang redudansi dalam tabel ini? 

Ya. [Mahasiswa] Melihat bahwa itu pada siswa, kita menggunakan yang sama [tidak terdengar] Sama - Kanan, tepatnya. Jadi jika 400 orang tinggal di Mather, memberi atau mengambil, akhirnya tabel ini akan memiliki 400 baris yang mengatakan "Mather," "Mather," "Mather," "Mather," "Mather." Kita membuang-buang semua byte, dan ada beberapa takeaways sana. 1, ada kasus di mana sudut gila jika seseorang membayar banyak uang dan mengganti nama Mather, sekarang kita harus mengubah tabel database kami seluruh. Itu tidak akan sering terjadi, meskipun Pfoho pernah disebut North House 15 tahun yang lalu, sehingga terjadi. Tapi itu tidak semua yang menarik. Lebih menarik daripada kasus sudut seperti itu yang perlu untuk memperbarui data dalam jumlah besar untuk database adalah mengapa Anda menyimpan Mather lagi dan lagi dan lagi dan lagi? Itu banyak karakter, 6 karakter. Tidak bisa kita lakukan lebih baik dari itu, terutama untuk Pforzheimer? Tentunya kita bisa berbuat lebih baik dari itu banyak karakter. Mengapa tidak hanya mengasosiasikan pengenal unik dengan setiap rumah dan toko yang untuk setiap pengguna? Jadi mari kita coba ini. Daripada hanya menggunakan tabel siswa, biarkan aku pergi ke database kuliah saya di sini di sebelah kiri atas. Perhatikan di sini dikatakan Buat tabel. Mari saya membuat tabel baru yang disebut rumah. Jumlah kolom akan menjadi 2. Enter. Sekarang saya memiliki 2 bidang. Aku akan menyebutnya nama, dan itu akan menjadi varchar dengan panjang 255, 

tapi itu cukup sewenang-wenang. Mari saya menempatkan ini di sini dengan konvensi. Sehingga menempatkan ID di sini. Mari kita beri setiap rumah pengenal yang unik. Mari kita beri setiap rumah nama. Mari kita menetapkan bahwa pengenal akan unsigned hanya dengan konvensi untuk hanya menggunakan angka positif. Mari kita pergi ke depan dan memberikan bidang ini auto-increment untuk saat ini. Dan apakah kita perlu apa-apa lagi? Mari kita pergi ke depan dan klik Save. Sekarang saya punya tabel kedua. Perhatikan sebagai samping ini adalah perintah SQL sedikit samar bahwa Anda akan harus mengetik secara manual jika tidak menggunakan alat administrasi seperti phpMyAdmin. Jadi alasan lain kita menggunakannya. Ini semacam mengagumkan berguna pedagogis karena Anda dapat mengklik sekitar dan mencari tahu bagaimana segala sesuatu bekerja dengan hanya menyalin dan menyisipkan apa yang phpMyAdmin lakukan. Tapi perintah tabel Buat apa hanya dieksekusi, dan di sini adalah meja saya. Biarkan aku pergi ke depan sekarang dan menggunakan SQL mentah daripada menyederhanakan dengan mengklik tab Insert. Biarkan saya lakukan INSERT INTO rumah, dan aku akan mengatakan nama rumah akan memiliki nilai 'Mather'. Itu saja. Sintaks ini sedikit lebih samar. Ini adalah nama dari bidang yang ingin kita masukkan. Ini adalah nilai-nilai yang ingin kita masukkan ke dalam bidang-bidang. Biarkan saya klik Go. 1 baris disisipkan mengambil 0,02 detik. Biarkan saya klik Browse sekarang. 

Perhatikan jika saya klik Browse, ada Mather, yang ID adalah dengan otomatisasi nomor 1. Biarkan aku melakukan satu lagi. Biarkan aku pergi ke tab SQL. INSERT INTO rumah. Nama rumah akan memiliki nilai Pfoho dan sebagainya. Go. Dan saya bisa terus melakukan hal ini lagi dan lagi dan lagi. Atau jika Anda bosan menggunakan phpMyAdmin, Anda hanya dapat menggunakan tab Insert dan tidak perlu mengetikkan SQL mentah. Anda hanya bisa bang itu keluar lebih cepat dengan mengetik, misalnya, Currier, Enter, dan sekarang jika kita klik Browse, ada Currier dengan ID dari 3. Jadi ini adalah apa yang kita maksud dengan auto-increment. Tapi sekarang kita harus memperbaiki sesuatu pada siswa. Pada siswa apa yang harus tipe data dari bidang rumah sekarang bisa? Ini harus menjadi int, kan? Jadi tujuan di sini adalah untuk faktor luar, atau dikenal sebagai menormalkan, tabel sehingga kita tidak menyimpan informasi secara berlebihan dalam salah satu tabel saya. Dan lagi, jalan kami berada di sini akan mengatakan Mather, Mather, Mather, Mather, Pfoho, Pfoho, Pfoho, Pfoho, yang sangat berlebihan dalam hal pemborosan dari karakter. Jadi biarkan aku pergi ke depan dan mengubah ini dengan mengklik Struktur, dan biarkan aku pergi ke depan dan cek lapangan rumah, klik Ubah, dan sekarang aku akan mengubah ini menjadi sebuah int. 255 tidak lagi relevan. Biarkan aku pergi ke depan dan mengatakan bahwa tidak apa-apa jika masih NULL. Simpan. Sekarang siswa tabel telah diubah dengan sukses, dan perhatikan lagi rumah adalah int. Sebagai samping, mengabaikan nomor dalam tanda kurung ketika datang ke ints. 

Ini untuk alasan warisan. Kembali pada hari ketika Anda tidak memiliki GUI, Anda malah memiliki lingkungan baris perintah, 10 dan 11 masing-masing ditentukan berapa banyak karakter yang Anda harus menunjukkan di jendela terminal untuk benar-benar menampilkan bidang. Ini tidak ada hubungannya dengan panjang bit dari lapangan yang sebenarnya, jadi kami hanya akan mengabaikan bahwa untuk saat ini. Sekarang aku harus pergi ke dalam tabel ini. Dan jika Daud tinggal di Mather, rumah tidak harus 0, yang merupakan nilai default int paling dekat dengan NULL. Dia harus tinggal di rumah 1. Mari kita sewenang-wenang mengatakan bahwa Mike tinggal di Pfoho, sehingga rumah nomor 2. Sekarang meja saya terlihat sedikit lebih samar. Tapi mempertimbangkan efisiensi. Saya sekarang menggunakan hanya 32 bit untuk mengidentifikasi rumah, yang berarti hanya ada 1 definisi kanonik rumah saya Mather dan Pfoho dan itu di meja rumah. Jadi jika saya ingin bergabung sekarang tabel ini, pikirkan cara ini. Di sini saya punya meja murid-murid saya, dan di sisi kanan ada angka-angka, 1 dan 2. 1 adalah Mather, 2 adalah Pfoho. Kami memiliki angka-angka yang sama pada tabel lainnya, yang disebut rumah, 1 dan 2 dan 3 untuk mereka 3 rumah. Apa yang kita sekarang ingin lakukan adalah memiliki kemampuan dalam kode, PHP dan SQL, untuk semacam bergabung kembali tabel ini, di mana jika ini adalah para siswa dan ini adalah rumah-rumah, kami ingin entah bagaimana menggabungkan mereka sehingga 1 baris dengan 1, 2 baris dengan 2, dan sehingga kita bisa mencari tahu di mana David dan di mana Mike dan di mana orang lain hidup. Untuk melakukan hal ini kita dapat mengeksekusi query SQL seperti berikut ini. SELECT * FROM siswa BERGABUNG rumah ON - Dan sekarang apa bidang yang kita ingin bergabung pada? Jadi students.house = houses.id. 

Sebuah samar sedikit, tetapi bagian ini secara harfiah berarti membuat tabel sementara baru itulah hasil dari bergabung dengan mahasiswa dan rumah-rumah. Dan bagaimana Anda ingin menggabungkan ujung jari saya di sini? Set 'lapangan rumah sama dengan rumah' para siswa ID lapangan. Dan jika saya sekarang klik Go, aku kembali persis apa yang saya berharap untuk. David adalah di Mather, Mike adalah di Pfoho, dan saya juga melihat pengidentifikasi unik. Tapi intinya adalah sekarang saya punya tabel lengkap. Dan jadi takeaway di sini untuk pset 7 atau benar-benar untuk tugas akhir: Jika Anda menemukan bahwa Anda menyimpan setiap bagian dari informasi yang berlebihan, apakah itu rumah, mungkin itu sebuah kota, negara, dan ZIP mana ZIP dapat biasanya tetapi tidak selalu digunakan sebagai identifikasi unik, pergi melalui latihan mental dan kemudian dengan sesuatu seperti phpMyAdmin anjak bahwa data umum karena terutama karena website Anda akan lebih baik digunakan dan lebih populer, ini adalah bagaimana Anda memastikan bahwa segala sesuatu adalah super cepat, dengan memberikan database sebagai petunjuk sebanyak keunikan mungkin. Itu banyak. Ada pertanyaan? Baiklah. Mari kita istirahat 5 menit di sana dan berkumpul kembali. Baiklah. Berikut ini adalah contoh yang digunakan beberapa tahun yang lalu ketika saya mengambil CS161, yang merupakan kelas sistem operasi di kampus yang dikenal sebagai menakjubkan tetapi jumlah gila kerja, dan itu benar-benar berfokus pada beberapa tingkat rendah masalah yang timbul dalam sistem operasi dan juga bahkan di dalam dunia database. 

Kisah yang diceritakan oleh profesor saya, Margo Seltzer, tahun itu adalah sebagai berikut. Misalkan Anda memiliki asrama lemari es kecil untuk Anda dan teman sekamar Anda dan Anda berdua benar-benar seperti susu. Jadi kamu pulang dari kelas satu hari, teman sekamar Anda belum ada, Anda membuka lemari es, dan Anda menyadari, "Oh sialan, kita keluar dari susu." Jadi Anda menutup lemari es, Anda berjalan di seberang jalan ke CVS dan mendapatkan di garis semakin panjang untuk membeli susu di CVS. Sementara itu, teman sekamar Anda pulang dari kelasnya, datang ke kamar, membuka lemari es benar-benar ingin susu, membuka lemari es dan, "Sial, tidak ada susu." Jadi dia menutup lemari es, berjalan keluar pintu, dan pergi ke ABP atau di tempat lain selain CVS di mana Anda tidak akan berbenturan satu sama lain untuk pergi mendapatkan susu. Tentu saja beberapa menit kemudian, Anda berdua bisa kembali ke rumah dan sekarang Anda memiliki susu dua kali sebanyak yang Anda benar-benar ingin. Dan menjadi susu, sekarang itu akan pergi buruk karena Anda suka susu tetapi Anda tidak benar-benar seperti susu, jadi sekarang Anda memiliki terlalu banyak susu, sehingga akan asam. Ini adalah situasi yang mengerikan, mengerikan. Apa yang bisa memecahkan masalah ini jika Anda adalah rumah teman sekamar pertama? Ya. [Mahasiswa] Anda harus telah meninggalkan catatan. [Tertawa] Baik. Anda harus telah meninggalkan catatan. Anda harus telah menempatkan catatan Post-it atau sejenisnya berkata, "Pergi untuk susu," dan kemudian teman sekamar Anda akan konseptual telah terkunci benar-benar melakukan hal itu. Atau Anda bisa pergi 1 langkah lebih lanjut. Anda benar-benar bisa mengunci lemari es dengan beberapa jenis gembok, dan sekarang teman sekamar Anda benar-benar akan terkunci keluar dari lemari es. Jika kita generalisasi kembali ke pemrograman, Anda hampir bisa memikirkan kulkas sebagai semacam variabel atau struct, semacam wadah untuk informasi. Masalahnya fundamental di sini adalah bahwa Anda berdua diizinkan untuk memeriksa atau membaca keadaan ini struktur data, tetapi Anda dilihat itu pada waktu yang berbeda dan belum Anda berdua membuat keputusan berdasarkan pada keadaan dunia pada saat-saat yang berbeda dalam waktu. Jadi Anda telah mengunci kulkas, Anda akan setidaknya menghindari teman sekamar Anda dari yang telah mampu memeriksa keadaan dunia, sehingga dia tidak bisa membuat keputusan yang sama. Jadi database, ternyata, memiliki masalah ini terus-menerus. 

Mari kita lihat apakah kita dapat membangun sebuah skenario. Misalkan Anda semacam orang jahat dan Anda pergi ke Bank of America atau salah satu dari tempat-tempat lain di alun-alun yang memiliki sisi beberapa ATM berdampingan, dan entah bagaimana Anda menemukan cara untuk menduplikasi kartu ATM - tidak terlalu sulit. Ini hanya strip magnetik. Dan jadi apa yang ingin Anda coba lakukan adalah memainkan permainan ini dimana Anda menempatkan 1 kartu ke 1 mesin, kartu lain ke mesin lain, dan Anda pada dasarnya ingin mencoba untuk menarik uang secara bersamaan, karena bayangkan cerita yang berlangsung sebagai berikut. Mesin di sebelah kiri mengambil kartu Anda dan PIN Anda, dan kemudian Anda berkata, "Berikan saya $ 100." ATM ini diprogram untuk pertama kali melakukan pilih pada database-nya atau setara - apa database itu menggunakan - untuk melihat apakah pengguna ini memiliki setidaknya $ 100 dalam account nya? Jika demikian, maka meludahkan $ 100 dan kurangi $ 100 dari keseimbangan mereka. Tapi tentu saja jika ada beberapa mesin di sini atau berbagai cara memeriksa keadaan dunia itu, lemari besi bank, untuk melihat berapa banyak uang yang Anda miliki, misalkan hanya kebetulan mesin di sebelah kiri dan kanan keduanya menanyakan hal itu pada kira-kira saat yang sama dalam waktu. 

Dan ini tentu bisa terjadi. ATM adalah komputer hari ini. Jadi jika mesin di sebelah kiri berkata, "Ya, Anda memiliki setidaknya $ 100," Sementara mesin di sebelah kanan berkata, "Ya, Anda memiliki setidaknya $ 100," maka keduanya melanjutkan untuk menyelesaikan program-program mereka dan benar-benar meludahkan $ 100 dan berkata, "Sebelumnya Anda harus $ 200." "Biar memperbarui variabel sekarang menjadi $ 100 tersisa di rekening." Tetapi jika keduanya telah memeriksa saldo account Anda dan menemukan bahwa itu $ 200 dan keduanya kemudian melakukan matematika dan mengatakan 200 - 100, mesin telah berpotensi memuntahkan dua tagihan $ 100 dalam setiap mesin, tapi mereka hanya diperbarui saldo jumlah akun Anda menjadi $ 100. Dengan kata lain, Anda telah mengambil keluar $ 200, tetapi karena mereka memeriksa keadaan dunia secara bersamaan dan kemudian membuat keputusan berdasarkan nilai tersebut, mereka tidak mungkin melakukan matematika pada akhirnya benar. Jadi dalam situasi bank yang terlalu Anda benar-benar ingin memiliki semacam lockout sehingga segera setelah Anda sudah memeriksa keadaan beberapa variabel yang benar-benar penting, seperti saldo rekening, jangan biarkan orang lain membuat keputusan berdasarkan itu sampai Anda selesai melakukan hal Anda, di mana dalam hal ini Anda adalah ATM di sebelah kiri. Kunci orang lain keluar. Anda benar-benar dapat mencapai efek ini dalam beberapa cara yang berbeda. 

Cara termudah di MySQL adalah garis SQL yang kami berikan kepada Anda dalam spesifikasi masalah set yang terlihat persis seperti ini. Masukkan ke dalam tabel - apa pun namanya - id, simbol, dan berbagi, sejumlah saham, nilai-nilai berikut, misalnya. Jika Anda belum membaca spec belum, ini adalah contoh yang melibatkan bagaimana Anda pergi tentang membeli 10 saham dari saham penny untuk Presiden Skroob, ID pengguna yang akan terjadi pada nomor 7? Ini mengatakan INSERT INTO tabel berikut id, simbol, dan jumlah saham dari 7, 'DVN.V', dan 10. Tapi - tapi, tapi, tapi - baris kedua adalah yang penting. ON duplikat saham UPDATE KEY = saham + VALUES (saham). Jadi benar-benar samar tampak pada pandangan pertama. Tapi fakta bahwa ini query SQL, meskipun membungkus ke 2 baris, adalah 1 query yang panjang, itu berarti itu atom dalam arti bahwa permintaan ini baik akan dieksekusi semua bersama-sama atau tidak sama sekali. Dan dengan definisi MySQL, itulah cara mereka menerapkan query ini. Ini adalah dengan definisi di manual dijamin untuk mengeksekusi sekaligus atau tidak sama sekali. Motivasi untuk ini adalah sebagai berikut. Jika dalam kasus ini Anda mencoba untuk membeli 10 saham, itu semacam cerita yang sama seperti susu, itu semacam cerita yang sama seperti ATM. 

Jika Anda membuat kesalahan dengan tidak menggunakan sintaks ini melainkan memilih dari database untuk melihat berapa banyak saham ini saham penny apakah Presiden Skroob miliki, dan kira dia memiliki 10 saham, dan kemudian beberapa detik kemudian Anda kemudian melakukan pernyataan UPDATE, yang merupakan pernyataan lain di SQL yang mengatakan pergi ke depan dan menambahkan 10 saham lebih sampai 10 saat ini sehingga idealnya total adalah 20, masalahnya adalah karena dalam sistem database saat ini dan karena di komputer saat ini Anda memiliki beberapa prosesor, beberapa core - dengan kata lain, komputer harfiah dapat melakukan beberapa hal sekaligus - tidak ada jaminan bahwa Anda SELECT dan UPDATE Anda dalam hal ini akan terjadi kembali ke belakang. Jadi skenario buruk akan Anda lakukan SELECT untuk melihat berapa banyak saham ini saham penny tidak Skroob miliki, dan kemudian hanya dengan kesempatan lain query database dijalankan - mungkin Skroob dalam jendela browser lain mencoba untuk membeli 10 saham di jendela lain sama sekali, seperti ATM - dan anggaplah bahwa permintaan yang lain mendapat di antara SELECT dan UPDATE. Ini bisa menjadi kasus yang Skroob sekarang kehilangan beberapa jumlah saham karena proses lain memeriksa keadaan dunianya, atau ia mendapat saham lebih banyak daripada yang seharusnya. Kami tidak akan masuk ke ihwal apa yang alur cerita tertentu akan, tapi intinya adalah jika Anda harus memeriksa nilai variabel dan kemudian membuat keputusan, jika ada risiko orang lain melakukan sesuatu di antara 2 pernyataan, seperti yang dapat terjadi dalam sistem multiprosesor, dalam sistem multicore, komputer dengan kemampuan untuk melakukan hal-hal sekaligus, hal-hal buruk bisa terjadi seperti rekening bank yang didebet salah, membeli susu dua kali lebih banyak, atau dalam hal ini jumlah saham yang salah. Tapi ada cara yang lebih mudah untuk berpikir tentang hal ini. 

Ternyata SQL juga mendukung, jika Anda mengkonfigurasi meja Anda dengan benar, sesuatu yang disebut transaksi, yang saya berpendapat sebenarnya lebih mudah untuk memahami dari ini, tapi itu bukan 1-kapal, sehingga itu sebenarnya sedikit lebih terlibat. Ada secara harfiah pernyataan di SQL disebut TRANSAKSI MULAI. Sama seperti ada SELECT, UPDATE, INSERT, DELETE, dan JOIN dan sekelompok orang lain, ada kata kunci seperti TRANSAKSI MULAI. Dan apa yang Anda kemudian lakukan dalam konteks pset 7 - Anda tidak perlu melakukan ini untuk pset 7; itu secara eksplisit menyangkal tidak diperlukan, tapi untuk proyek akhir ini dapat berguna - jika Anda memanggil query dari START TRANSAKSI dan kemudian permintaan lain dan kemudian lain permintaan dan kemudian yang lain, yang lain, dan yang lain, pertanyaan tersebut sebenarnya tidak akan dijalankan sampai Anda sebut pernyataan SQL COMMIT, di mana titik, apakah itu 2 pernyataan atau 20 pernyataan, mereka semua akan dijalankan sekaligus, yang berarti tidak ada orang lain sengaja dapat membeli susu terlalu banyak atau debit terlalu banyak uang atau membeli saham terlalu banyak karena semua pertanyaan Anda akan mengeksekusi kembali untuk kembali ke kembali ke belakang. Dan ini super penting, terutama ketika Anda sedang melakukan sesuatu seperti ini. Ini adalah contoh yang sewenang-wenang yang mengatakan mari kita memperbarui rekening bank dengan menetapkan keseimbangan sama dengan saldo - $ 1000 dimana nomor rekening 2. Dan kemudian pernyataan kedua sekarang mari kita menyetor bahwa $ 1000 ke orang lain rekening bank yang nomor rekening adalah 1. 

Dengan kata lain, ini adalah contoh sempurna dari mana Anda ingin memastikan bahwa kedua pernyataan terjadi atau tidak sama sekali karena jika pelanggan akan mendapatkan kacau dan Anda akan mengambil uang mereka dan tidak menyetorkannya tempat lain, atau bank akan mendapatkan kacau di mana Anda akan menyimpan uang namun tidak benar-benar mengurangi dari akun pengguna. Jadi Anda ingin keduanya untuk melaksanakan bersama-sama. Jadi masuk ke dalam transaksi dunia. Jadi itu sesuatu yang perlu di belakang pikiran Anda, tidak begitu banyak untuk tujuan hanya sebuah proyek akhir, tetapi jika Anda ingin mengambil tugas akhir Anda di suatu tempat, jika Anda ingin untuk memulai beberapa perusahaan di sekitarnya, jika Anda ingin memecahkan beberapa masalah kelompok mahasiswa di kampus dan benar-benar memiliki website, hidup aktif, ini adalah semacam bug halus yang dapat timbul jika Anda tidak cukup memikirkan apa yang bisa terjadi jika 2 orang mencoba untuk mengakses situs Web Anda di harfiah saat yang sama dalam waktu, dimana permintaan mereka dinyatakan mungkin bisa terjalin. 

Siap untuk beberapa JavaScript, teaser daripadanya? Ini adalah bahasa terakhir kami untuk semester. Baiklah. Untungnya, JavaScript terlihat sangat, sangat, sangat mirip dengan 2 bahasa, C dan PHP, sudah kita lakukan sejauh ini. Tidak ada JavaScript di pset 7, tapi itu alat yang sangat berguna ketika datang untuk melakukan web berbasis proyek akhir atau benar-benar hanya pemrograman web lebih umum. Jadi gambaran singkat dari sesuatu yang disebut DOM. Berikut ini adalah halaman web super sederhana yang benar-benar hanya mengatakan halo, dunia baik dalam judul dan dalam tubuh. Sebagai indentasi telah menyarankan untuk beberapa waktu, memang ada hirarki ke halaman web. Saya bisa menggambar potongan yang sama dari HTML sebagai pohon, berpikir kembali ke diskusi kita tentang struktur data dalam C, sebagai berikut. Saya punya beberapa simpul akar khusus yang disebut node dokumen, dan kita akan melihat analog ini dalam JavaScript hanya dalam beberapa saat. Anak pertama dan anak tunggal dari bahwa dalam kasus ini adalah tag HTML. Tidak ada pemetaan langsung doctype tersebut. Itu adalah hal yang istimewa, jadi kami hanya harus mengabaikannya ketika datang ke DOM, Document Object Model ini pohon. Perhatikan bahwa tag HTML, yang saya telah digambarkan sebagai persegi panjang sewenang-wenang, memiliki 2 anak: kepala dan tubuh. 

Mereka sama-sama digambarkan sebagai persegi panjang. Hal ini bermakna bahwa pictorially kepala di sebelah kiri tubuh. Implikasinya adalah bahwa kepala datang pertama di pohon. Jadi sebenarnya ada yang memesan ke sebuah pohon ketika Anda menggambar seperti ini, meskipun bentuk dan entah apa lagi yang sewenang-wenang. Kepala Sementara itu memiliki seorang anak tunggal yang disebut title, dan judul sebenarnya memiliki anak sendiri, yaitu "halo, dunia", yang saya sengaja menarik sebagai oval sini untuk membuatnya sedikit berbeda dari persegi panjang. Ini persegi panjang adalah elemen, sedangkan halo, dunia benar-benar node teks. Jadi itu adalah simpul di pohon, tapi itu jenis yang berbeda dari node jadi saya menarik itu sewenang-wenang berbeda. Demikian pula apakah tubuh memiliki anak disebut halo, dunia juga, begitu berbeda simpul meskipun mereka kebetulan teks yang sama, tapi aku sudah ditarik menggunakan bentuk yang sama. Jadi siapa yang peduli? Nah, apa yang bagus tentang HTML adalah bahwa hal itu memiliki sifat hirarkis. Dan apa yang bagus tentang JavaScript dan khususnya perpustakaan yang tersedia secara bebas dan populer seperti jQuery, Anda dapat menavigasi struktur pohon begitu luar biasa mudah. Salah satu hal yang kita lakukan di C dengan pointer dan pohon melintasi dan recursing pada node anak kiri ke anak kanan, tiba-tiba kita dapat semacam mengambil begitu saja sebagai luar biasa mencerahkan jika tidak sedikit frustasi tapi tidak hampir cara yang efisien untuk pergi tentang pemrograman. Dan sebagainya dengan bahasa tingkat tinggi seperti JavaScript kita akan dapat menavigasi pohon ini jauh lebih intuitif. 

Dan memang sintaks akan menjadi cukup akrab. Jika Anda belum pernah melihat sebelumnya JavaScript, ini adalah referensi benar-benar baik dari orang-orang Mozilla, orang-orang yang membuat Firefox, jadi jangan ragu untuk menelusuri bahwa pada kenyamanan Anda. Apa yang Anda akan menemukan - dan ini slide yang identik dengan apa yang kita digunakan pada hari lain - sama, utamanya hilang. Jadi ketika Anda menulis sebuah program dalam JavaScript, tidak ada fungsi utama. Anda hanya mulai menulis kode. Tapi perbedaan utama antara JavaScript dan C dan PHP adalah bahwa sementara C dan PHP sejauh ini telah dilaksanakan sisi server oleh alat dalam kasus ini atau lebih umum oleh server, JavaScript dengan desain biasanya dijalankan oleh browser. Dengan kata lain, Anda mungkin menulis kode JavaScript, seperti yang kita akan, pada server di alat, tetapi Anda termasuk di antara HTML, CSS antara Anda, antara GIF dan PNG dan JPEG Anda sehingga ketika pengguna mengunjungi halaman web Anda, jika Anda menggunakan JavaScript, bahwa kode JavaScript berasal dari server ke browser, dan itu adalah browser yang benar-benar melaksanakan itu. Jadi ini memiliki implikasi yang berarti untuk properti bahkan intelektual. Ini konyol untuk berpikir tentang melindungi IP Anda ketika datang ke kode JavaScript karena dengan sifat bahasa itu dijalankan biasanya sisi browser. 

Anda dapat mengaburkan itu, yang berarti Anda dapat membuatnya terlihat gila dan jelek tanpa spasi, nama variabel mengerikan, untuk membuat lebih sulit bagi orang untuk mencuri IP Anda, tapi kuncinya adalah bahwa hal itu dijalankan sisi browser. Meskipun sebagai sisi server selain JavaScript dapat digunakan, kasus penggunaan yang paling umum saat ini adalah masih pada browser. Dan inilah apa yang tampak seperti. Berikut adalah jika-lain jika-lain membangun seperti C, seperti PHP. Berikut adalah ekspresi Boolean ketika Anda "atau" 2 hal bersama-sama. Berikut ini adalah ketika Anda "dan" 2 hal bersama-sama. Berikut ini adalah pernyataan switch, yang mirip dengan PHP karena Anda dapat mengaktifkan berbagai jenis nilai. Loops sama memiliki untuk loop di sini, yang terstruktur identik dengan apa yang telah kita lihat sebelumnya. Sementara loop, kami telah mendapat lakukan sementara loop. Variabel, pernah jadi sedikit berbeda. Anda mendeklarasikan variabel seperti yang Anda lakukan di PHP dan C, tapi sama ini JavaScript lemah diketik. Anda tidak menentukan int atau float atau string atau sesuatu seperti itu biasanya. Anda dapat menentukan var. Anda tidak harus menentukan var, tetapi memiliki implikasi jika Anda tidak. Biasanya jika Anda menghilangkan var, Anda secara tidak sengaja membuat variabel global bukan lokal. Jadi biarkan saya mengusulkan bahwa Anda hampir selalu hanya mengatakan var dan kemudian nama variabel. Ini bukan tipe, itu hanya var untuk variabel. Ini akan menjadi contoh, apakah itu 123 atau "halo, dunia". Array hadir dan sintaktis mirip dengan PHP. Aku akan mengatakan angka var dan kemudian saya menggunakan tanda kurung siku lagi untuk mendeklarasikan variabel yang tipe adalah array yang memiliki angka-angka tertentu di dalamnya dipisahkan dengan koma. Dan kemudian terakhir, ini adalah satu-satunya yang benar-benar terlihat berbeda. Ingatlah bahwa di PHP kita akan mengimplementasikan array asosiatif untuk mahasiswa seperti Zamyla yang mungkin terlihat seperti ini, di mana variabel ini disebut mahasiswa. Tanda kurung persegi berarti di sini datang array. 

Kenyataan bahwa aku tidak menggunakan indeks numerik, tetapi string - id, rumah, dan nama - berarti bahwa ini adalah array asosiatif, dan panah-panah dengan tanda sama dan braket siku berarti bahwa kuncinya adalah "id", nilai adalah 1; kuncinya adalah "rumah", nilai tersebut Winthrop House; kuncinya adalah "nama", nilai tersebut Zamyla Chan. Jadi ada 3 kunci dalam array asosiatif ini, masing-masing memiliki nilai sendiri. Kita telah melihat bahwa di pset 7, atau Anda akan segera, dalam ide JavaScript yang sama, tapi itu akan terlihat seperti ini. Jadi var mahasiswa - ada tanda-tanda dolar dan tidak menyebutkan jenis masih namun var - sama dan kemudian buka kurung kurawal karena dalam JavaScript ketika Anda memiliki pasangan nilai kunci, Anda benar-benar menggunakan sesuatu yang disebut objek. Dan anda yang tidak mengambil APCS atau sejenisnya mungkin ingat benda dari Jawa atau bahasa yang sama. JavaScript tidak Jawa, pertama-tama. Itu adalah tahun desain yang disengaja keputusan lalu mengetuk off sesuatu yang lain yang populer, namanya, meskipun tidak memiliki hubungan mendasar ke Jawa itu sendiri. JavaScript memiliki benda-benda, dan Anda membuat mereka dengan cara notasi kurung kurawal. Obyek dalam JavaScript yang cukup banyak setara dengan array asosiatif di PHP ketika datang ke menyimpan data dalam diri mereka. 

Tetapi bahkan lebih kuat dalam JavaScript dapat Anda mengasosiasikan sangat mudah fungsi dalam suatu objek, dan meskipun Anda dapat melakukan hal ini dalam bahasa lain, itu cukup paradigma umum, seperti yang akan kita lihat. Singkatnya, obyek ini merupakan mahasiswa, yang sangat Zamyla, dan itu mirip konseptual, hanya sintaktis berbeda dari ini. Mari kita benar-benar menggunakan JavaScript dalam sebuah file. Ternyata ada tag script. Kami telah melihat tag gaya dan kami telah melihat tag HTML lainnya. Tag script sebenarnya akan berisi beberapa kode JavaScript. Biarkan aku pergi ke dalam alat di mana kita memiliki beberapa kode sumber pra-dibuat. Saya belum diposting belum di website, tapi saya akan melakukan itu setelah kelas. Mari kita membuka satu ini, blink.html. Kembali di tahun 1990-an, ada benar-benar sebuah tag HTML disebut tag blink, dan ini adalah salah satu tag yang paling mengagumkan terlalu sering digunakan di Internet dimana Anda akan mengunjungi beberapa halaman gaya 1990-an web dan mulai melihat teks berkedip seperti ini, hasil tag marquis, yang telah teks akan seperti ini. Salah satu dari beberapa kali di mana dunia telah benar-benar menyepakati standar web, semua orang di seluruh papan membunuh tag berkedip beberapa tahun yang lalu. Tapi kita bisa membangkitkan dengan JavaScript sebagai demonstrasi kekuatan yang Anda miliki ketika Anda dapat menulis sebuah program dalam sebuah halaman web. Pertama mari kita melewatkan hal-hal baru dan fokus hanya pada yang lama. 

Berikut adalah barang lama dalam contoh ini. Saya memiliki sebuah tag HTML, tag kepala, dan tag judul. Lalu aku memiliki tag body di sini dengan div, yang recall hanya sebuah divisi persegi panjang halaman bahwa saya sudah diberi ID yang unik secara sewenang-wenang dari "ucapan" untuk, hanya jadi saya memiliki cara unik merujuk ke sana, yang memiliki beberapa teks yang sangat sederhana: halo, dunia. Sekarang biarkan aku gulir ke atas ke atas file ini dan melihat apa yang baru. Hal pertama yang top up baru adalah tag script, dan dalam pemberitahuan tag script saya sudah menyatakan fungsi. Untuk menyatakan fungsi dalam JavaScript, sangat mirip dengan PHP, Anda benar-benar menulis fungsi maka nama fungsi, tanda kurung, dan mungkin beberapa argumen jika itu membutuhkan apapun. Lalu aku punya penjepit keriting saya seperti biasa, dan sekarang kami memiliki beberapa kode yang sedikit baru, tapi mari kita lihat apa artinya ini. Jadi div var, ini hanya berarti memberi saya div disebut variabel. Saya bisa menyebutnya foo, tapi aku ingin itu harus disebut div untuk alasan yang akan menjadi jelas dalam satu detik. Kemudian ternyata dalam JavaScript - dan ini adalah kode JavaScript tertanam di halaman web saya - ada variabel global khusus yang disebut macam dokumen. JavaScript sebenarnya merupakan bahasa berorientasi objek. Kami tidak akan pergi ke detail di 50 seperti apa yang berarti, tapi untuk sekarang tahu bahwa sebuah benda yang cukup banyak seperti struct. Seperti kita melihat jalan kembali ketika di salah satu dari masalah awal set di mana kami menempatkan banyak informasi dalam sebuah struct, sama adalah mendokumentasikan struct khusus yang dilengkapi dengan browser, dilengkapi dengan halaman web. Ini bukan sesuatu yang saya buat. Di dalam struktur dokumen, meskipun, Anda tidak hanya data yang tetapi Anda juga memiliki fungsi. 

Dan setiap kali Anda memiliki fungsi dalam struktur, dalam suatu objek, itu disebut metode. Tapi itu hal yang sama. Metode adalah fungsi yang kebetulan berada di dalam sesuatu yang lain. Jadi ini berarti bahwa variabel global khusus yang disebut dokumen telah disebut fungsi getElementById yang benar-benar melakukan itu. Ini akan membuat Anda sebuah elemen dari DOM, Document Object Model pohon, mana ID adalah dalam ucapan kasus. Dengan kata lain, semua waktu kita dihabiskan untuk struktur data datang ke dalam bermain di sini. Ini gambar DOM bahwa kita memiliki beberapa saat yang lalu, meskipun halaman ini sedikit berbeda, jika saya punya div dalam gambar ini, apa document.getElementById akan kembali kepada saya secara efektif akan menjadi pointer ke persegi panjang di pohon, referensi ke persegi panjang di atas pohon. Jadi itulah apa artinya benar-benar memanggil salah satu fungsi. Dalam kasus ini lagi itu div. Ini bukan badan atau judul. Jadi mari kita lihat apa yang saya lakukan kemudian dengan div ini sekarang bahwa saya memilikinya dalam div ini disebut variabel. Ternyata dengan JavaScript Anda memiliki kemampuan untuk men-tweak CSS dari halaman Anda secara dinamis. Sampai saat ini, semua CSS yang telah kami lakukan, meskipun terbatas, dalam gaya atribut, atau di mana pun yang telah kita menempatkan CSS? Aku agak manja yang satu. Dalam tag gaya di bagian atas file. Atau tempat ketiga telah? 

Sebuah file eksternal, sesuatu. Css. Jadi mereka adalah 3 tempat yang telah kami lakukan sejauh CSS, tapi hasil tangkapan adalah kita telah keras kode semuanya. Anda memutuskan seperti yang Anda terjun ke pset 7, kami memutuskan sebelum kuliah apa yang akan kita CSS. Tetapi jika Anda ingin mengubah CSS Anda, Anda benar-benar dapat melakukan itu setelah Anda memiliki bahasa pemrograman yang sebenarnya. CSS, HTML - bahasa pemrograman tidak. JavaScript. Jadi ternyata bahwa segera setelah Anda memiliki salah satu persegi panjang dari pohon disebut DOM, memiliki sendiri beberapa data di dalamnya. Jadi div bahwa aku hanya menyambar dari pohon memiliki apa yang kita akan menelepon properti di dalamnya disebut gaya, dan properti gaya sendiri telah properti yang disebut visibilitas. Saya tahu ini hanya dengan melihat panduan pengguna CSS. Ternyata ada properti visibilitas CSS yang melakukan apa yang dikatakannya. Itu membuat sesuatu yang terlihat atau tidak, terlihat atau tidak. Dan bagaimana Anda melakukannya adalah ini. Saya minta pemrograman jika visibilitas div ini tersembunyi, apa yang harus saya mengubahnya ke? Terlihat. Lain jika visibilitas halaman ini tidak tersembunyi, secara logis saya membuatnya tersembunyi. Saya tidak tahu mengapa hal itu terlihat dan tersembunyi dan tidak terlihat dan tak terlihat. Ini adalah keputusan desain yang buruk sepanjang jalan. Tetapi mereka memang bertentangan dalam CSS: terlihat dan tersembunyi. Semua ini tidak itu berarti mengubah CSS dari file saya dan mematikan, dan mematikan untuk itu div tertentu. Tapi sekali lagi, ini adalah fungsi yang disebut berkedip. Kapan fungsi berkedip disebut? Ternyata bahwa ada jendela lain khusus yang disebut variabel global, semangat yang sama dokumen, tetapi sementara dokumen mengacu ke halaman web Anda, seperti pohon DOM, HTML Anda dikirim dari server, Jendela mengacu pada krom sekitarnya, address bar, bar judul, dan semua hal-hal di sekitar halaman web Anda. 

Dan ternyata bahwa objek memiliki jendela dalam fungsi khusus itu disebut setInterval yang melakukan apa yang dikatakannya. Ini akan mengatur interval - dalam hal ini setiap 500 milidetik - dan, mengambil menebak, apa yang akan dilakukan setiap 500 milidetik? Ini akan mengeksekusi bahwa blink fungsi. Dan apa yang bagus di sini adalah bahwa kita bisa melakukan ini di C meskipun kita tidak pernah melakukannya. C memang memiliki sesuatu yang disebut fungsi pointer di mana Anda dapat melewati fungsi sekitar sebagai argumen. Demikian pula dalam JavaScript dapat Anda berikan nama fungsi ke fungsi lain. Dan perhatikan apa yang saya lakukan. Aku tidak melakukan hal ini. Jika saya menempatkan tanda kurung setelah sekejap, itu berarti memanggil fungsi berkedip. Jika saya menghilangkan mereka, itu berarti di sini adalah fungsi berkedip sehingga setInterval yang dapat menyebutnya setiap 500 milidetik. Jadi hasil akhirnya, mengerikan meskipun, adalah bahwa jika saya pergi ke localhost dan pergi ke blink.html, Saya sekarang memiliki hal ini terjadi lagi dan lagi. Dan jika saya benar-benar Inspect Element, mari kita lihat apakah kita bisa melihat ini. Biarkan saya Inspect Element, biarkan aku gulir ke bawah hanya sedikit, biarkan aku memilih Elements di sini, dan perhatikan bagian dalam DOM inspektur Chrome. Ini benar-benar mengubah bolak-balik setiap 500 milidetik. Jika kita pergi ke teman kita Nate, jika Anda pernah bertanya-tanya bagaimana hal ini bekerja, ide serupa dengan interval, namun Nate sebenarnya memanfaatkan sangat efektif warna dalam kasus khusus ini di sini. Jadi apa lagi yang bisa kita benar-benar melakukan dengan ini? Mari kita membuka contoh lain dan mencoba sesuatu itu pemrograman bahkan lebih berguna daripada membuat berkedip hal. Biarkan aku pergi ke direktori bentuk kami hari ini dan masuk ke form0. Ini adalah bentuk paling jelek mungkin bahwa aku bisa datang dengan, dan biarkan aku hanya menunjukkan apa yang tampak seperti di browser. 

Biarkan aku pergi ke localhost / bentuk, dan ini adalah form0. Ini adalah bentuk HTML Super jelek yang memiliki beberapa bidang untuk email, password, sandi, dan kemudian kotak centang sedikit untuk menyetujui beberapa persyaratan dan ketentuan. Menangkap adalah jika saya mengunjungi formulir ini dan saya tidak ingin memberikan alamat email saya, Saya tidak ingin setuju dengan persyaratan dan kondisi yang mungkin, saya bisa klik Daftar dan itu memungkinkan saya melalui pula. Hal ini terjadi untuk menyerahkan ke file PHP bodoh disebut dump.php. Semua hal ini adalah mencetak isi dari $ _GET hanya untuk tujuan diagnostik. Itulah yang disampaikan oleh pengguna hanya sekarang. Tapi bagaimana kalau kita benar-benar ingin memvalidasi pengiriman formulir pengguna. Biarkan aku pergi ke versi 1. Ini form1.html. Ini terlihat estetis sama buruknya, tapi perhatikan bagaimana mewah itu. Jika saya klik Daftar tanpa bekerja sama, saya dimarahi. "Anda harus memberikan alamat email Anda." Baiklah. Jadi biarkan aku coba itu. Jadi malan@harvard.edu. Aku tidak membutuhkan password. Daftar. "Anda harus memberikan password." Baiklah. Jadi saya akan memberikan password merah. Daftar. "Kata sandi tidak cocok." Saya harus sekarang ketik di sini merah. Saya sengaja diperiksa itu. Daftar. "Anda harus menyetujui syarat dan kondisi." Baiklah. Setuju ada. Daftar. Dan sekarang itu menunjukkan saya output diagnostik di sana. 

Jadi apa yang baru saja terjadi? Kami punya kemampuan untuk memvalidasi pengiriman form. Bahkan, jika Anda melakukan menyelam ke pset 7, ada fungsi minta maaf yang membuatnya cukup mudah untuk berteriak pada pengguna dengan pesan di layar. Saya menggunakan mekanisme yang sedikit berbeda, fungsi waspada, yang bukan merupakan fungsi yang tersenyum pada karena membuat pesan pengguna sangat jelek. Tapi mari kita lihat apa yang saya lakukan di sini. Ini form1.html, dan melihat bahwa saya memiliki beberapa sintaks yang cukup familiar: body tag, tag form, atribut aksi, atribut metode. Tapi perhatikan saya berikan formulir saya ID unik untuk kenyamanan. Lalu aku punya medan email yang jenis teks, field kata sandi yang jenis password, konfirmasi lapangan yang jenis password, dan kemudian kotak centang yang namanya kesepakatan di sini, tipe kotak centang. Dan kemudian aku punya tombol kirim. Tapi perhatikan di atas apa lagi saya miliki. Pertama-tama, ada lagi penggunaan tag script. Jika Anda memiliki beberapa kode JavaScript di file lain, seperti dengan CSS Anda dapat memasukkannya. Dan Anda melakukannya dengan sumber naskah, dan kemudian melihat aku menghubungkan rupanya untuk googleapis.com ke jalur yang sangat panjang tapi nama file yang berakhir di jquery.min minimal js.. jQuery adalah library super populer untuk JavaScript yang hanya membuat JavaScript semua lebih user-friendly untuk digunakan. Ini secara efektif menjadi standar de facto. Jadi meskipun apa yang akan Anda lihat adalah tidak murni JavaScript per se, itu adalah sebuah perpustakaan di atas JavaScript seperti perpustakaan CS50 adalah lapisan di atas tingkat rendah kode C, kenyataannya adalah hampir semua orang di Internet menggunakannya. Jadi ini bukan roda pelatihan. Ini adalah hanya terbaik berlatih hari ini. Sekarang perhatikan di bawah ini yang merupakan tag script saya sendiri, dan perhatikan apa yang saya lakukan di sini. Ternyata bahwa jQuery melakukan sesuatu sedikit mewah. JavaScript memiliki tanda-tanda dolar, tapi mereka tidak ada artinya. 

Mereka seperti huruf A atau B atau C. jQuery telah cukup mengadopsi konvensi atau semacam klaim meletakkan fakta bahwa $ akan menjadi simbol khusus mereka. Jadi segera setelah Anda memuat file ini JavaScript global sampai di sini dengan tag script, Anda memiliki akses ke variabel global khusus yang disebut $. Ini lebih tepat disebut jQuery, tapi itu tidak terlihat hampir seseksi $. Tapi $ tidak memiliki arti khusus. Di PHP itu memiliki arti khusus. Anda harus memiliki itu di depan variabel. Ini hanyalah sebuah hal seksi yang mereka mengambil. Apa yang terjadi di sini? Perhatikan aku lewat dengan fungsi jQuery dokumen global variabel saya dan kemudian aku menelepon. siap. Apa jQuery dasarnya tidak itu memungkinkan Anda untuk mengambil beberapa hal JavaScript vanili seperti objek dokumen, objek window, dan jika Anda lulus ke fungsi jQuery - dan sekali lagi, harus jelas, ini adalah fungsi yang disebut jQuery - apa yang dilakukannya itu kembali kepada Anda sebuah versi khusus dari dokumen yang memiliki fungsi lebih terkait dengan itu. Jadi dalam JavaScript baku tidak ada fungsi siap, tetapi jika Anda melewatkan dokumen ke fungsi jQuery pertama, itu kembali kepada Anda sebuah versi khusus dari objek dokumen yang memiliki fitur mewah lagi. Dan itulah mengapa orang-orang seperti itu. Itu hanya membuat hal-hal yang mudah untuk dilakukan, karena kita akan melihat. Jadi, apa ini berarti baris kode? Baris kode ini di sini berarti ketika dokumen siap - dengan kata lain, sekali browser dilakukan membaca ini atas file ke bawah - pergi ke depan dan menjalankan fungsi berikut. Apa benar-benar menarik dalam JavaScript - dan PHP memiliki ini juga - adalah fungsi anonim. Dalam JavaScript Anda dapat mendeklarasikan fungsi yang memiliki nama tidak ada tetapi mereka memiliki tubuh. Perhatikan apa yang terjadi di sini. 

Ini adalah fungsi yang disebut siap, dan itu hanya berarti melakukan hal berikut ketika halaman web secara keseluruhan sudah siap, ketika itu semua telah dibaca dari server. Apa yang Anda ingin lakukan? Saya ingin menjalankan serangkaian kode. Perhatikan bahwa kita tidak ingin mengeksekusi kode ini segera. Jika saya dihilangkan ini, ini berarti segera mulai melaksanakan baris-baris kode. Tapi fakta bahwa saya mengatakan tidak, tidak, tidak, membungkus ini dalam fungsi anonim seperti ini berarti tidak melaksanakannya belum, menyebutnya akhirnya. Kami melihat ini beberapa saat yang lalu dalam contoh bentuk sebelumnya kami. Apa fungsi yang kita sebut akhirnya, 500 milidetik kemudian? Blink. Jadi ide yang sama. Sekali lagi, bahkan jika ini tampak sedikit aneh, hanya mengambil untuk saat ini pada iman bahwa untuk menyatakan fungsi anonim yang disebut pada akhirnya, Anda hanya menulis function () { Jadi apa kode yang akan kita mengeksekusi pada akhirnya? Berikut ini. Hal ini juga terlihat agak baru, tetapi ini berarti inilah fungsi jQuery, dan sekarang ini adalah jalan pintas. Ini potongan HTML di bagian bawah layar tentu memiliki beberapa representasi pohon. Ini bukan ini. Halaman ini lebih menarik daripada contoh ini, dunia halo. Tapi ada beberapa pohon yang sesuai dengan HTML ini. Ini akan menjadi sakit di leher harus mengimplementasikan beberapa jenis fungsi rekursif untuk memulai pada simpul akar dan kemudian menemukan node yang ID adalah registrasi. Jadi apa yang membuat jQuery super mudah bagi kita secara harfiah ini. Pergi ke depan dan mendapatkan saya apapun div atau bentuk apapun, apapun HTML elemen memiliki ID pendaftaran. Ini sama dengan document.getElementById ('pendaftaran'). 

Mengapa orang-orang seperti jQuery? Karena itu lebih pendek untuk mengetik. Tapi itu semua itu. Ini ide yang sama. Dapatkan saya tag mana ID adalah pendaftaran. Dan ketika itu tag, yang kebetulan formulir, dikirimkan, pergi ke depan dan menjalankan kode ini. Jadi mari kita mengambil satu melihat sekarang bagaimana kita melakukan validasi form. Sintaks ini diakui samar pada awalnya, tapi apa yang terjadi? Jika baris kode ini benar, aku akan berteriak pada pengguna untuk memberikan alamat email-nya. Jadi apa ini baris kode? $ Berarti jQuery. Sekarang perhatikan ini. Ini adalah jenis seperti CSS. Jika Anda telah menyelam ke dalam CSS belum, Anda akan tahu bahwa ini berarti elemen mana ID adalah pendaftaran. Ruang berarti menemukan anak atau keturunan pendaftaran yang namanya masukan. Dan kemudian hal ini di alun-alun kurung adalah filter kecil. Dan bahkan jika ini terlihat samar, ini hanya berarti pergi ke bentuk yang ID adalah registrasi, masuk ke bagian dalam elemen input itu yang namanya email, dan kemudian mendapatkan nilai, nilai apa pun yang akan terjadi - asdf kalau itu semua saya diketik atau malan@harvard.edu kalau itu yang saya mengetik. Jadi jika nilai bidang email form == apa-apa, berteriak pada pengguna. Lain jika nilai kolom password == apa-apa, berteriak pada pengguna. 

Lain jika nilai dari bidang sandi tidak sama dengan nilai bidang konfirmasi, yang merupakan elemen bentuk lain, berteriak pada pengguna. Dan kemudian yang terakhir - dan satu ini juga memiliki beberapa sintaks baru sendiri, tetapi sekali Anda sudah melihatnya, itu setidaknya sedikit lebih masuk akal - lain jika bentuk yang ID adalah registrasi memiliki elemen input yang namanya kesepakatan dan diperiksa, pergi ke depan dan berteriak pada pengguna. Jadi saya benar-benar mengakui ini benar-benar luar biasa pada pandangan pertama. Ini banyak sintaks baru. Tapi semua jQuery berikut jenis-jenis pola. Dan jujur, aku bahkan tidak tahu ini ada sampai beberapa menit yang lalu. Aku Googled, "Bagaimana Anda memeriksa apakah kotak centang diperiksa dalam jQuery?" dan ini adalah sintaks, karena ada cara yang berbeda untuk melakukannya dengan kode JavaScript aktual baku. Sehingga halaman pertama dari Set Soal 7 menekankan, pset 7 sangat banyak latihan dalam bootstrap diri di mana kita berikan, mudah-mudahan, suatu kerangka kerja konseptual yang dapat digunakan untuk mengatasi pset tersebut. 

Tapi seperti yang sering terjadi dengan desain web, itu terserah Anda benar-benar melihat-lihat, menggabungkan potongan kode dan contoh dari Web asalkan Anda mengutipnya per istilah pada lembar pertama itu, dan menyadari bahwa belajar HTML, CSS, JavaScript dan bahkan SQL benar-benar dimaksudkan untuk menjadi latihan ini di rumah seperti yang kita mulai untuk mengambil roda off pelatihan. Dan menyadari juga ada begitu banyak hal lagi yang dapat Anda lakukan dengan browser. Dalam sebagian besar elemen ada hal-hal lain yang disebut event handler. Dan meskipun kita hanya melihat orang-orang yang disebut onsubmit dan onready, Anda dapat melakukan hal-hal seperti OnKeyDown, onkeyup, seperti ketika pengguna menyentuh tombol, Anda dapat mendengarkan untuk itu dan sampai kunci. Gmail memiliki shortcut keyboard. Bagaimana Google menerapkan cara pintas keyboard seperti C untuk menulis? Mereka mendengarkan untuk acara, sebagaimana mereka disebut, seperti onkeypress atau onkeyup dan OnKeyDown. Jika Anda pernah melayang mouse anda ke atas beberapa pilihan menu dan semua yang, tiba-tiba voila, muncul menu atau perubahan warna grafis, bagaimana mereka melakukan itu? Daripada mendengarkan onready atau onsubmit, Anda mendengarkan onmouseover atau onmouseout. 

Jadi singkatnya, dengan dasar-dasar yang sangat sederhana bahwa kita sudah mulai menggores permukaan saat ini dan kami akan menyelam lebih lanjut untuk Rabu, Anda miliki, semakin, kekuatan untuk melaksanakan hal-hal yang Anda sudah akrab dengan. Jadi mari kita berakhir di sana, dan kami akan terus ini pada hari Rabu. 

[CS50.TV]