[MUSIC PLAYING] 

Doug LLOYD: Jadi sekarang kita sudah tua pro pada pemrograman web, kan? Dan kita telah membahas beberapa bahasa dalam video individu. Dan sekarang mari kita lakukan satu lagi, JavaScript. 

Pertama kabar baik, JavaScript adalah pemrograman modern bahasa seperti PHP yang sintaks berasal dari C, jadi itu adalah tempat yang baik untuk memulai. Ini tentang setua PHP, juga, yang telah sekitar 20 tahun. Itu diciptakan sekitar waktu yang sama seperti PHP. Dan JavaScript sebenarnya cukup mendasar untuk pengalaman pengguna dari web. Bahkan, ada tiga bahasa yang saya akan mengatakan semacam membentuk pengalaman pengguna berinteraksi dengan website, html, css, dan JavaScript. Dan jadi sekarang mari kita bicara sedikit tentang JavaScript. 

Kabar buruk, meskipun, dengan JavaScript adalah bahwa ia menetapkan banyak aturan untuk dirinya sendiri, dan kemudian istirahat mereka. Dan JavaScript sebenarnya dapat jenis menantang untuk belajar, karena itu tidak seperti C dan PHP, yang sangat terstruktur dan memiliki aturan yang sangat kaku untuk bagaimana hal bisa bekerja. JavaScript memiliki jenis dari mendapatkan begitu fleksibel bahwa mungkin hal-hal yang tidak akan bekerja dengan cara kita mengharapkan mereka untuk, dan mungkin kita benar-benar tidak bisa belajar bahasa pemrograman pertama kami sebagai JavaScript. Jadi mungkin karena tidak mengatur sendiri aturan apapun, dan itu tidak benar-benar menegakkan kebiasaan coding yang baik. Tapi sekarang kita sudah mudah-mudahan dikembangkan beberapa coding kebiasaan baik, dan jadi kita bisa mulai untuk terjun dalam JavaScript sedikit. 

Untuk menulis JavaScript, mirip dengan pembukaan up file C dengan C ekstensi dot atau file PHP dengan ekstensi dot PHP, semua yang perlu kita lakukan adalah membuka file dengan ekstensi file dot js. Kita tidak perlu untuk memiliki kerusakan khusus pembatas seperti yang kami lakukan di PHP. Itu semacam sudut braket tanda tanya PHP bahwa kita terbiasa itu, cara kami memberitahu browser kita bahwa apa yang kita miliki adalah JavaScript adalah dengan termasuk dalam sebuah tag html, dan kita akan melihat sedikit tentang bagaimana melakukan itu hanya sesaat. 

Hal lain yang membuat JavaScript yang berbeda, meskipun, adalah bahwa ia berjalan sisi klien. Jadi ingat dengan PHP yang kita tidak pernah bisa benar-benar melihat PHP yang digarisbawahi website. Jika kita pernah dilihat sumber halaman, kita hanya akan melihat html yang dihasilkan oleh PHP itu. Tapi JavaScript berjalan sisi klien. Anda JavaScript berjalan pada komputer Anda. Dan itulah mengapa Anda dapat melakukan hal seperti menambah blocker. Kanan? Memblokir iklan biasanya dilakukan oleh membunuh semua JavaScript yang berjalan pada situs web tertentu. Dan karena itu harus berjalan di sisi mesin klien Anda, Anda hanya dapat menghentikan JavaScript untuk menjalankan sepenuhnya. Itu juga berarti bahwa ketika Anda menggunakan website yang mencakup JavaScript, Anda harus mengirim sumber JavaScript kode sebagai bagian dari respon http Anda untuk klien ketika mereka memintanya. Dan sehingga Anda tidak mungkin ingin menggunakan JavaScript melakukan hal-hal yang benar-benar sensitif seperti informasi lewat tentang sandi pengguna 'kembali dan sebagainya, karena mereka benar-benar akan menerima semua kode sumber, bukan hanya html yang dihasilkan, seperti akan menjadi kasus dengan mengatakan PHP. 

