1 00:00:00,000 --> 00:00:03,840 >> [Bermain muzik] 2 00:00:03,840 --> 00:00:05,770 3 00:00:05,770 --> 00:00:08,690 >> DOUG LLOYD: Jadi sekarang kita dah tua pro di pengaturcaraan web, bukan? 4 00:00:08,690 --> 00:00:12,140 Dan kami telah meliputi beberapa bahasa dalam video individu. 5 00:00:12,140 --> 00:00:14,690 Dan sekarang mari kita buat satu lagi, JavaScript. 6 00:00:14,690 --> 00:00:17,370 >> Pertama berita baik, JavaScript adalah pengaturcaraan moden 7 00:00:17,370 --> 00:00:21,410 bahasa sama seperti PHP yang sintaks berasal dari C, 8 00:00:21,410 --> 00:00:22,830 maka itulah tempat yang baik untuk bermula. 9 00:00:22,830 --> 00:00:25,880 Ia kira-kira lama seperti PHP, dan juga, telah dianjurkan kira-kira 20 tahun. 10 00:00:25,880 --> 00:00:28,600 Ia dicipta sekitar masa yang sama seperti PHP. 11 00:00:28,600 --> 00:00:32,240 Dan JavaScript sebenarnya cukup asas kepada pengalaman pengguna 12 00:00:32,240 --> 00:00:32,740 web. 13 00:00:32,740 --> 00:00:34,448 Malah, terdapat tiga bahasa yang saya 14 00:00:34,448 --> 00:00:38,480 akan berkata semacam membentuk pengalaman pengguna untuk berinteraksi 15 00:00:38,480 --> 00:00:42,650 dengan laman web, html, css, dan JavaScript. 16 00:00:42,650 --> 00:00:46,030 Dan sekarang mari kita bercakap sedikit sedikit tentang JavaScript. 17 00:00:46,030 --> 00:00:50,301 >> Berita buruk, walaupun, dengan JavaScript bahawa ia menetapkan banyak peraturan untuk dirinya sendiri, 18 00:00:50,301 --> 00:00:51,300 dan kemudian ia memecahkan mereka. 19 00:00:51,300 --> 00:00:54,010 Dan JavaScript sebenarnya boleh sejenis mencabar untuk belajar, 20 00:00:54,010 --> 00:00:57,000 kerana ia tidak seperti C dan PHP, yang sangat berstruktur 21 00:00:57,000 --> 00:01:00,270 dan mempunyai peraturan yang sangat tegar untuk bagaimana perkara yang boleh bekerja. 22 00:01:00,270 --> 00:01:03,690 JavaScript mempunyai jenis daripada mendapat begitu fleksibel 23 00:01:03,690 --> 00:01:06,650 bahawa mungkin perkara-perkara yang tidak akan bekerja dengan cara yang kita harapkan mereka untuk, 24 00:01:06,650 --> 00:01:09,830 dan mungkin kita benar-benar tidak boleh belajar bahasa pengaturcaraan pertama kami 25 00:01:09,830 --> 00:01:10,769 sebagai JavaScript. 26 00:01:10,769 --> 00:01:12,810 Jadi mungkin kerana ia tidak menetapkan sendiri apa-apa peraturan, 27 00:01:12,810 --> 00:01:15,754 dan ia tidak benar-benar menguatkuasakan Tabiat pengekodan yang baik. 28 00:01:15,754 --> 00:01:18,170 Tetapi sekarang kita telah diharapkan dibangunkan beberapa tabiat pengekodan yang baik, 29 00:01:18,170 --> 00:01:21,470 dan dengan itu kita boleh mula untuk batu loncatan ke dalam JavaScript sedikit. 30 00:01:21,470 --> 00:01:25,750 >> Untuk menulis JavaScript, sama dengan pembukaan sebuah fail C dengan titik C lanjutan 31 00:01:25,750 --> 00:01:29,770 atau fail PHP dengan sambungan dot PHP, semua yang perlu kita lakukan adalah membuka fail 32 00:01:29,770 --> 00:01:31,764 dengan dot js sambungan fail. 33 00:01:31,764 --> 00:01:34,430 Kita tidak perlu mempunyai apa-apa yang istimewa pembatas seperti yang kami lakukan dalam PHP. 34 00:01:34,430 --> 00:01:36,750 Yang jenis sudut kurungan tanda tanya PHP 35 00:01:36,750 --> 00:01:40,300 yang kita digunakan untuk itu, cara kita memberitahu pelayar kami bahawa apa yang kita ada adalah 36 00:01:40,300 --> 00:01:43,502 JavaScript adalah dengan memasukkan dalam tag html, 37 00:01:43,502 --> 00:01:46,210 dan kita akan melihat sedikit tentang bagaimana untuk melakukannya dalam hanya seketika. 38 00:01:46,210 --> 00:01:48,210 >> Perkara lain yang membuat JavaScript yang berbeza, 39 00:01:48,210 --> 00:01:50,580 walaupun, adalah bahawa ia berjalan pihak pelanggan. 40 00:01:50,580 --> 00:01:53,430 Jadi ingat dengan PHP yang kami sebelum itu tidak benar-benar melihat 41 00:01:53,430 --> 00:01:57,041 PHP yang digariskan laman web. 42 00:01:57,041 --> 00:01:59,040 Jika kita pernah dilihat di sumber halaman, kami akan hanya 43 00:01:59,040 --> 00:02:02,830 melihat html yang di yang dihasilkan oleh PHP. 44 00:02:02,830 --> 00:02:04,900 Tetapi JavaScript berjalan pihak pelanggan. 45 00:02:04,900 --> 00:02:06,710 JavaScript anda berjalan pada komputer anda. 46 00:02:06,710 --> 00:02:09,050 Dan itulah mengapa anda boleh lakukan perkara yang suka menambah penghalang. 47 00:02:09,050 --> 00:02:09,550 Betul? 48 00:02:09,550 --> 00:02:12,704 Menyekat iklan yang biasa dilakukan oleh membunuh semua JavaScript 49 00:02:12,704 --> 00:02:14,370 yang sedang dijalankan pada laman web tertentu. 50 00:02:14,370 --> 00:02:19,000 Dan kerana ia perlu berjalan di sebelah pelanggan mesin anda, 51 00:02:19,000 --> 00:02:21,910 anda hanya boleh menghentikan JavaScript untuk menjalankan sepenuhnya. 52 00:02:21,910 --> 00:02:27,030 Itu juga bermakna bahawa apabila anda menggunakan sebuah laman web yang merangkumi JavaScript, 53 00:02:27,030 --> 00:02:32,450 anda perlu menghantar sumber JavaScript kod sebagai sebahagian daripada tindak balas http anda 54 00:02:32,450 --> 00:02:34,159 kepada pelanggan apabila mereka memintanya. 55 00:02:34,159 --> 00:02:35,950 Dan supaya anda mungkin tidak mahu menggunakan JavaScript 56 00:02:35,950 --> 00:02:38,395 untuk melakukan perkara yang benar-benar sensitif seperti maklumat lulus 57 00:02:38,395 --> 00:02:41,020 mengenai kata laluan pengguna belakang dan sebagainya, kerana mereka benar-benar 58 00:02:41,020 --> 00:02:45,610 akan menerima semua kod sumber, bukan hanya html yang dihasilkan, 59 00:02:45,610 --> 00:02:49,030 seperti akan menjadi kes itu dengan berkata PHP. 60 00:02:49,030 --> 00:02:51,620 >> Jadi bagaimana kita termasuk JavaScript dalam html kami untuk memulakan dengan? 61 00:02:51,620 --> 00:02:54,520 Nah, sama dengan CSS, sebenarnya, adalah jenis bagaimana kita melakukannya di sini. 62 00:02:54,520 --> 00:02:56,190 Dengan CSS kita mempunyai tag gaya. 63 00:02:56,190 --> 00:03:00,760 Dan di dalam tag tersebut gaya, kita boleh menentukan lembaran gaya CSS. 64 00:03:00,760 --> 00:03:03,450 Begitu juga dengan JavaScript boleh kita membuka tag skrip, 65 00:03:03,450 --> 00:03:06,660 lain tag html kita tidak bercakap tentang dalam video html kami, 66 00:03:06,660 --> 00:03:09,720 dan menulis JavaScript dalam antara orang-orang tag skrip. 67 00:03:09,720 --> 00:03:13,960 Juga walaupun, seperti CSS, kita boleh menghubungkan di luar fail CSS 68 00:03:13,960 --> 00:03:15,900 dan menarik mereka ke dalam program kami dengan cara itu. 69 00:03:15,900 --> 00:03:18,280 Dengan CSS kami juga boleh, maafkan saya, dengan JavaScript 70 00:03:18,280 --> 00:03:23,240 kami juga boleh menentukan sumber atribut tag skrip 71 00:03:23,240 --> 00:03:25,720 untuk menghubungkan dalam JavaScript secara berasingan, supaya anda tidak 72 00:03:25,720 --> 00:03:27,680 perlu menulis dalam antara tag skrip, kita 73 00:03:27,680 --> 00:03:29,600 boleh link dalam menggunakan bahawa tag skrip juga. 74 00:03:29,600 --> 00:03:33,230 Dan seperti dengan kes itu dengan CSS mana kami mencadangkan bahawa ia mungkin 75 00:03:33,230 --> 00:03:36,090 demi kepentingan terbaik anda untuk menulis CSS anda dalam fail yang berasingan dalam kes 76 00:03:36,090 --> 00:03:38,500 anda perlu mengubahnya, begitu juga kita mengesyorkan 77 00:03:38,500 --> 00:03:40,720 yang anda tulis anda JavaScript dalam fail yang berasingan 78 00:03:40,720 --> 00:03:45,460 dan menggunakan sumber tag skrip atribut untuk mengikat anda JavaScript 79 00:03:45,460 --> 00:03:49,520 ke dalam html anda, laman web anda. 80 00:03:49,520 --> 00:03:52,610 >> Pembolehubah supaya JavaScript, kami akan mula bercakap tentang sintaks di sini. 81 00:03:52,610 --> 00:03:53,600 Dan kita akan pergi melalui jenis ini dengan cepat, 82 00:03:53,600 --> 00:03:56,640 kerana kita telah melakukan ini dalam PHP, jadi ini semua harus cukup biasa. 83 00:03:56,640 --> 00:03:59,490 Jadi pembolehubah dalam JavaScript adalah hampir sama dengan PHP pembolehubah. 84 00:03:59,490 --> 00:04:03,270 Tidak ada jenis specifier, dan apabila anda memperkenalkan pembolehubah, 85 00:04:03,270 --> 00:04:05,070 anda awalan dengan kata kunci var. 86 00:04:05,070 --> 00:04:07,750 Dalam PHP kita akan melakukan sesuatu seperti ini, tanda dolar x. 87 00:04:07,750 --> 00:04:09,950 Itulah bagaimana kita ditunjukkan pembolehubah, tetapi tidak, kita 88 00:04:09,950 --> 00:04:12,060 tidak menyebutkan jenis pembolehubah sama sekali. 89 00:04:12,060 --> 00:04:15,124 Kami akan mengatakan sesuatu seperti dolar tanda x sama 44 dalam PHP. 90 00:04:15,124 --> 00:04:17,040 Jika kita melakukan perkara yang Perkara yang sama dalam JavaScript, 91 00:04:17,040 --> 00:04:19,589 kita akan berkata var x sama 44. 92 00:04:19,589 --> 00:04:22,780 Jadi var adalah jenis cara kita memperkenalkan pembolehubah. 93 00:04:22,780 --> 00:04:26,850 Itulah mungkin sedikit lebih intuitif daripada tanda hanya dolar berubah-ubah. 94 00:04:26,850 --> 00:04:29,080 >> Sekali lagi, kerana tidak ada jenis data, kita boleh melakukan ini 95 00:04:29,080 --> 00:04:34,490 dengan apa-apa jenis data, tali, apa-apa lagi semua akan var. 96 00:04:34,490 --> 00:04:37,260 Syarat yang, semua kami kawan-kawan lama dari C dan PHP 97 00:04:37,260 --> 00:04:41,640 masih ada, jadi kita perlu jika, lain jika, lain, suis dan soalan 98 00:04:41,640 --> 00:04:42,240 tanda kolon. 99 00:04:42,240 --> 00:04:45,890 Switch kekal sebagai fleksibel kerana ia adalah dalam PHP, tetapi semua ini anda 100 00:04:45,890 --> 00:04:46,930 biasa dengan sekarang. 101 00:04:46,930 --> 00:04:49,900 Begitu juga dengan gelung adalah pasukan pilihan lama manakala, 102 00:04:49,900 --> 00:04:52,700 lakukan semasa, dan untuk masih ada pada kita. 103 00:04:52,700 --> 00:04:55,880 Jadi sudah kita tahu banyak daripada JavaScript jenis asas asas 104 00:04:55,880 --> 00:05:01,800 hanya kerana mempunyai agak sedikit pengetahuan kini kira-kira C dan PHP. 105 00:05:01,800 --> 00:05:03,670 >> Bagaimana pula dengan fungsi dalam JavaScript? 106 00:05:03,670 --> 00:05:08,199 Nah, sama dengan PHP setiap fungsi adalah diperkenalkan dengan kata kunci fungsi. 107 00:05:08,199 --> 00:05:10,740 Anda mengatakan fungsi, dan kemudian anda mula menentukan fungsi anda. 108 00:05:10,740 --> 00:05:12,531 Apa yang sedikit berbeza tentang JavaScript, 109 00:05:12,531 --> 00:05:15,700 walaupun adalah keupayaan untuk mempunyai apa yang dipanggil fungsi tanpa nama. 110 00:05:15,700 --> 00:05:18,880 Jadi, anda boleh menentukan fungsi yang tidak mempunyai nama. 111 00:05:18,880 --> 00:05:21,222 Ini adalah sesuatu yang kita benar-benar tidak dilihat sebelum ini. 112 00:05:21,222 --> 00:05:23,430 Kami benar-benar akan menggunakan konsep daripada fungsi tanpa nama 113 00:05:23,430 --> 00:05:27,880 sedikit kemudian dalam ini video, kerana ia akan 114 00:05:27,880 --> 00:05:31,530 lebih masuk akal sedikit dalam konteks bila kita melihatnya dalam keadaan tertentu 115 00:05:31,530 --> 00:05:33,120 yang saya telah dibuat di sini. 116 00:05:33,120 --> 00:05:35,710 Tetapi mari kita melihat dengan bagaimana seorang JavaScript mudah 117 00:05:35,710 --> 00:05:37,850 fungsi mungkin kelihatan seperti. 118 00:05:37,850 --> 00:05:40,610 >> Oleh itu, saya telah pergi ke hadapan dan membuka IDE CS50 saya 119 00:05:40,610 --> 00:05:43,690 dan saya telah pun menjalankan Apache mulai berjalan pelayan saya. 120 00:05:43,690 --> 00:05:46,800 Dan saya mempunyai fail ini open dipanggil Home.html. 121 00:05:46,800 --> 00:05:48,330 Dan saya akan zum dalam sedikit di sini. 122 00:05:48,330 --> 00:05:52,090 Dan pada dasarnya, anda boleh melihat Home.html adalah hanya sekumpulan butang. 123 00:05:52,090 --> 00:05:55,291 Dan saya menuntut di atas di sini bahawa ini adalah seksyen JavaScript 124 00:05:55,291 --> 00:05:55,790 bahan-bahan. 125 00:05:55,790 --> 00:05:59,490 Jadi ada sekumpulan butang di sini, tetapi apa yang butang ini benar-benar melakukan? 126 00:05:59,490 --> 00:06:03,662 >> Baiklah, kami akan menuju ke IED saya, dan saya telah Home.html membuka sini. 127 00:06:03,662 --> 00:06:05,620 Pada awal-awal lagi, di sini di mana saya menghubungkan 128 00:06:05,620 --> 00:06:07,500 dalam semua fail sumber JavaScript saya. 129 00:06:07,500 --> 00:06:08,000 Betul? 130 00:06:08,000 --> 00:06:12,440 Jadi saya mempunyai anonymous.js, clock.js, Saya menggunakan atribut sumber 131 00:06:12,440 --> 00:06:14,440 tag skrip untuk menghubungkan dalam fail. 132 00:06:14,440 --> 00:06:18,660 Jadi saya tidak ditulis apa-apa JavaScript terus ke dalam fail ini, 133 00:06:18,660 --> 00:06:21,790 tetapi saya telah ditarik dalam semua JavaScript saya telah menulis secara berasingan. 134 00:06:21,790 --> 00:06:24,540 Dan jika kita tatal ke bawah di sini, ini semua perlu kelihatan agak biasa 135 00:06:24,540 --> 00:06:27,090 dengan sedikit sintaks baru. 136 00:06:27,090 --> 00:06:32,655 Kami telah di tag header untuk fungsi dan kemudian butang. 137 00:06:32,655 --> 00:06:35,530 Saya mempunyai input itu adalah satu butang jenis, dan nampaknya apabila saya klik, 138 00:06:35,530 --> 00:06:38,130 Saya akan memanggil beberapa berfungsi tarikh berjaga-jaga. 139 00:06:38,130 --> 00:06:41,792 Dan ini adalah bagaimana kita boleh menyusun adukkan sedikit JavaScript dan html. 140 00:06:41,792 --> 00:06:44,500 Mereka sebenarnya bermain agak baik bersama-sama, dan sebagainya nampaknya apabila 141 00:06:44,500 --> 00:06:48,730 Saya klik pada butang ini, saya akan untuk memanggil beberapa tarikh fungsi berjaga-jaga. 142 00:06:48,730 --> 00:06:53,660 Begitu juga aku ditakrifkan tingkah laku untuk semua butang lain yang 143 00:06:53,660 --> 00:06:56,440 berada di bahawa laman home.html, yang kita akan menyimpan kembali 144 00:06:56,440 --> 00:06:59,172 ke semasa video ini. 145 00:06:59,172 --> 00:07:00,880 Tetapi mari kita naik semula di sini dan kita lihat 146 00:07:00,880 --> 00:07:03,850 di clock.js, yang merupakan Fail JavaScript saya 147 00:07:03,850 --> 00:07:07,370 menulis yang mempunyai fungsi pertama ini kita akan mengambil melihat. 148 00:07:07,370 --> 00:07:11,630 Seperti yang anda lihat, saya mula JavaScript saya berfungsi dengan fungsi kata kunci, 149 00:07:11,630 --> 00:07:14,560 dan saya telah diberikan ini satu nama, ia dipanggil tarikh berjaga-jaga. 150 00:07:14,560 --> 00:07:18,710 Di dalam sana, saya nampaknya membuat pembolehubah tempatan baru yang dikenali sebagai tarikh semasa. 151 00:07:18,710 --> 00:07:21,500 Dan saya akan untuk menetapkan yang sama dengan tarikh baru. 152 00:07:21,500 --> 00:07:24,430 Dan kita boleh masuk ke dalam banyak detail apa tarikh yang adalah, 153 00:07:24,430 --> 00:07:27,060 dan benar-benar JavaScript begitu besar bahawa kita tidak mungkin boleh 154 00:07:27,060 --> 00:07:28,330 meliputi segala-galanya dalam satu video. 155 00:07:28,330 --> 00:07:32,220 Tetapi memadai untuk mengatakan, ini akan Kepada Akulah tempat kembali item data yang 156 00:07:32,220 --> 00:07:35,470 merangkumi tarikh dan masa semasa. 157 00:07:35,470 --> 00:07:39,100 Saya menyimpan bahawa dalam pembolehubah bahawa saya nampaknya akan memberi isyarat kepada tarikh semasa. 158 00:07:39,100 --> 00:07:41,300 >> Well, apa yang tidak berjaga-jaga lihat tarikh semasa seperti? 159 00:07:41,300 --> 00:07:46,460 Mari kita lihat pada fail itu sendiri menyokong alih dalam tetingkap pelayar. 160 00:07:46,460 --> 00:07:49,551 Jadi sekali lagi, ini adalah butang yang saya telah terikat kepada, ini fungsi yang dinamakan. 161 00:07:49,551 --> 00:07:51,800 Dan saya klik sana dan melihat apa yang ia lakukan, ia dimaklumkan. 162 00:07:51,800 --> 00:07:56,140 Ia muncul seperti ini kotak memberitahu saya bahawa masa semasa, nampaknya 163 00:07:56,140 --> 00:07:59,370 ia adalah 4 November di 10:43:43 pagi. 164 00:07:59,370 --> 00:08:02,345 Dan jika saya klik sekali lagi, kini itu beberapa saat kemudian, bukan? 165 00:08:02,345 --> 00:08:03,720 Jadi itu sahaja fungsi ini tidak. 166 00:08:03,720 --> 00:08:07,670 Apabila saya klik butang ini, ia muncul mesej amaran kepada saya. 167 00:08:07,670 --> 00:08:13,806 168 00:08:13,806 --> 00:08:15,690 Jadi ada benar-benar tidak terlalu banyak untuk fungsi 169 00:08:15,690 --> 00:08:19,110 yang berbeza daripada PHP, hanya sedikit sintaks baru 170 00:08:19,110 --> 00:08:22,500 yang datang dengan bekerja dengan JavaScript. 171 00:08:22,500 --> 00:08:24,650 >> Array dalam JavaScript adalah agak mudah. 172 00:08:24,650 --> 00:08:27,200 Untuk mengisytiharkan array, anda menggunakan sintaks kurungan persegi 173 00:08:27,200 --> 00:08:30,090 yang kita sudah biasa dengan dari PHP. 174 00:08:30,090 --> 00:08:33,432 Dan sama dengan PHP, kita juga boleh mencampurkan jenis data. 175 00:08:33,432 --> 00:08:35,140 Jadi pelbagai ini, kedua-dua array ini akan 176 00:08:35,140 --> 00:08:36,960 menjadi sempurna yang sah JavaScript. 177 00:08:36,960 --> 00:08:42,500 Satu itu sahaja bilangan bulat, dan satu yang yang bercampur jenis data yang berbeza. 178 00:08:42,500 --> 00:08:45,020 >> Apakah sesuatu yang sangat berbeza dalam JavaScript, walaupun? 179 00:08:45,020 --> 00:08:47,020 Itulah tanggapan objek. 180 00:08:47,020 --> 00:08:50,240 Jadi mungkin anda pernah mendengar pengaturcaraan berorientasikan objek. 181 00:08:50,240 --> 00:08:53,370 Kami tidak melakukan banyak dalam CS50, tetapi kami akan melakukan sedikit ia 182 00:08:53,370 --> 00:08:55,670 di sini dalam konteks JavaScript. 183 00:08:55,670 --> 00:08:59,100 Sekarang JavaScript mempunyai keupayaan untuk berkelakuan sebagai pengaturcaraan berorientasikan objek 184 00:08:59,100 --> 00:09:02,615 bahasa, tetapi ia tidak sendiri semata-mata objek berorientasikan 185 00:09:02,615 --> 00:09:03,490 bahasa pengaturcaraan. 186 00:09:03,490 --> 00:09:05,281 Dan ini sekali lagi datang kembali kepada mengapa saya katakan, ia 187 00:09:05,281 --> 00:09:10,610 boleh menjadi sangat mencabar untuk belajar JavaScript sebagai pengaturcaraan pertama anda 188 00:09:10,610 --> 00:09:13,890 bahasa, kerana ia tidak benar-benar sesuai paradigma tertentu. 189 00:09:13,890 --> 00:09:16,430 >> C pula ialah bahasa pengaturcaraan berfungsi. 190 00:09:16,430 --> 00:09:22,270 Jika kita mahu, fungsi adalah jenis manusia bos besar, bukan? 191 00:09:22,270 --> 00:09:24,410 Mereka menentukan apa berlaku segala-galanya. 192 00:09:24,410 --> 00:09:26,600 Kami mahu mengubah pembolehubah, kita panggil fungsi. 193 00:09:26,600 --> 00:09:28,220 Kami melakukan sesuatu bagi fungsi. 194 00:09:28,220 --> 00:09:31,250 Objek sebaliknya, dalam membantah bahasa berorientasikan, 195 00:09:31,250 --> 00:09:35,937 objek semacam menjadi bintang dan fungsi menjadi semacam menengah. 196 00:09:35,937 --> 00:09:38,270 Tetapi apa yang objek, apa adalah tanggapan ini objek? 197 00:09:38,270 --> 00:09:40,880 Nah, jika ia membantu, berfikir mengenainya pada jenis pertama 198 00:09:40,880 --> 00:09:44,540 daripada seperti struktur C atau struct yang kita telah belajar tentang sebelum ini. 199 00:09:44,540 --> 00:09:47,430 Dalam C, struktur yang mengandungi beberapa bidang, 200 00:09:47,430 --> 00:09:51,174 dan mungkin kita sekarang mungkin mula memanggil sifat-sifat bidang. 201 00:09:51,174 --> 00:09:53,590 Tetapi sifat-sifat tidak pernah berdiri di atas mereka sendiri, bukan? 202 00:09:53,590 --> 00:09:56,410 Jika saya menentukan struktur untuk kereta seperti ini dengan dua berikut 203 00:09:56,410 --> 00:10:00,750 bidang atau harta, salah satu integer bagi tahun dari kereta 204 00:10:00,750 --> 00:10:04,290 dan satu lagi watak 10 tali untuk model kereta, 205 00:10:04,290 --> 00:10:07,150 Saya boleh mengatakan sesuatu seperti ini, Aku hendak mengatakan pembolehubah baru 206 00:10:07,150 --> 00:10:10,080 jenis kereta struct Herbie. 207 00:10:10,080 --> 00:10:13,730 Dan kemudian saya boleh mengatakan sesuatu seperti herbie.year sama 1963, 208 00:10:13,730 --> 00:10:15,850 dan herbie.model sama Beetle. 209 00:10:15,850 --> 00:10:17,000 Tak apa. 210 00:10:17,000 --> 00:10:19,680 Saya menggunakan medan dalam konteks struktur, 211 00:10:19,680 --> 00:10:22,290 tetapi saya boleh tidak hanya mengatakan sesuatu seperti ini. 212 00:10:22,290 --> 00:10:22,790 Betul? 213 00:10:22,790 --> 00:10:26,836 Saya tidak boleh menggunakan nama medan bebas daripada struktur. 214 00:10:26,836 --> 00:10:28,210 Ia semacam satu perkara yang asas. 215 00:10:28,210 --> 00:10:32,990 >> Jadi bidang yang asas kepada struktur C 216 00:10:32,990 --> 00:10:39,050 yang hampir sama dengan ciri-ciri yang asas kepada objek JavaScript. 217 00:10:39,050 --> 00:10:42,080 Tetapi apa yang membuatkan mereka amat menarik 218 00:10:42,080 --> 00:10:46,230 adalah bahawa objek juga boleh mempunyai apa dipanggil kaedah, yang benar-benar 219 00:10:46,230 --> 00:10:50,730 hanya satu perkataan mewah untuk fungsi-fungsi yang sedia ada kepada objek juga. 220 00:10:50,730 --> 00:10:55,340 Jadi ia adalah fungsi yang hanya boleh menjadi dipanggil dalam konteks objek. 221 00:10:55,340 --> 00:10:59,200 Hanya satu objek yang telah ditakrifkan fungsi ini di dalam, yang 222 00:10:59,200 --> 00:11:02,020 jika anda berfikir tentang struct, fungsi 223 00:11:02,020 --> 00:11:05,720 ditakrifkan dalam orang-orang yang menentukan pendakap kerinting struktur. 224 00:11:05,720 --> 00:11:07,980 Oleh itu, ia hanya bermaksud sesuatu kepada struktur. 225 00:11:07,980 --> 00:11:10,960 Dan itulah jenis apa yang kita lakukan di sini dengan objek dan kaedah. 226 00:11:10,960 --> 00:11:13,580 Ia pada dasarnya seperti kita mentakrifkan fungsi yang 227 00:11:13,580 --> 00:11:16,670 hanya masuk akal pada objek tertentu, dan dengan itu kita 228 00:11:16,670 --> 00:11:19,440 memanggil bahawa kaedah objek. 229 00:11:19,440 --> 00:11:23,180 Dan kita tidak boleh memanggil bahawa berfungsi secara berkecuali objek, 230 00:11:23,180 --> 00:11:29,260 sama seperti kita tidak boleh mengatakan tahun atau model bebas daripada struct dalam C. 231 00:11:29,260 --> 00:11:32,300 >> Pengaturcaraan supaya berfungsi paradigma melihat sesuatu seperti ini. 232 00:11:32,300 --> 00:11:35,450 Fungsi dan kemudian apabila anda lulus dalam objek sebagai parameter. 233 00:11:35,450 --> 00:11:38,650 Dalam pengaturcaraan berorientasikan objek bahasa, ini semacam mendapat 234 00:11:38,650 --> 00:11:43,464 dibalik, dan kita akan berfikir tentang ia seperti ini, object.function. 235 00:11:43,464 --> 00:11:45,380 Jadi ia semacam dot yang Pengendali lagi membayangkan 236 00:11:45,380 --> 00:11:49,540 bahawa itu beberapa jenis harta atau sifat objek itu sendiri. 237 00:11:49,540 --> 00:11:53,240 Tetapi ini adalah apa objek bahasa pengaturcaraan berorientasikan 238 00:11:53,240 --> 00:11:57,150 mungkin lakukan untuk membuat fungsi menyeru kepada kaedah yang, sekali lagi, yang 239 00:11:57,150 --> 00:12:00,260 hanya satu perkataan khas untuk majlis yang wujud untuk objek. 240 00:12:00,260 --> 00:12:03,440 Ini adalah apa yang sintaks mungkin kelihatan seperti. 241 00:12:03,440 --> 00:12:09,360 Dan dengan itu kita akan mula melihat beberapa ini dalam konteks JavaScript. 242 00:12:09,360 --> 00:12:12,470 >> Anda juga boleh berfikir tentang objek jenis seperti pelbagai bersekutu, 243 00:12:12,470 --> 00:12:14,160 yang kita sudah biasa dengan dari PHP. 244 00:12:14,160 --> 00:12:17,720 Ingat pelbagai bersekutu membolehkan kita mempunyai pasangan nilai utama, bukan 245 00:12:17,720 --> 00:12:23,040 mempunyai indeks 0, satu, dua, tiga, dan sebagainya seperti kita digunakan untuk dari C 246 00:12:23,040 --> 00:12:23,940 tatasusunan. 247 00:12:23,940 --> 00:12:27,472 Array bersekutu boleh memetakan perkataan, seperti dalam video PHP, 248 00:12:27,472 --> 00:12:29,180 kita bercakap tentang topping pizza. 249 00:12:29,180 --> 00:12:31,180 Dan dengan itu kita mempunyai array dipanggil pizza, dan kami 250 00:12:31,180 --> 00:12:36,670 mempunyai keju adalah kunci dan $ 8,99 adalah nilai, dan kemudian peperoni adalah kunci, 251 00:12:36,670 --> 00:12:39,190 $ 9,99 adalah nilai, dan sebagainya. 252 00:12:39,190 --> 00:12:43,300 Dan dengan itu kita juga boleh berfikir tentang yang membantah semacam sama dengan bersekutu yang 253 00:12:43,300 --> 00:12:43,840 array. 254 00:12:43,840 --> 00:12:47,020 Dan sebagainya sintaks ini di sini akan mewujudkan objek baru 255 00:12:47,020 --> 00:12:50,950 dipanggil Herbie dengan dua sifat-sifat di dalamnya. 256 00:12:50,950 --> 00:12:57,310 Tahun, yang diberikan nilai tahun 1963, dan model, yang diberikan tali 257 00:12:57,310 --> 00:12:58,140 Beetle. 258 00:12:58,140 --> 00:13:01,770 >> Dan perhatikan di sini bahawa saya menggunakan petikan tunggal dalam JavaScript. 259 00:13:01,770 --> 00:13:05,570 Anda boleh menggunakan tanda petikan tunggal atau berpasangan apabila anda bercakap tentang tali. 260 00:13:05,570 --> 00:13:07,772 Ia hanya konvensional kes yang kebanyakan masa 261 00:13:07,772 --> 00:13:10,230 apabila anda menulis JavaScript, anda hanya menggunakan petikan tunggal. 262 00:13:10,230 --> 00:13:15,050 Tetapi saya boleh menggunakan tanda petik di sini, dan yang akan menjadi sempurna denda juga. 263 00:13:15,050 --> 00:13:17,470 >> Jadi ingat bagaimana dalam PHP kita mempunyai tanggapan ini 264 00:13:17,470 --> 00:13:22,730 satu bagi setiap gelung yang akan membolehkan kita untuk melelar semua nilai utama 265 00:13:22,730 --> 00:13:25,270 pasang bersekutu yang pelbagai, kerana kita 266 00:13:25,270 --> 00:13:29,050 tidak mempunyai keupayaan untuk melelar melalui 0, satu, dua, tiga, empat, 267 00:13:29,050 --> 00:13:30,710 dan sebagainya? 268 00:13:30,710 --> 00:13:35,010 JavaScript mempunyai sesuatu yang sangat serupa, tetapi ia tidak dipanggil bagi setiap gelung, 269 00:13:35,010 --> 00:13:38,960 ia dipanggil dalam gelung. 270 00:13:38,960 --> 00:13:42,890 Jadi, jika saya berkata kepada saya seperti ini, bagi kekunci var dalam objek, 271 00:13:42,890 --> 00:13:48,670 itulah jenis sama dengan mengatakan bagi setiap sesuatu yang sesuatu. 272 00:13:48,670 --> 00:13:53,850 Tetapi semua yang saya lakukan di sini adalah iterating melalui semua kunci objek saya. 273 00:13:53,850 --> 00:13:56,070 Dan di dalam kerinting pendakap di sana, saya akan 274 00:13:56,070 --> 00:14:03,410 menggunakan objek utama kurungan persegi untuk merujuk kepada nilai di lokasi itu utama. 275 00:14:03,410 --> 00:14:05,400 >> Selain itu, ada walaupun pendekatan yang lain. 276 00:14:05,400 --> 00:14:10,880 Jika saya hanya hanya mengambil berat tentang nilai-nilai, yang boleh saya katakan untuk kekunci objek, 277 00:14:10,880 --> 00:14:12,360 dan hanya menggunakan kunci di dalam. 278 00:14:12,360 --> 00:14:17,240 Jadi untuk kunci var dalam objek, saya mempunyai menggunakan tanda kurung siku objek 279 00:14:17,240 --> 00:14:19,340 utama di dalam gelung. 280 00:14:19,340 --> 00:14:24,580 Untuk kekunci var objek, saya boleh hanya menggunakan utama di dalam gelung, 281 00:14:24,580 --> 00:14:29,040 kerana saya hanya khusus bercakap tentang nilai-nilai di sana. 282 00:14:29,040 --> 00:14:32,630 >> Jadi mari kita mungkin mengambil melihat perbezaan 283 00:14:32,630 --> 00:14:35,670 hanya untuk cepat menunjukkan kepada anda perbezaan di antara empat 284 00:14:35,670 --> 00:14:40,730 dalam dan bagi yang dengan sangat khusus pelbagai, yang kita ada di sini, minggu array. 285 00:14:40,730 --> 00:14:43,616 Jadi saya perlu mencari pelbagai baru bahawa saya dipenuhi dengan tujuh tali, 286 00:14:43,616 --> 00:14:46,240 Isnin, Selasa, Rabu, Khamis, Jumaat, Sabtu, Ahad. 287 00:14:46,240 --> 00:14:50,530 Dan saya mahu sekarang melelar melalui pelbagai ini, 288 00:14:50,530 --> 00:14:53,090 mencetak maklumat tertentu. 289 00:14:53,090 --> 00:14:58,780 Jika saya menggunakan dalam gelung untuk mencetak maklumat, 290 00:14:58,780 --> 00:15:00,710 apa yang anda fikir saya akan dapat? 291 00:15:00,710 --> 00:15:01,710 Nah, mari kita lihat. 292 00:15:01,710 --> 00:15:05,300 Dan sebelum kita melompat ke atas ke tetingkap pelayar saya, 293 00:15:05,300 --> 00:15:08,090 hanya tahu bahawa console.log adalah semacam satu 294 00:15:08,090 --> 00:15:10,630 cara melakukan F cetak dalam JavaScript. 295 00:15:10,630 --> 00:15:12,040 Tetapi apa yang konsol? 296 00:15:12,040 --> 00:15:14,940 Nah, itulah yang kita akan pergi lihat pada ketika ini. 297 00:15:14,940 --> 00:15:16,850 >> OK, jadi kami kembali di sini dalam tetingkap pelayar saya, 298 00:15:16,850 --> 00:15:19,410 dan saya akan membuka sehingga alat pemaju saya. 299 00:15:19,410 --> 00:15:22,290 Sekali lagi, saya hanya memukul F12 untuk membuka alat pemaju. 300 00:15:22,290 --> 00:15:25,670 Dan perhatikan bahawa di sini di bahagian saya telah memilih konsol. 301 00:15:25,670 --> 00:15:28,480 Jadi ini adalah tanggapan konsol pemaju, 302 00:15:28,480 --> 00:15:30,500 dan ia akan membolehkan kita untuk mencetak maklumat di luar, 303 00:15:30,500 --> 00:15:33,000 jenis seperti terminal, tetapi kerana anda akan melihat sedikit kemudian, 304 00:15:33,000 --> 00:15:37,720 kami juga boleh menaip maklumat dalam untuk berinteraksi dengan laman web kami. 305 00:15:37,720 --> 00:15:42,320 Saya akan zum dalam sedikit di sini, dan saya akan sekarang klik di dalam ujian. 306 00:15:42,320 --> 00:15:45,230 Dan empat di test-- Saya tak akan menunjukkan kepada anda kod untuk sekarang, 307 00:15:45,230 --> 00:15:47,479 tetapi anda akan mendapat jika anda memuat turun kod sumber yang 308 00:15:47,479 --> 00:15:50,380 dikaitkan dengan video-- ini hanya itu dalam gelung 309 00:15:50,380 --> 00:15:52,610 yang kita lihat hanya saat yang lalu pada slaid. 310 00:15:52,610 --> 00:15:54,810 >> Jadi saya akan klik yang butang, dan di sini, 311 00:15:54,810 --> 00:15:58,440 inilah apa yang telah dicetak dalam konsol, 0, satu, dua, tiga, empat, lima, 312 00:15:58,440 --> 00:15:58,940 enam. 313 00:15:58,940 --> 00:16:02,490 Saya tidak mencetak maklumat yang dalam lokasi-lokasi array, 314 00:16:02,490 --> 00:16:05,180 kerana saya menggunakan dalam gelung. 315 00:16:05,180 --> 00:16:10,670 Dan di dalam badan gelung, saya hanya dicetak utama tidak membantah utama. 316 00:16:10,670 --> 00:16:18,600 Tetapi jika saya sekarang membersihkan konsol saya, dan saya beralih kepada untuk ujian, dan empat ujian 317 00:16:18,600 --> 00:16:22,500 Saya katakan saya gunakan untuk gelung sebaliknya dan mencetak utama, 318 00:16:22,500 --> 00:16:28,079 jika saya klik itu, sekarang saya mendapat unsur-unsur yang sebenar di dalam objek saya 319 00:16:28,079 --> 00:16:29,120 atau pelbagai saya dalam kes ini. 320 00:16:29,120 --> 00:16:31,760 Pelbagai saya hari minggu. 321 00:16:31,760 --> 00:16:33,480 Saya dicetak Isnin, Selasa, Rabu. 322 00:16:33,480 --> 00:16:36,930 Supaya perbezaan di antara yang dalam gelung, yang mencetak keluar 323 00:16:36,930 --> 00:16:43,410 hanya kunci jika anda hanya menggunakan kekunci dalam jasad gelung, 324 00:16:43,410 --> 00:16:46,850 dan untuk gelung, yang cetakan daripada nilai-nilai jika anda menggunakan hanya 325 00:16:46,850 --> 00:16:48,870 utama di dalam badan gelung. 326 00:16:48,870 --> 00:16:52,380 >> Baiklah, bagaimana kita kini mula menyatukan tali dan mungkin adukkan 327 00:16:52,380 --> 00:16:57,220 beberapa pembolehubah dengan interpolasi seperti kita dapat lakukan pada PHP? 328 00:16:57,220 --> 00:16:59,410 Nah, kami cukup biasa dengan ini dari PHP. 329 00:16:59,410 --> 00:17:04,109 Ini adalah bagaimana kita akan melakukannya dengan menggunakan pengendali dot untuk merangkaikan tali. 330 00:17:04,109 --> 00:17:06,260 Dalam JavaScript, walaupun, kita sebenarnya menggunakan sesuatu 331 00:17:06,260 --> 00:17:09,290 dipanggil pengendali plus, yang adalah mungkin juga sedikit lebih 332 00:17:09,290 --> 00:17:10,470 intuitif, bukan? 333 00:17:10,470 --> 00:17:12,609 Kami menambah sekumpulan tali bersama-sama. 334 00:17:12,609 --> 00:17:14,520 Jadi kita pulang lebih dan melihat apa ini 335 00:17:14,520 --> 00:17:18,693 akan mencetak jika kita cuba untuk mencetak semua maklumat yang pada minggu array. 336 00:17:18,693 --> 00:17:20,859 Baiklah, jadi di bawah sini di bawah tali dinamika, 337 00:17:20,859 --> 00:17:24,822 Saya mempunyai dua pilihan, bangunan rentetan V1 dan kemudian bangunan rentetan V2. 338 00:17:24,822 --> 00:17:26,530 Dan kita akan melihat mengapa kita perlu V2 dalam satu saat. 339 00:17:26,530 --> 00:17:28,610 Tapi aku akan klik pada rentetan bangunan V1, yang 340 00:17:28,610 --> 00:17:30,360 adalah kod yang kami hanya mengambil melihat, 341 00:17:30,360 --> 00:17:32,980 console.log dengan semua plus. 342 00:17:32,980 --> 00:17:35,910 Mari kita lihat jika cetakan ini apa yang kita harapkan. 343 00:17:35,910 --> 00:17:39,939 >> Isnin adalah bilangan hari 01 dalam seminggu, Selasa adalah bilangan hari 11 dalam seminggu. 344 00:17:39,939 --> 00:17:41,730 Nah, apa yang saya cuba untuk melakukan terdapat mendapatkan 345 00:17:41,730 --> 00:17:46,280 ia mencetak Isnin adalah bilangan hari satu, Selasa adalah bilangan hari dua. 346 00:17:46,280 --> 00:17:50,140 Tetapi ia seolah-olah seperti saya sentiasa mencetak satu. 347 00:17:50,140 --> 00:17:51,260 Nah, mengapa? 348 00:17:51,260 --> 00:17:55,600 Nah, ternyata, kita lihat satu lagi di coretan ini sedikit kod di sini. 349 00:17:55,600 --> 00:18:00,160 Perhatikan bahawa kita menggunakan campur pengendali dalam dua konteks yang berbeza. 350 00:18:00,160 --> 00:18:03,221 >> Dan sebagainya di sini di mana mungkin perkara yang kita telah jenis telah berkata, 351 00:18:03,221 --> 00:18:03,970 oh, ia begitu besar. 352 00:18:03,970 --> 00:18:05,910 Kami tidak berurusan dengan jenis data lagi. 353 00:18:05,910 --> 00:18:08,220 Tetapi di sini di mana fakta bahawa kita kehilangan jenis data 354 00:18:08,220 --> 00:18:10,960 sebenarnya boleh agak sesuatu masalah untuk kita. 355 00:18:10,960 --> 00:18:16,260 Sekarang pengendali ditambah yang digunakan untuk menyatukan tali dan menambah nombor 356 00:18:16,260 --> 00:18:19,550 bersama-sama, mempunyai JavaScript untuk membuat tekaan yang terbaik 357 00:18:19,550 --> 00:18:22,030 apa yang saya mahu lakukan untuk saya. 358 00:18:22,030 --> 00:18:23,900 Dan dalam kes ini, ia meneka salah. 359 00:18:23,900 --> 00:18:29,340 Ia hari hanya concatenated, yang akan menjadi 0, satu, dua, tiga, empat, lima, atau enam, 360 00:18:29,340 --> 00:18:32,060 dan kemudian ia hanya concatenated itu dan kemudian dirangkaikan satu. 361 00:18:32,060 --> 00:18:35,020 Ia tidak benar-benar menambah mereka bersama-sama. 362 00:18:35,020 --> 00:18:37,320 Dan supaya bahasa ini, PHP dan JavaScript, 363 00:18:37,320 --> 00:18:39,196 yang abstrak jauh idea ini jenis, 364 00:18:39,196 --> 00:18:40,820 anda tidak perlu berurusan dengan lagi. 365 00:18:40,820 --> 00:18:43,600 Mereka masih mempunyai jenis di bawah hood. 366 00:18:43,600 --> 00:18:46,780 Dan kita boleh, dalam keadaan seperti ini, memanfaatkan hakikat bahawa 367 00:18:46,780 --> 00:18:49,240 dengan mengatakan sesuatu seperti mungkin ini, yang 368 00:18:49,240 --> 00:18:53,210 memberitahu JavaScript, oleh cara, merawat ini sebagai integer, 369 00:18:53,210 --> 00:18:57,100 tidak menganggap ia sebagai tali, walaupun walaupun kita mencampurkan tali 370 00:18:57,100 --> 00:18:58,940 dan bilangan bulat di sini. 371 00:18:58,940 --> 00:19:02,204 >> Ia adalah salah satu daripada perkara-perkara bahawa ia seolah-olah begitu besar dalam konteks 372 00:19:02,204 --> 00:19:04,120 bahawa kita tidak perlu berurusan dengan jenis lagi, 373 00:19:04,120 --> 00:19:05,828 tetapi kadang-kadang anda akan menghadapi keadaan yang 374 00:19:05,828 --> 00:19:09,110 sama seperti ini di mana hakikat bahawa anda tidak mempunyai kawalan ke atas jenis 375 00:19:09,110 --> 00:19:11,220 boleh berbalik pada anda jika anda tidak berhati-hati. 376 00:19:11,220 --> 00:19:18,285 Dan jadi jika kita pop kembali kepada IDE, Saya akan membersihkan konsol saya sekali lagi, 377 00:19:18,285 --> 00:19:20,660 dan saya akan klik rentetan bangunan versi dua, yang 378 00:19:20,660 --> 00:19:23,052 adalah di mana saya menggunakan fungsi int hurai. 379 00:19:23,052 --> 00:19:25,260 Kini ia mencetak maklumat yang saya menjangkakan. 380 00:19:25,260 --> 00:19:29,330 Beberapa hari pertama hari ini, Selasa adalah bilangan hari dua, dan sebagainya. 381 00:19:29,330 --> 00:19:31,170 >> Jadi mari kita bercakap tentang fungsi lagi. 382 00:19:31,170 --> 00:19:34,790 Saya berjanji kita akan bercakap tentang tanpa nama fungsi, dan sekarang konteks untuk 383 00:19:34,790 --> 00:19:36,360 telah tiba. 384 00:19:36,360 --> 00:19:39,980 Jadi sebelum kita berbuat demikian, mari kita bercakap lagi tentang tatasusunan untuk hanya satu saat. 385 00:19:39,980 --> 00:19:42,120 Jadi tatasusunan adalah khas kes objek. 386 00:19:42,120 --> 00:19:45,180 Malah, segala-galanya dalam JavaScript sebenarnya objek. 387 00:19:45,180 --> 00:19:47,190 Jadi fungsi adalah kes khas objek, 388 00:19:47,190 --> 00:19:49,770 bilangan bulat adalah khas kes objek, 389 00:19:49,770 --> 00:19:52,152 tetapi tatasusunan khusus mempunyai beberapa kaedah. 390 00:19:52,152 --> 00:19:55,110 Ingat kerana mereka objek, mereka boleh mempunyai ciri-ciri dan kaedah. 391 00:19:55,110 --> 00:19:58,600 Mereka mempunyai beberapa kaedah yang boleh digunakan untuk objek. 392 00:19:58,600 --> 00:20:01,197 Ada kaedah yang dipanggil saiz, array.size, 393 00:20:01,197 --> 00:20:03,030 yang akan kembali ke anda seperti yang anda jangkakan 394 00:20:03,030 --> 00:20:05,120 bilangan elemen dalam array anda. 395 00:20:05,120 --> 00:20:08,480 array.pop, jenis seperti tanggapan kami bermunculan off 396 00:20:08,480 --> 00:20:11,110 timbunan, jika anda masih ingat dari video susunan kami, 397 00:20:11,110 --> 00:20:13,810 membuang elemen terakhir dari array. 398 00:20:13,810 --> 00:20:17,110 array.push menambah elemen baru hingga akhir array. 399 00:20:17,110 --> 00:20:20,910 array.shift adalah jenis seperti DQ, ia sambat keluar 400 00:20:20,910 --> 00:20:23,610 elemen yang pertama dalam array. 401 00:20:23,610 --> 00:20:27,549 >> Tetapi ada juga satu lagi khas kaedah mudah yang dipanggil peta. 402 00:20:27,549 --> 00:20:29,340 Dan ini adalah jenis yang konsep yang menarik. 403 00:20:29,340 --> 00:20:30,930 Jadi apa idea peta? 404 00:20:30,930 --> 00:20:33,880 Anda benar-benar akan melihat ini dalam beberapa bahasa lain, 405 00:20:33,880 --> 00:20:38,550 dan kami tidak bercakap tentang jenis ahli kartografi peta sini, 406 00:20:38,550 --> 00:20:41,480 kita berbicara tentang fungsi pemetaan. 407 00:20:41,480 --> 00:20:44,110 Dalam konteks kami bercakap tentang di sini, peta 408 00:20:44,110 --> 00:20:47,950 ialah kita operasi khas boleh melakukan pada array 409 00:20:47,950 --> 00:20:51,630 bagi menggunakan fungsi tertentu untuk setiap elemen array itu. 410 00:20:51,630 --> 00:20:55,190 dan dengan itu kita akan berkata dalam kes ini, mungkin array.map, 411 00:20:55,190 --> 00:21:00,330 dan di dalamnya, kita lulus ke dalam peta adalah fungsi yang kita mahu 412 00:21:00,330 --> 00:21:02,430 yang akan dikenakan kepada setiap elemen tunggal. 413 00:21:02,430 --> 00:21:07,299 Jadi ia adalah jenis analog dengan menggunakan gelung untuk melelar atas setiap elemen 414 00:21:07,299 --> 00:21:09,340 dan memohon tertentu berfungsi untuk setiap elemen, 415 00:21:09,340 --> 00:21:14,830 hanya JavaScript telah ini dibina pada konsep pemetaan yang boleh digunakan. 416 00:21:14,830 --> 00:21:19,700 Dan ini dalam cara yang hebat untuk bercakap tentang fungsi tanpa nama. 417 00:21:19,700 --> 00:21:22,370 >> Jadi katakan kita ada pelbagai ini integer. 418 00:21:22,370 --> 00:21:25,370 Ia dipanggil nums, dan ia mendapat lima perkara di dalamnya, satu, dua, tiga, empat, 419 00:21:25,370 --> 00:21:26,410 lima. 420 00:21:26,410 --> 00:21:30,620 Sekarang saya mahu merancang beberapa fungsi ke pelbagai ini. 421 00:21:30,620 --> 00:21:34,337 Saya ingin mempunyai fungsi yang memohon untuk setiap elemen array. 422 00:21:34,337 --> 00:21:37,420 Nah, mari kita mengatakan bahawa apa yang saya mahu lakukan adalah hanya menggandakan semua unsur-unsur. 423 00:21:37,420 --> 00:21:42,520 Apa yang saya boleh lakukan adalah hanya menggunakan gelung untuk var Saya sama dengan 0, saya adalah kurang daripada 424 00:21:42,520 --> 00:21:47,390 atau sama dengan 4, saya plus, plus, dan kemudian dua kali ganda setiap nombor tunggal. 425 00:21:47,390 --> 00:21:49,580 Tetapi saya juga boleh melakukan sesuatu seperti ini. 426 00:21:49,580 --> 00:21:53,420 Boleh saya katakan nums merupakan bekas satu dua tiga empat lima, 427 00:21:53,420 --> 00:21:58,310 sekarang, walaupun, saya mahu anda untuk memohon pemetaan ke pelbagai ini 428 00:21:58,310 --> 00:22:00,400 di mana saya mahu anda untuk menggandakan setiap nombor. 429 00:22:00,400 --> 00:22:02,540 Dan itulah apa yang berlaku di sini. 430 00:22:02,540 --> 00:22:06,870 Tetapi perhatikan apa yang saya lulus sebagai hujah kepada peta. 431 00:22:06,870 --> 00:22:09,080 Ini adalah satu fungsi tanpa nama. 432 00:22:09,080 --> 00:22:11,140 Dan perhatikan saya tidak diberi fungsi ini nama, 433 00:22:11,140 --> 00:22:13,290 Saya hanya diberikan senarai parameter. 434 00:22:13,290 --> 00:22:16,370 Dan jadi ini adalah contoh daripada fungsi tanpa nama. 435 00:22:16,370 --> 00:22:21,270 >> Kita biasanya tidak akan memanggil ini fungsi di luar konteks peta. 436 00:22:21,270 --> 00:22:24,110 Kami mentakrifkan ia sebagai parameter untuk peta, dan dengan itu kita tidak benar-benar 437 00:22:24,110 --> 00:22:27,910 perlu mempunyai nama untuk itu jika Satu-satunya perkara yang mengambil berat tentang adalah peta 438 00:22:27,910 --> 00:22:30,339 dan ia ditakrifkan betul terdapat di dalam peta. 439 00:22:30,339 --> 00:22:31,880 Dan sebagainya ini adalah fungsi tanpa nama. 440 00:22:31,880 --> 00:22:34,680 Kami tidak dapat untuk melakukan ini sebelum ini. 441 00:22:34,680 --> 00:22:38,400 Peta beberapa fungsi yang menerima satu parameter, num, 442 00:22:38,400 --> 00:22:41,890 dan apa fungsi yang tidak adalah pulangan num 2 kali. 443 00:22:41,890 --> 00:22:45,330 Dan sebagainya selepas ini pemetaan telah digunakan, 444 00:22:45,330 --> 00:22:50,090 ini kini apa nums kelihatan seperti, dua, empat, enam, lapan, 10. 445 00:22:50,090 --> 00:22:52,090 Dan kita akan pop ke saya tetingkap pelayar dan hanya 446 00:22:52,090 --> 00:22:55,240 kita lihat ini benar-benar cepat juga. 447 00:22:55,240 --> 00:22:58,000 >> Jadi saya mempunyai butang lain di sini di halaman rumah saya dipanggil dua kali. 448 00:22:58,000 --> 00:23:03,570 Dan apabila saya klik dua kali, dan ia memberitahu saya sebelum ia satu, dua, tiga, empat, 449 00:23:03,570 --> 00:23:07,250 lima selepas dua, empat, enam, lapan, 10. 450 00:23:07,250 --> 00:23:11,930 Dan jika saya kembali dan klik dua kali lagi, dua, empat, enam, lapan, 10. 451 00:23:11,930 --> 00:23:17,400 Dan kemudian selepas itu, empat, lapan, 12, 16, dan kemudian 20. 452 00:23:17,400 --> 00:23:20,440 Dan apa yang saya lakukan dalam fungsi ini? 453 00:23:20,440 --> 00:23:25,210 Nah, jika kita hanya pop ke IDE, dan Saya tarik fungsi tanpa nama saya, di sini 454 00:23:25,210 --> 00:23:28,780 pada baris tujuh melalui 13, Saya melakukan kerja mewah sedikit di sini, 455 00:23:28,780 --> 00:23:32,240 tetapi saya hanya mencetak apa yang kini dalam array. 456 00:23:32,240 --> 00:23:36,580 Kemudian pada baris 16, 17, dan 18, ada peta saya. 457 00:23:36,580 --> 00:23:40,930 Ini adalah di mana saya menggunakan dua kali ganda ini fungsi untuk setiap elemen tunggal. 458 00:23:40,930 --> 00:23:43,530 Dan kemudian lebih jauh, Saya hanya melakukan perkara yang sama 459 00:23:43,530 --> 00:23:46,640 Yang saya lakukan sebelum ini, kecuali sekarang saya mencetak kandungan array 460 00:23:46,640 --> 00:23:48,167 selepas itu. 461 00:23:48,167 --> 00:23:50,500 Tetapi semua yang saya lakukan di sini adalah hanya menggunakan fungsi tanpa nama 462 00:23:50,500 --> 00:23:53,640 untuk memetakan seluruh seluruh array. 463 00:23:53,640 --> 00:23:58,466 >> Jadi satu lagi topik besar untuk bercakap tentang di JavaScript adalah tanggapan peristiwa. 464 00:23:58,466 --> 00:24:01,590 Satu peristiwa adalah sesuatu yang hanya berlaku apabila pengguna berinteraksi dengan web anda 465 00:24:01,590 --> 00:24:04,715 halaman, jadi mungkin mereka klik sesuatu, atau mungkin halaman telah selesai memuat, 466 00:24:04,715 --> 00:24:07,200 atau mungkin mereka telah berpindah tetikus mereka ke atas sesuatu, 467 00:24:07,200 --> 00:24:09,290 atau mereka telah menaip sesuatu yang dalam medan input. 468 00:24:09,290 --> 00:24:14,260 Semua perkara-perkara ini adalah peristiwa-peristiwa yang berlaku di laman web kami. 469 00:24:14,260 --> 00:24:17,460 Dan JavaScript mempunyai keupayaan untuk menyokong sesuatu 470 00:24:17,460 --> 00:24:21,760 dipanggil pengendali peristiwa, yang adalah fungsi panggil balik yang 471 00:24:21,760 --> 00:24:23,329 respons kepada acara html. 472 00:24:23,329 --> 00:24:24,620 Dan apa fungsi panggil balik? 473 00:24:24,620 --> 00:24:27,328 Nah, ia biasanya hanya satu lagi menamakan dengan fungsi tanpa nama. 474 00:24:27,328 --> 00:24:30,170 Ia adalah fungsi yang bertindak balas kepada peristiwa. 475 00:24:30,170 --> 00:24:34,130 Dan ini adalah di mana kita datang ke idea mengikat fungsi tertentu 476 00:24:34,130 --> 00:24:38,060 kepada sifat html tertentu. 477 00:24:38,060 --> 00:24:41,420 Elemen html kebanyakannya mempunyai sokongan untuk atribut 478 00:24:41,420 --> 00:24:45,170 bahawa kita tidak bercakap tentang di html video untuk sesuatu seperti di klik 479 00:24:45,170 --> 00:24:50,540 atau pada hover atau beban, semua peristiwa-peristiwa 480 00:24:50,540 --> 00:24:53,120 bahawa anda boleh menulis fungsi yang berurusan dengan peristiwa-peristiwa 481 00:24:53,120 --> 00:24:56,090 apabila peristiwa-peristiwa berlaku di laman web anda. 482 00:24:56,090 --> 00:24:59,170 >> Dan jadi mungkin html anda kelihatan seperti ini. 483 00:24:59,170 --> 00:25:02,240 Dan saya mempunyai dua butang di sini, satu butang dan butang dua, 484 00:25:02,240 --> 00:25:04,620 dan di sini saya ada pada masa ini apa-apa yang telah ditetapkan, 485 00:25:04,620 --> 00:25:11,170 tetapi ini adalah di mana atribut pada klik nampaknya sebahagian daripada tag html saya. 486 00:25:11,170 --> 00:25:15,220 Jadi nampaknya apabila saya menentukan apa yang berlaku di dalam atribut itu, 487 00:25:15,220 --> 00:25:18,590 ia akan menjadi beberapa JavaScript fungsi yang memenuhi acara 488 00:25:18,590 --> 00:25:24,360 mungkin untuk klik pada satu butang atau butang dua. 489 00:25:24,360 --> 00:25:28,580 >> Apakah jenis sejuk kira-kira ini adalah kami foto A pengendali acara generik. 490 00:25:28,580 --> 00:25:32,370 Dan Handler acara ini akan mencipta objek acara. 491 00:25:32,370 --> 00:25:37,000 Dan objek acara itu akan memberitahu kita mana satu di antara dua butang diklik. 492 00:25:37,000 --> 00:25:38,064 Sekarang bagaimana ia berfungsi? 493 00:25:38,064 --> 00:25:39,730 Dengan baik, ia mungkin kelihatan seperti ini. 494 00:25:39,730 --> 00:25:44,860 Oleh itu, kita pertama akan menentukan butang kami mempunyai tindak balas kepada panggilan balik 495 00:25:44,860 --> 00:25:47,470 fungsi yang akan dipanggil apabila butang diklik, 496 00:25:47,470 --> 00:25:49,520 kita akan memanggil nama amaran acara. 497 00:25:49,520 --> 00:25:53,320 Dan perhatikan kedua-dua kes kami lulus dalam parameter acara ini. 498 00:25:53,320 --> 00:25:55,460 Oleh itu, kita memanggil fungsi ini atau apabila fungsi ini 499 00:25:55,460 --> 00:26:00,330 dicetuskan oleh peristiwa yang berlaku, ia akan mencipta objek acara ini 500 00:26:00,330 --> 00:26:03,300 dan lulus sebagai parameter untuk memberi amaran kepada nama. 501 00:26:03,300 --> 00:26:07,270 Dan bahawa objek acara adalah akan mengandungi maklumat 502 00:26:07,270 --> 00:26:09,800 kira-kira yang butang diklik. 503 00:26:09,800 --> 00:26:11,580 Dan bagaimana ia berbuat demikian? 504 00:26:11,580 --> 00:26:13,654 Dengan baik, ia mungkin kelihatan seperti ini. 505 00:26:13,654 --> 00:26:15,570 Jadi sekarang dalam berasingan saya Fail JavaScript, saya mungkin 506 00:26:15,570 --> 00:26:17,420 perlu mencari ini Nama amaran fungsi, yang 507 00:26:17,420 --> 00:26:19,500 lagi menerima bahawa parameter acara. 508 00:26:19,500 --> 00:26:24,640 Dan maka di sini adalah di mana saya mengesan butang yang dicetuskan, 509 00:26:24,640 --> 00:26:28,100 var pencetus sama acara dot unsur sumber. 510 00:26:28,100 --> 00:26:33,150 Apakah sumber yang dicipta objek acara ini yang telah diluluskan dalam? 511 00:26:33,150 --> 00:26:36,390 Adakah ia satu butang atau adakah ia butang dua? 512 00:26:36,390 --> 00:26:40,710 >> Dan kemudian di sini semua yang saya lakukan adalah mencetak trigger.innerhtml. 513 00:26:40,710 --> 00:26:43,860 Nah, dalam kes ini, dalam hal ini konteks, trigger.innerhtml 514 00:26:43,860 --> 00:26:45,940 hanya apa yang ditulis pada butang. 515 00:26:45,940 --> 00:26:48,830 Ia hanya akan berlaku jika kita melompat kembali untuk kali kedua, yang akan 516 00:26:48,830 --> 00:26:51,670 menjadi apa yang ada di antara kedua-tag butang. 517 00:26:51,670 --> 00:26:54,150 Ia akan menjadi satu butang atau butang dua. 518 00:26:54,150 --> 00:26:57,320 Dan mari kita lihat pada bagaimana pengendali peristiwa ini akan 519 00:26:57,320 --> 00:27:01,080 melihat jika kita mempunyai ia berjalan dalam amalan. 520 00:27:01,080 --> 00:27:03,850 >> Jadi pertama sekali, anda telah membuka events.js, 521 00:27:03,850 --> 00:27:06,517 yang merupakan fail JavaScript di mana Saya telah ditakrifkan fungsi ini. 522 00:27:06,517 --> 00:27:08,558 Dan seperti yang anda lihat, ia cukup banyak apa yang 523 00:27:08,558 --> 00:27:10,230 kita hanya melihat pada slaid kedua yang lalu. 524 00:27:10,230 --> 00:27:14,890 Aku akan pergi ke halaman rumah kita telah menggunakan. 525 00:27:14,890 --> 00:27:17,660 Dan saya ada di butang satu butang dua. 526 00:27:17,660 --> 00:27:19,820 Dan saya akan klik pada butang satu. 527 00:27:19,820 --> 00:27:23,930 Anda klik pada butang satu, jika anda boleh lihat di sini dalam berjaga-jaga. 528 00:27:23,930 --> 00:27:25,810 OKAY. 529 00:27:25,810 --> 00:27:28,980 Klik pada butang dua, anda klik pada butang dua. 530 00:27:28,980 --> 00:27:32,150 >> Jadi kedua-dua butang mempunyai panggilan fungsi sama, bukan? 531 00:27:32,150 --> 00:27:35,840 Kedua-duanya adalah nama amaran acara, tetapi objek acara ini 532 00:27:35,840 --> 00:27:41,900 yang mendapat dicipta apabila kita klik pada ia memberitahu kita butang yang diklik. 533 00:27:41,900 --> 00:27:44,650 Kami tidak perlu menulis dua berasingan fungsi atau perjanjian dengan mempunyai 534 00:27:44,650 --> 00:27:46,470 untuk meluluskan apa-apa maklumat tambahan. 535 00:27:46,470 --> 00:27:48,220 Kami hanya bergantung kepada apa JavaScript akan 536 00:27:48,220 --> 00:27:53,772 lakukan untuk kita, iaitu untuk mewujudkan yang jenis objek acara bagi pihak kami. 537 00:27:53,772 --> 00:27:56,730 Ada banyak lagi yang JavaScript daripada apa yang kita telah dibincangkan dalam video ini, 538 00:27:56,730 --> 00:27:58,521 tetapi mempunyai ini asas perlu mendapatkan anda 539 00:27:58,521 --> 00:28:00,690 agak cara lama untuk belajar semua yang anda 540 00:28:00,690 --> 00:28:04,030 perlu tahu tentang ini bahasa yang menarik. 541 00:28:04,030 --> 00:28:05,000 Saya Doug Lloyd. 542 00:28:05,000 --> 00:28:07,010 Ini adalah CS50. 543 00:28:07,010 --> 00:28:09,181