Jadi bagaimana kita termasuk JavaScript di html kita untuk memulai dengan? Nah, mirip dengan CSS, sebenarnya, adalah semacam bagaimana kita melakukannya di sini. Dengan CSS kita memiliki tag gaya. Dan dalam tag gaya, kita dapat mendefinisikan sebuah style sheet CSS. Demikian pula dengan JavaScript dapat kita membuka tag script, tag html lain kita tidak berbicara tentang dalam video html kita, dan menulis JavaScript di antara tag script. Juga meskipun, seperti CSS, kita bisa link di luar file CSS dan menarik mereka ke dalam program kami seperti itu. Dengan CSS kita juga bisa, permisi, dengan JavaScript kami juga dapat menentukan sumber atribut dari tag script link di JavaScript secara terpisah, sehingga Anda tidak harus menulis dalam antara tag script, kita dapat link dalam menggunakan bahwa tag script juga. Dan seperti halnya dengan kasus dengan CSS mana kami merekomendasikan bahwa itu mungkin dalam kepentingan terbaik Anda untuk menulis CSS Anda dalam file terpisah dalam kasus Anda perlu mengubah itu, sama kita merekomendasikan yang Anda tulis Anda JavaScript dalam file terpisah dan menggunakan sumber tag script atribut untuk mengikat Anda JavaScript ke html Anda, halaman web Anda. 

Variabel Jadi JavaScript, kita akan mulai berbicara tentang sintaks di sini. Dan kita akan pergi melalui semacam ini dengan cepat, karena kita sudah melakukan ini di PHP, sehingga ini semua harus cukup familiar. Jadi variabel dalam JavaScript adalah sangat mirip dengan PHP variabel. Tidak ada jenis specifier, dan ketika Anda memperkenalkan sebuah variabel, Anda awalan dengan kata kunci var. Dalam PHP kita akan melakukan sesuatu seperti ini, tanda dolar x. Itulah cara kita ditunjukkan variabel, tapi tidak ada, kita tidak menyebutkan jenis variabel sama sekali. Kami akan mengatakan sesuatu seperti Dolar tanda x sama dengan 44 di PHP. Jika kita melakukan hal yang sama di JavaScript, kita akan mengatakan var x sama dengan 44. Jadi var adalah semacam cara kami memperkenalkan variabel. Itu mungkin sedikit lebih intuitif hanya variabel tanda dolar. 

Sekali lagi, karena tidak ada jenis data, kita bisa melakukan ini dengan jenis data, string, hal lain semua akan var. Conditional, semua kami teman-teman lama dari C dan PHP masih tersedia, sehingga kita memiliki jika, lain jika, lain, saklar dan pertanyaan mark usus. Beralih tersisa sebagai fleksibel karena adalah PHP, tapi semua ini Anda akrab dengan sekarang. Dan sama dengan loop favorit lama sementara, dilakukan sementara, dan untuk tetap tersedia bagi kita. Jadi sudah kita ketahui banyak dasar JavaScript semacam fundamental hanya berdasarkan memiliki cukup sedikit pengetahuan sekarang tentang C dan PHP. 

Bagaimana fungsi dalam JavaScript? Nah, mirip dengan PHP setiap fungsi adalah diperkenalkan dengan fungsi kunci. Anda mengatakan fungsi, dan kemudian Anda mulai mendefinisikan fungsi Anda. Apa yang berbeda sedikit tentang JavaScript, meskipun adalah kemampuan untuk memiliki apa yang disebut fungsi anonim. Jadi Anda dapat menentukan fungsi yang tidak memiliki nama. Ini adalah sesuatu yang kita benar-benar belum pernah melihat sebelumnya. Kami benar-benar akan menggunakan konsep dari fungsi anonim sedikit kemudian di ini video, karena akan membuat sedikit lebih masuk akal dalam konteks ketika kita melihatnya dalam situasi tertentu bahwa saya telah dibuat di sini. Tapi mari kita coba lihat pada apa JavaScript sederhana Fungsi mungkin terlihat seperti. 

Jadi saya telah pergi ke depan dan membuka IDE CS50 saya dan saya sudah menjalankan Apache untuk memulai server saya berjalan. Dan saya memiliki file ini terbuka yang disebut home.html. Dan aku akan memperbesar sedikit di sini. Dan pada dasarnya, Anda dapat melihat Home.html adalah hanya sekelompok tombol. Dan aku mengklaim di atas sini bahwa ini adalah bagian JavaScript bahan. Jadi ada sekelompok tombol di sini, tapi apa yang tombol ini benar-benar melakukan? 

Yah, kita akan kepala ke IED saya, dan saya telah home.html membuka sini. Pada awal, di sinilah aku menghubungkan di semua file source JavaScript saya. Kanan? Jadi saya punya anonymous.js, clock.js, Saya menggunakan atribut sumber dari tag script untuk link dalam file. Jadi saya tidak menulis apapun JavaScript langsung ke file ini, tapi aku sudah ditarik semua JavaScript Aku sudah menulis secara terpisah. Dan jika kita gulir ke bawah sini, ini semua harus terlihat agak akrab dengan sedikit sintaks baru. Kita miliki di sini tag header untuk fungsi dan kemudian tombol. Saya memiliki masukan yang tombol jenis, dan ternyata ketika saya klik, Aku akan memanggil beberapa berfungsi tanggal peringatan. Dan ini adalah bagaimana kita bisa semacam mencampur sedikit JavaScript dan html. Mereka benar-benar bermain cukup baik bersama-sama, dan begitu rupanya ketika Saya klik pada tombol ini, saya akan untuk memanggil beberapa fungsi tanggal peringatan. Dan juga memiliki aku didefinisikan perilaku untuk semua tombol lain yang adalah pada halaman home.html, yang kita akan selalu kembali untuk selama video ini. Tapi mari kita kembali ke atas di sini dan kita lihat di clock.js, yang merupakan File JavaScript yang saya menulis yang memiliki fungsi pertama ini kita akan melihat pada. Seperti yang Anda lihat, saya mulai saya JavaScript berfungsi dengan fungsi kunci, dan saya sudah diberi satu ini sebuah Nama, itu disebut tanggal peringatan. Di dalam sana, saya tampaknya membuat variabel lokal baru yang disebut tanggal saat ini. Dan aku akan menetapkan sederajat ke tanggal baru. Dan kita bisa masuk ke banyak rinci seperti apa kencan adalah, dan benar-benar JavaScript begitu besar bahwa kita tidak mungkin dapat mencakup semuanya dalam satu video. Tapi cukup untuk mengatakan, ini akan untuk kembali ke saya item data yang merangkum tanggal dan waktu. Saya menyimpan bahwa dalam sebuah variabel yang aku tampaknya akan memberitahukan tanggal saat ini. 

Nah, apa peringatan tanggal saat terlihat seperti? Mari kita lihat file itu sendiri kembali atas di jendela browser. Jadi sekali lagi, ini adalah tombol yang saya telah terikat, fungsi bernama ini. Dan saya klik sana dan lihat apa yang terjadi, itu disiagakan. Itu muncul semacam ini kotak memberitahu saya bahwa waktu saat ini, rupanya itu 4 November di 10:43:43 pagi. Dan jika saya klik lagi, sekarang itu beberapa detik kemudian, kan? Jadi itu semua fungsi ini tidak. Ketika saya klik tombol ini, muncul pesan peringatan kepada saya. Jadi ada benar-benar tidak terlalu banyak untuk fungsi yang berbeda dari PHP, hanya sedikit sintaks baru yang datang dengan bekerja dengan JavaScript. 

Array dalam JavaScript adalah cukup sederhana. Untuk mendeklarasikan array, Anda menggunakan sintaks kurung bahwa kita akrab dengan dari PHP. Dan mirip dengan PHP, kita juga dapat mencampur jenis data. Jadi array ini, baik array ini akan menjadi sah JavaScript. Satu yang semua bilangan bulat, dan salah satu yang dicampur up jenis data yang berbeda. 

Apa sesuatu yang sangat berbeda dalam JavaScript, meskipun? Itulah gagasan dari sebuah objek. Jadi mungkin Anda pernah mendengar tentang pemrograman berorientasi objek. Kami tidak melakukan banyak hal di CS50, tapi kami akan melakukan sedikit itu di sini dalam konteks JavaScript. Sekarang JavaScript memiliki kemampuan untuk berperilaku sebagai pemrograman berorientasi objek bahasa, tetapi tidak sendiri eksklusif berorientasi obyek bahasa pemrograman. Dan ini lagi datang kembali ke mengapa saya mengatakan, itu bisa sangat menantang untuk belajar JavaScript sebagai pemrograman pertama Anda bahasa, karena tidak benar-benar sesuai paradigma tertentu. 

C di sisi lain adalah bahasa pemrograman fungsional. Jika kita ingin, fungsi yang semacam bos pria besar, kan? Mereka mendikte apa terjadi segala sesuatu yang lain. Kami ingin mengubah variabel, kita sebut fungsi. Kami melakukan hal-hal untuk fungsi. Objek sebaliknya, dalam objek bahasa berorientasi, benda semacam menjadi bintang dan fungsi menjadi semacam sekunder. Tapi apa adalah obyek, apa adalah gagasan dari sebuah objek? Nah, jika itu membantu, berpikir tentang hal itu di semacam pertama seperti struktur C atau struct bahwa kita telah belajar tentang sebelum. Dalam C, struktur mengandung sejumlah bidang, dan mungkin sekarang kita mungkin mulai menyebut bidang ini properti. Tapi sifat pernah benar-benar berdiri sendiri, bukan? Jika saya mendefinisikan struktur untuk mobil seperti ini dengan dua berikut ladang atau properti, salah satu yang bilangan bulat untuk tahun mobil dan lain 10 karakter tali untuk model mobil, Saya dapat mengatakan sesuatu seperti ini, Saya dapat mendeklarasikan variabel baru jenis herbie struct mobil. Dan kemudian saya bisa mengatakan sesuatu seperti herbie.year sama 1963, dan herbie.model sama Beetle. Tidak apa-apa. Saya menggunakan bidang dalam konteks struktur, tapi aku tidak pernah bisa hanya mengatakan sesuatu seperti ini. Kanan? Saya tidak dapat menggunakan nama field independen dari struktur. Ini semacam hal yang mendasar. 

Jadi bidang yang mendasar untuk struktur C sangat mirip dengan sifat yang mendasar untuk objek JavaScript. Tapi apa yang membuat mereka sangat menarik adalah bahwa benda juga dapat memiliki apa yang metode yang disebut, yang benar-benar hanya sebuah kata mewah untuk fungsi-fungsi yang melekat ke objek juga. Jadi fungsi yang hanya dapat disebut dalam konteks obyek. Hanya sebuah objek yang telah didefinisikan fungsi ini dalam nya, jika Anda berpikir tentang struct, fungsi didefinisikan dalam mereka mendefinisikan kurung kurawal struktur. Sehingga hanya berarti sesuatu untuk struktur. Dan itulah semacam apa yang kita lakukan di sini dengan objek dan metode. Itu pada dasarnya seperti kami mendefinisikan fungsi yang hanya masuk akal pada objek tertentu, dan jadi kami menyebut bahwa metode objek. Dan kita tidak pernah bisa menyebut bahwa fungsi independen dari objek, seperti kita tidak bisa mengatakan tahun atau model independen dari struct di C. 

Pemrograman sehingga fungsional paradigma terlihat seperti ini. Fungsi dan kemudian ketika Anda melewati di objek sebagai parameter. Dalam pemrograman berorientasi objek bahasa, ini semacam mendapat membalik, dan kami akan berpikir tentang itu suka ini, object.function. Jadi semacam itu dot Operator lagi menyiratkan bahwa itu semacam properti atau atribut dari obyek itu sendiri. Tapi ini adalah apa obyek bahasa pemrograman berorientasi mungkin lakukan untuk membuat fungsi memanggil metode, sekali lagi, yang hanya kata khusus untuk fungsi yang melekat pada suatu objek. Ini adalah apa yang sintaks mungkin terlihat seperti. Dan jadi kita akan mulai melihat beberapa ini dalam konteks JavaScript. 

Anda juga dapat berpikir tentang obyek semacam seperti array asosiatif, yang kita kenal dari PHP. Ingat array asosiatif memungkinkan kita untuk memiliki pasangan nilai kunci, bukan memiliki indeks 0, satu, dua, tiga, dan sebagainya seperti kita terbiasa dari C array. Array asosiatif dapat memetakan kata-kata, seperti dalam video PHP, kami berbicara tentang topping pizza. Dan jadi kami harus array disebut pizza, dan kami memiliki keju adalah kunci dan $ 8,99 adalah nilai, dan kemudian pepperoni adalah kunci, $ 9,99 adalah nilai, dan sebagainya. Dan kita juga bisa berpikir tentang obyek semacam mirip dengan asosiatif array. Dan sintaks ini di sini akan membuat objek baru disebut herbie dengan dua sifat di dalamnya. Tahun yang ditugaskan nilai 1963, dan model, yang ditugaskan string Kumbang. 

Dan perhatikan di sini bahwa saya menggunakan tanda kutip tunggal dalam JavaScript. Anda dapat menggunakan satu atau dua tanda kutip ketika Anda sedang berbicara tentang string. Ini hanya konvensional kasus yang paling kali ketika Anda sedang menulis JavaScript, Anda hanya menggunakan tanda kutip tunggal. Tapi aku bisa menggunakan tanda kutip ganda di sini, dan yang akan baik-baik saja juga. 

Jadi ingat bagaimana di PHP kami punya gagasan ini dari masing-masing loop yang akan memungkinkan kita untuk iterate atas semua nilai kunci pasang sebuah asosiatif array, karena kita tidak memiliki kemampuan untuk iterate melalui 0, satu, dua, tiga, empat, dan sebagainya? JavaScript memiliki sesuatu yang sangat mirip, tapi itu tidak disebut untuk setiap loop, itu disebut dalam loop. Jadi jika saya berkata kepada saya seperti ini, untuk kunci var di objek, itu semacam mirip dengan mengatakan untuk setiap sesuatu sebagai sesuatu. Tapi semua aku lakukan di sini adalah iterasi melalui semua kunci dari objek saya. Dan dalam keriting yang kawat gigi di sana, saya akan menggunakan objek kunci kurung persegi untuk merujuk dengan nilai pada lokasi kunci. 

Atau, ada bahkan pendekatan lain. Jika saya hanya hanya peduli tentang nilai-nilai, bisa saya katakan untuk kunci objek, dan hanya menggunakan kunci dalam. Jadi untuk kunci var di objek, saya punya menggunakan objek kurung kunci di dalam lingkaran. Untuk kunci var objek, saya bisa hanya menggunakan kunci dalam lingkaran, karena aku hanya khusus berbicara tentang nilai-nilai di sana. 

Jadi mari kita mungkin mengambil melihat perbedaan hanya untuk cepat menunjukkan perbedaan antara empat dan untuk dari dengan sangat spesifik array, yang kita miliki di sini, seminggu array. Jadi saya harus menemukan sebuah array baru bahwa saya diisi dengan tujuh senar, Senin Selasa Rabu, Kamis, Jumat, Sabtu, Minggu. Dan aku ingin sekarang beralih melalui array ini, mencetak informasi tertentu. Jika saya menggunakan untuk di lingkaran untuk mencetak informasi, apa yang Anda pikir saya akan mendapatkan? Nah, mari kita lihat. Dan sebelum kita melompati ke jendela browser saya, hanya tahu bahwa console.log adalah semacam satu cara melakukan F cetak dalam JavaScript. Tapi apa konsol? Nah, itulah yang akan kita untuk pergi melihat di sekarang. 

OK, jadi kita kembali ke sini di jendela browser saya, dan aku akan membuka up alat pengembang saya. Sekali lagi, aku hanya memukul F12 untuk membuka alat pengembang. Dan perhatikan bahwa di sini di atas saya telah memilih konsol. Jadi ini adalah gagasan dari konsol pengembang, dan itu akan memungkinkan kita untuk mencetak informasi keluar, semacam seperti terminal, tapi Anda akan melihat sedikit kemudian, kami juga dapat mengetik informasi di untuk berinteraksi dengan halaman web kami. Aku akan memperbesar sedikit di sini, dan aku akan sekarang klik untuk di tes. Dan empat di test-- Aku tidak akan menunjukkan kode untuk itu sekarang, tetapi Anda akan mendapatkannya jika Anda mendownload kode sumber yang dikaitkan dengan video-- ini Hanya saja untuk di lingkaran yang kita lihat hanya detik yang lalu pada slide. 

Jadi aku akan klik yang tombol, dan di sini, inilah yang telah dicetak dalam konsol, 0, satu, dua, tiga, empat, lima, enam. Saya tidak mencetak informasi dalam lokasi tersebut array, karena saya digunakan untuk dalam lingkaran. Dan di dalam tubuh loop, saya hanya dicetak kunci tidak keberatan kunci. Tapi kalau aku sekarang jelas konsol saya, dan saya beralih ke untuk tes, dan empat uji Saya katakan saya gunakan untuk loop sebaliknya dan mencetak kunci, jika saya klik itu, sekarang aku mendapatkan elemen aktual dalam objek saya atau array saya dalam kasus ini. Array saya dari hari Minggu. Aku dicetak Senin, Selasa Rabu. Jadi itulah perbedaan antara untuk dalam lingkaran, yang mencetak hanya kunci jika Anda hanya menggunakan kunci dalam tubuh loop, dan untuk loop, yang mencetak out nilai jika Anda menggunakan hanya kunci di dalam tubuh loop. 

Baiklah, bagaimana kita sekarang mulai menggabungkan string dan mungkin mencampur beberapa variabel dengan interpolasi seperti kami mampu melakukan di PHP? Nah, kita cukup akrab dengan ini dari PHP. Ini adalah bagaimana kita akan melakukannya dengan menggunakan dot operator untuk menggabungkan string. Dalam JavaScript, meskipun, kita benar-benar menggunakan sesuatu disebut operator ditambah, yang adalah mungkin bahkan sedikit lebih intuitif, kan? Kami menambahkan bunch string bersama-sama. Jadi mari kita kembali lebih dan melihat apa ini akan mencetak jika kita mencoba untuk mencetak semua informasi dalam minggu array. Baiklah, jadi di bawah sini di bawah string, Saya memiliki dua pilihan, bangunan tali V1 dan kemudian membangun tali V2. Dan kita akan melihat mengapa kami perlu V2 dalam detik. Tapi aku akan klik tali bangunan V1, yang adalah kode kami hanya mengambil melihat, yang console.log dengan semua plus. Mari kita lihat apakah cetakan ini apa yang kita harapkan. 

Senin adalah hari jumlah 01 minggu, Selasa adalah hari nomor 11 dalam seminggu. Nah, apa yang saya coba untuk melakukan ada mendapatkan untuk mencetak Senin adalah jumlah hari satu, Selasa adalah hari nomor dua. Tapi sepertinya aku selalu mencetak satu. Nah, kenapa begitu? Nah, ternyata, melihat lagi di potongan kecil kode ini di sini. Perhatikan bahwa kita menggunakan ditambah operator dalam dua konteks yang berbeda. 

Dan di sinilah mungkin hal bahwa kita sudah jenis telah mengatakan, oh, itu begitu besar. Kami tidak berurusan dengan tipe data lagi. Tapi di sinilah fakta bahwa kita kehilangan tipe data sebenarnya dapat sedikit dari masalah bagi kita. Sekarang bahwa operator ditambah digunakan untuk menggabungkan string dan menambahkan nomor bersama-sama, JavaScript memiliki untuk membuat tebakan yang terbaik untuk apa yang saya ingin lakukan untuk saya. Dan dalam hal ini, itu salah menebak. Ini hari hanya bersambung, yang akan 0, satu, dua, tiga, empat, lima, atau enam, dan kemudian hanya concatenated itu dan kemudian concatenated satu. Itu tidak benar-benar menambahkan mereka bersama-sama. Dan bahasa ini, PHP dan JavaScript, yang abstrak pergi Gagasan ini jenis, Anda tidak harus berurusan dengan itu lagi. Mereka masih memiliki jenis di bawah tenda. Dan kita bisa, dalam situasi seperti ini, memanfaatkan fakta bahwa dengan mengatakan sesuatu seperti mungkin ini yang memberitahu JavaScript, oleh cara, memperlakukan ini sebagai integer, tidak memperlakukannya sebagai string, bahkan meskipun kita mencampur bersama-sama string dan bilangan bulat di sini. 

Ini hanya salah satu dari hal-hal yang tampaknya begitu besar dalam konteks bahwa kita tidak perlu berurusan dengan jenis lagi, tapi kadang-kadang Anda akan mengalami situasi persis seperti ini di mana fakta bahwa Anda tidak memiliki kontrol atas jenis dapat menjadi bumerang pada Anda jika Anda tidak hati-hati. Dan jika kita pop kembali ke IDE, aku akan membersihkan konsol saya lagi, dan aku akan klik string yang bangunan versi dua, yang adalah di mana saya menggunakan fungsi mengurai int. Sekarang itu mencetak informasi yang saya harapkan. Senin nomor satu hari, Selasa adalah hari ke dua, dan seterusnya. 

Jadi mari kita bicara tentang fungsi lagi. Aku berjanji kita akan bicara tentang anonim fungsi, dan sekarang konteks untuk itu akhirnya tiba. Jadi sebelum kita melakukannya, mari kita bicara lagi tentang array sesaat. Jadi array khusus kasus obyek. Bahkan, segala sesuatu di JavaScript sebenarnya obyek. Jadi fungsi adalah kasus khusus dari suatu objek, bilangan bulat yang khusus kasus obyek, tapi array khusus memiliki sejumlah metode. Ingat karena mereka benda-benda, mereka dapat memiliki properti dan metode. Mereka memiliki sejumlah metode yang dapat diterapkan untuk benda-benda. Ada metode yang disebut ukuran, array.size, yang akan kembali ke Anda seperti yang Anda harapkan jumlah elemen dalam array Anda. array.pop, semacam seperti Gagasan kami bermunculan off stack, jika Anda ingat dari tumpukan video kami, menghapus elemen terakhir dari array. array.push menambahkan elemen baru ke akhir array. array.shift adalah semacam seperti DQ, itu splices keluar elemen pertama dari array. 

Tapi ada juga khusus lain metode array disebut peta. Dan ini adalah semacam konsep menarik. Jadi apa adalah gagasan peta? Anda benar-benar akan melihat ini dalam beberapa bahasa lain, dan kita tidak berbicara tentang semacam kartografer peta di sini, kita sedang berbicara tentang fungsi pemetaan. Dalam konteks kita bicarakan di sini, peta adalah operasi kami khusus dapat melakukan pada array untuk menerapkan fungsi tertentu untuk setiap elemen array itu. dan jadi kita akan mengatakan di hal ini, mungkin array.map, dan di dalamnya, kita melewati dalam peta adalah fungsi yang kita inginkan untuk diterapkan ke setiap elemen tunggal. Jadi itu semacam analog dengan menggunakan loop untuk iterate atas setiap elemen dan menerapkan tertentu berfungsi untuk setiap elemen, hanya JavaScript telah ini dibangun pada gagasan pemetaan yang dapat diterapkan. Dan ini adalah konteks yang bagus untuk berbicara tentang fungsi anonim. 

Jadi katakanlah kita memiliki array ini bilangan bulat. Ini disebut nums, dan itu punya lima hal di dalamnya, satu, dua, tiga, empat, lima. Sekarang saya ingin memetakan beberapa fungsi untuk array ini. Saya ingin memiliki fungsi berlaku untuk setiap elemen array. Nah, mari kita mengatakan bahwa apa yang saya ingin lakukan hanyalah melipatgandakan semua elemen. Apa yang saya bisa lakukan hanya menggunakan satu lingkaran untuk var saya sama dengan 0, saya kurang dari atau sama dengan 4, saya ditambah, ditambah, dan kemudian dobel setiap nomor tunggal. Tapi saya juga bisa melakukan sesuatu seperti ini. Saya dapat mengatakan nums sebelumnya satu dua tiga empat lima, sekarang, meskipun, saya ingin Anda untuk menerapkan pemetaan ke array ini di mana saya ingin Anda untuk menggandakan setiap nomor. Dan itulah apa yang terjadi di sini. Tapi perhatikan apa yang saya lewat sebagai argumen untuk memetakan. Ini adalah fungsi anonim. Dan melihat saya belum diberikan fungsi ini nama, Aku hanya diberikan itu daftar parameter. Dan jadi ini adalah contoh dari fungsi anonim. 

Kita umumnya tidak akan menyebut ini Fungsi luar konteks peta. Kami mendefinisikan sebagai parameter untuk memetakan, dan jadi kita tidak benar-benar harus memiliki nama untuk itu jika Satu-satunya hal yang peduli tentang adalah peta dan itu didefinisikan tepat ada dalam peta. Dan jadi ini adalah fungsi anonim. Kami belum bisa untuk melakukan hal ini sebelumnya. Petakan beberapa fungsi yang menerima satu parameter, num, dan apa fungsi yang melakukan adalah kembali Bil kali 2. Dan setelah ini pemetaan telah diterapkan, ini sekarang apa nums terlihat seperti, dua, empat, enam, delapan, 10. Dan kami akan mampir ke saya jendela browser dan hanya Lihatlah ini benar-benar cepat juga. 

Jadi saya memiliki tombol lain di sini di halaman rumah saya disebut ganda. Dan ketika saya klik ganda, dan memberitahu saya sebelum itu adalah salah satu, dua, tiga, empat, lima setelah dua, empat, enam, delapan, 10. Dan jika aku kembali dan klik ganda lagi, dua, empat, enam, delapan, 10. Dan kemudian setelah, empat, delapan, 12, 16, dan kemudian 20. Dan apa yang saya lakukan dalam fungsi ini? Nah, jika kita hanya mampir ke IDE, dan Aku menarik fungsi anonim saya, di sini on line tujuh sampai 13, aku melakukan sedikit pekerjaan yang mewah di sini, tapi aku hanya mencetak apa yang saat ini dalam array. Kemudian pada baris 16, 17, dan 18, ada peta saya. Di sinilah aku menerapkan penggandaan ini fungsi untuk setiap elemen tunggal. Dan kemudian sedikit lebih bawah, Aku hanya melakukan hal yang sama Saya melakukan sebelumnya, kecuali sekarang aku mencetak isi array setelah itu. Tapi semua saya lakukan di sini adalah hanya menggunakan fungsi anonim untuk memetakan di seluruh array. 

Jadi satu topik besar untuk berbicara tentang di JavaScript adalah gagasan dari suatu peristiwa. Sebuah acara adalah sesuatu yang hanya terjadi ketika pengguna berinteraksi dengan web Anda Halaman, jadi mungkin mereka klik sesuatu, atau mungkin halaman tersebut selesai loading, atau mungkin mereka sudah pindah mouse mereka atas sesuatu, atau mereka telah mengetik sesuatu dalam field input. Semua hal ini merupakan peristiwa yang terjadi pada halaman web kami. Dan JavaScript memiliki kemampuan untuk mendukung sesuatu disebut sebuah event handler, yang adalah fungsi callback yang merespon sebuah event html. Dan apa fungsi callback? Nah, itu umumnya hanya lain nama untuk fungsi anonim. Ini fungsi yang merespon suatu peristiwa. Dan ini adalah di mana kita datang ke Ide mengikat fungsi tertentu untuk atribut html tertentu. Kebanyakan elemen html dukungan untuk atribut bahwa kita tidak berbicara tentang di html video untuk sesuatu seperti di klik atau di hover atau pada beban, semua peristiwa ini yang kemudian dapat menulis fungsi yang berhubungan dengan kejadian-kejadian ketika peristiwa-peristiwa terjadi pada halaman web Anda. 

Dan jadi mungkin html Anda terlihat seperti ini. Dan saya memiliki dua tombol di sini, tombol satu dan tombol dua, dan di sini saya punya saat ini tidak didefinisikan, tapi ini adalah di mana atribut pada klik tampaknya bagian dari tag html saya. Jadi rupanya ketika saya mendefinisikan apa terjadi di dalam atribut itu, itu akan menjadi beberapa JavaScript fungsi yang merespon acara mungkin mengklik Tombol satu atau dua tombol. 

Apa jenis keren tentang ini adalah kita dapat menulis event handler generik. Dan acara ini akan Handler membuat objek acara. Dan objek acara akan memberitahu kita yang mana dari dua tombol diklik. Sekarang bagaimana itu bekerja? Nah, mungkin terlihat seperti ini. Jadi pertama-tama kita akan menentukan tombol kami untuk memiliki respon callback fungsi yang akan dipanggil ketika tombol diklik, kami akan memanggil event nama peringatan. Dan melihat di kedua kasus kami lewat di parameter acara ini. Jadi kita sebut fungsi ini atau ketika fungsi ini dipicu oleh peristiwa yang terjadi, itu akan membuat objek acara ini dan menyebarkannya sebagai parameter untuk mengingatkan nama. Dan bahwa objek acara adalah akan mengandung informasi tentang yang tombol diklik. Dan bagaimana cara melakukannya? Nah, mungkin terlihat seperti ini. Jadi sekarang di saya terpisah File JavaScript, aku mungkin harus menemukan ini Fungsi nama waspada, yang lagi menerima bahwa parameter event. Dan kemudian di sini adalah di mana aku mendeteksi tombol yang dipicu, var memicu sama acara elemen sumber dot. Apa sumber yang diciptakan objek acara ini yang disahkan di? Apakah itu tombol satu atau itu tombol dua? 

Dan kemudian di sini semua saya lakukan adalah mencetak trigger.innerhtml. Nah, dalam hal ini, dalam hal ini konteks, trigger.innerhtml hanya apa yang tertulis pada tombol. Kebetulan jika kita melompat kembali untuk kedua, yang akan menjadi apa yang ada di antara mereka tag tombol. Ini akan menjadi tombol satu atau dua tombol. Dan mari kita lihat bagaimana event handler ini akan terlihat jika kita memiliki berjalan dalam praktek. 

Jadi pertama-tama, Anda sudah membuka events.js, yang merupakan file JavaScript mana Aku telah menetapkan fungsi ini. Dan seperti yang Anda lihat, itu cukup banyak persis apa kita hanya melihat pada slide kedua lalu. Dan aku akan pergi ke halaman rumah kami telah menggunakan. Dan saya miliki di sini tombol satu dan dua tombol. Dan aku akan klik pada tombol satu. Anda klik pada tombol satu, jika Anda bisa melihat di sini, di waspada. OKE. Klik pada tombol dua, Anda mengklik tombol dua. 

Jadi kedua tombol memiliki fungsi panggilan yang sama, kan? Mereka berdua adalah nama peringatan acara, tapi objek acara ini yang akan dibuat ketika kita klik itu memberitahu kita tombol yang diklik. Kami tidak harus menulis dua terpisah fungsi atau kesepakatan dengan memiliki untuk menyampaikan informasi tambahan. Kami hanya mengandalkan apa JavaScript akan lakukan untuk kita, yang adalah untuk menciptakan semacam acara objek atas nama kami. Ada lebih banyak untuk JavaScript dari apa yang telah kita bahas dalam video ini, tetapi memiliki ini mendasar harus mendapatkan Anda cukup cara lama untuk belajar segala sesuatu yang Anda akan perlu tahu tentang ini bahasa yang menarik. Aku Doug Lloyd. Ini adalah CS50.