>> [Bermain muzik]
>> DOUG LLOYD: Jadi sekarang kita dah tua pro di pengaturcaraan web, bukan?
Dan kami telah meliputi beberapa bahasa dalam video individu.
Dan sekarang mari kita buat satu lagi, JavaScript.
>> Pertama berita baik, JavaScript adalah pengaturcaraan moden
bahasa sama seperti PHP yang sintaks berasal dari C,
maka itulah tempat yang baik untuk bermula.
Ia kira-kira lama seperti PHP, dan juga, telah dianjurkan kira-kira 20 tahun.
Ia dicipta sekitar masa yang sama seperti PHP.
Dan JavaScript sebenarnya cukup asas kepada pengalaman pengguna
web.
Malah, terdapat tiga bahasa yang saya
akan berkata semacam membentuk pengalaman pengguna untuk berinteraksi
dengan laman web, html, css, dan JavaScript.
Dan sekarang mari kita bercakap sedikit sedikit tentang JavaScript.
>> Berita buruk, walaupun, dengan JavaScript bahawa ia menetapkan banyak peraturan untuk dirinya sendiri,
dan kemudian ia memecahkan mereka.
Dan JavaScript sebenarnya boleh sejenis mencabar untuk belajar,
kerana ia tidak seperti C dan PHP, yang sangat berstruktur
dan mempunyai peraturan yang sangat tegar untuk bagaimana perkara yang boleh bekerja.
JavaScript mempunyai jenis daripada mendapat begitu fleksibel
bahawa mungkin perkara-perkara yang tidak akan bekerja dengan cara yang kita harapkan mereka untuk,
dan mungkin kita benar-benar tidak boleh belajar bahasa pengaturcaraan pertama kami
sebagai JavaScript.
Jadi mungkin kerana ia tidak menetapkan sendiri apa-apa peraturan,
dan ia tidak benar-benar menguatkuasakan Tabiat pengekodan yang baik.
Tetapi sekarang kita telah diharapkan dibangunkan beberapa tabiat pengekodan yang baik,
dan dengan itu kita boleh mula untuk batu loncatan ke dalam JavaScript sedikit.
>> Untuk menulis JavaScript, sama dengan pembukaan sebuah fail C dengan titik C lanjutan
atau fail PHP dengan sambungan dot PHP, semua yang perlu kita lakukan adalah membuka fail
dengan dot js sambungan fail.
Kita tidak perlu mempunyai apa-apa yang istimewa pembatas seperti yang kami lakukan dalam PHP.
Yang jenis sudut kurungan tanda tanya PHP
yang kita digunakan untuk itu, cara kita memberitahu pelayar kami bahawa apa yang kita ada adalah
JavaScript adalah dengan memasukkan dalam tag html,
dan kita akan melihat sedikit tentang bagaimana untuk melakukannya dalam hanya seketika.
>> Perkara lain yang membuat JavaScript yang berbeza,
walaupun, adalah bahawa ia berjalan pihak pelanggan.
Jadi ingat dengan PHP yang kami sebelum itu tidak benar-benar melihat
PHP yang digariskan laman web.
Jika kita pernah dilihat di sumber halaman, kami akan hanya
melihat html yang di yang dihasilkan oleh PHP.
Tetapi JavaScript berjalan pihak pelanggan.
JavaScript anda berjalan pada komputer anda.
Dan itulah mengapa anda boleh lakukan perkara yang suka menambah penghalang.
Betul?
Menyekat iklan yang biasa dilakukan oleh membunuh semua JavaScript
yang sedang dijalankan pada laman web tertentu.
Dan kerana ia perlu berjalan di sebelah pelanggan mesin anda,
anda hanya boleh menghentikan JavaScript untuk menjalankan sepenuhnya.
Itu juga bermakna bahawa apabila anda menggunakan sebuah laman web yang merangkumi JavaScript,
anda perlu menghantar sumber JavaScript kod sebagai sebahagian daripada tindak balas http anda
kepada pelanggan apabila mereka memintanya.
Dan supaya anda mungkin tidak mahu menggunakan JavaScript
untuk melakukan perkara yang benar-benar sensitif seperti maklumat lulus
mengenai kata laluan pengguna belakang dan sebagainya, kerana mereka benar-benar
akan menerima semua kod sumber, bukan hanya html yang dihasilkan,
seperti akan menjadi kes itu dengan berkata PHP.
>> Jadi bagaimana kita termasuk JavaScript dalam html kami untuk memulakan dengan?
Nah, sama dengan CSS, sebenarnya, adalah jenis bagaimana kita melakukannya di sini.
Dengan CSS kita mempunyai tag gaya.
Dan di dalam tag tersebut gaya, kita boleh menentukan lembaran gaya CSS.
Begitu juga dengan JavaScript boleh kita membuka tag skrip,
lain tag html kita tidak bercakap tentang dalam video html kami,
dan menulis JavaScript dalam antara orang-orang tag skrip.
Juga walaupun, seperti CSS, kita boleh menghubungkan di luar fail CSS
dan menarik mereka ke dalam program kami dengan cara itu.
Dengan CSS kami juga boleh, maafkan saya, dengan JavaScript
kami juga boleh menentukan sumber atribut tag skrip
untuk menghubungkan dalam JavaScript secara berasingan, supaya anda tidak
perlu menulis dalam antara tag skrip, kita
boleh link dalam menggunakan bahawa tag skrip juga.
Dan seperti dengan kes itu dengan CSS mana kami mencadangkan bahawa ia mungkin
demi kepentingan terbaik anda untuk menulis CSS anda dalam fail yang berasingan dalam kes
anda perlu mengubahnya, begitu juga kita mengesyorkan
yang anda tulis anda JavaScript dalam fail yang berasingan
dan menggunakan sumber tag skrip atribut untuk mengikat anda JavaScript
ke dalam html anda, laman web anda.
>> Pembolehubah supaya JavaScript, kami akan mula bercakap tentang sintaks di sini.
Dan kita akan pergi melalui jenis ini dengan cepat,
kerana kita telah melakukan ini dalam PHP, jadi ini semua harus cukup biasa.
Jadi pembolehubah dalam JavaScript adalah hampir sama dengan PHP pembolehubah.
Tidak ada jenis specifier, dan apabila anda memperkenalkan pembolehubah,
anda awalan dengan kata kunci var.
Dalam PHP kita akan melakukan sesuatu seperti ini, tanda dolar x.
Itulah bagaimana kita ditunjukkan pembolehubah, tetapi tidak, kita
tidak menyebutkan jenis pembolehubah sama sekali.
Kami akan mengatakan sesuatu seperti dolar tanda x sama 44 dalam PHP.
Jika kita melakukan perkara yang Perkara yang sama dalam JavaScript,
kita akan berkata var x sama 44.
Jadi var adalah jenis cara kita memperkenalkan pembolehubah.
Itulah mungkin sedikit lebih intuitif daripada tanda hanya dolar berubah-ubah.
>> Sekali lagi, kerana tidak ada jenis data, kita boleh melakukan ini
dengan apa-apa jenis data, tali, apa-apa lagi semua akan var.
Syarat yang, semua kami kawan-kawan lama dari C dan PHP
masih ada, jadi kita perlu jika, lain jika, lain, suis dan soalan
tanda kolon.
Switch kekal sebagai fleksibel kerana ia adalah dalam PHP, tetapi semua ini anda
biasa dengan sekarang.
Begitu juga dengan gelung adalah pasukan pilihan lama manakala,
lakukan semasa, dan untuk masih ada pada kita.
Jadi sudah kita tahu banyak daripada JavaScript jenis asas asas
hanya kerana mempunyai agak sedikit pengetahuan kini kira-kira C dan PHP.
>> Bagaimana pula dengan fungsi dalam JavaScript?
Nah, sama dengan PHP setiap fungsi adalah diperkenalkan dengan kata kunci fungsi.
Anda mengatakan fungsi, dan kemudian anda mula menentukan fungsi anda.
Apa yang sedikit berbeza tentang JavaScript,
walaupun adalah keupayaan untuk mempunyai apa yang dipanggil fungsi tanpa nama.
Jadi, anda boleh menentukan fungsi yang tidak mempunyai nama.
Ini adalah sesuatu yang kita benar-benar tidak dilihat sebelum ini.
Kami benar-benar akan menggunakan konsep daripada fungsi tanpa nama
sedikit kemudian dalam ini video, kerana ia akan
lebih masuk akal sedikit dalam konteks bila kita melihatnya dalam keadaan tertentu
yang saya telah dibuat di sini.
Tetapi mari kita melihat dengan bagaimana seorang JavaScript mudah
fungsi mungkin kelihatan seperti.
>> Oleh itu, saya telah pergi ke hadapan dan membuka IDE CS50 saya
dan saya telah pun menjalankan Apache mulai berjalan pelayan saya.
Dan saya mempunyai fail ini open dipanggil Home.html.
Dan saya akan zum dalam sedikit di sini.
Dan pada dasarnya, anda boleh melihat Home.html adalah hanya sekumpulan butang.
Dan saya menuntut di atas di sini bahawa ini adalah seksyen JavaScript
bahan-bahan.
Jadi ada sekumpulan butang di sini, tetapi apa yang butang ini benar-benar melakukan?
>> Baiklah, kami akan menuju ke IED saya, dan saya telah Home.html membuka sini.
Pada awal-awal lagi, di sini di mana saya menghubungkan
dalam semua fail sumber JavaScript saya.
Betul?
Jadi saya mempunyai anonymous.js, clock.js, Saya menggunakan atribut sumber
tag skrip untuk menghubungkan dalam fail.
Jadi saya tidak ditulis apa-apa JavaScript terus ke dalam fail ini,
tetapi saya telah ditarik dalam semua JavaScript saya telah menulis secara berasingan.
Dan jika kita tatal ke bawah di sini, ini semua perlu kelihatan agak biasa
dengan sedikit sintaks baru.
Kami telah di tag header untuk fungsi dan kemudian butang.
Saya mempunyai input itu adalah satu butang jenis, dan nampaknya apabila saya klik,
Saya akan memanggil beberapa berfungsi tarikh berjaga-jaga.
Dan ini adalah bagaimana kita boleh menyusun adukkan sedikit JavaScript dan html.
Mereka sebenarnya bermain agak baik bersama-sama, dan sebagainya nampaknya apabila
Saya klik pada butang ini, saya akan untuk memanggil beberapa tarikh fungsi berjaga-jaga.
Begitu juga aku ditakrifkan tingkah laku untuk semua butang lain yang
berada di bahawa laman home.html, yang kita akan menyimpan kembali
ke semasa video ini.
Tetapi mari kita naik semula di sini dan kita lihat
di clock.js, yang merupakan Fail JavaScript saya
menulis yang mempunyai fungsi pertama ini kita akan mengambil melihat.
Seperti yang anda lihat, saya mula JavaScript saya berfungsi dengan fungsi kata kunci,
dan saya telah diberikan ini satu nama, ia dipanggil tarikh berjaga-jaga.
Di dalam sana, saya nampaknya membuat pembolehubah tempatan baru yang dikenali sebagai tarikh semasa.
Dan saya akan untuk menetapkan yang sama dengan tarikh baru.
Dan kita boleh masuk ke dalam banyak detail apa tarikh yang adalah,
dan benar-benar JavaScript begitu besar bahawa kita tidak mungkin boleh
meliputi segala-galanya dalam satu video.
Tetapi memadai untuk mengatakan, ini akan Kepada Akulah tempat kembali item data yang
merangkumi tarikh dan masa semasa.
Saya menyimpan bahawa dalam pembolehubah bahawa saya nampaknya akan memberi isyarat kepada tarikh semasa.
>> Well, apa yang tidak berjaga-jaga lihat tarikh semasa seperti?
Mari kita lihat pada fail itu sendiri menyokong alih dalam tetingkap pelayar.
Jadi sekali lagi, ini adalah butang yang saya telah terikat kepada, ini fungsi yang dinamakan.
Dan saya klik sana dan melihat apa yang ia lakukan, ia dimaklumkan.
Ia muncul seperti ini kotak memberitahu saya bahawa masa semasa, nampaknya
ia adalah 4 November di 10:43:43 pagi.
Dan jika saya klik sekali lagi, kini itu beberapa saat kemudian, bukan?
Jadi itu sahaja fungsi ini tidak.
Apabila saya klik butang ini, ia muncul mesej amaran kepada saya.
Jadi ada benar-benar tidak terlalu banyak untuk fungsi
yang berbeza daripada PHP, hanya sedikit sintaks baru
yang datang dengan bekerja dengan JavaScript.
>> Array dalam JavaScript adalah agak mudah.
Untuk mengisytiharkan array, anda menggunakan sintaks kurungan persegi
yang kita sudah biasa dengan dari PHP.
Dan sama dengan PHP, kita juga boleh mencampurkan jenis data.
Jadi pelbagai ini, kedua-dua array ini akan
menjadi sempurna yang sah JavaScript.
Satu itu sahaja bilangan bulat, dan satu yang yang bercampur jenis data yang berbeza.
>> Apakah sesuatu yang sangat berbeza dalam JavaScript, walaupun?
Itulah tanggapan objek.
Jadi mungkin anda pernah mendengar pengaturcaraan berorientasikan objek.
Kami tidak melakukan banyak dalam CS50, tetapi kami akan melakukan sedikit ia
di sini dalam konteks JavaScript.
Sekarang JavaScript mempunyai keupayaan untuk berkelakuan sebagai pengaturcaraan berorientasikan objek
bahasa, tetapi ia tidak sendiri semata-mata objek berorientasikan
bahasa pengaturcaraan.
Dan ini sekali lagi datang kembali kepada mengapa saya katakan, ia
boleh menjadi sangat mencabar untuk belajar JavaScript sebagai pengaturcaraan pertama anda
bahasa, kerana ia tidak benar-benar sesuai paradigma tertentu.
>> C pula ialah bahasa pengaturcaraan berfungsi.
Jika kita mahu, fungsi adalah jenis manusia bos besar, bukan?
Mereka menentukan apa berlaku segala-galanya.
Kami mahu mengubah pembolehubah, kita panggil fungsi.
Kami melakukan sesuatu bagi fungsi.
Objek sebaliknya, dalam membantah bahasa berorientasikan,
objek semacam menjadi bintang dan fungsi menjadi semacam menengah.
Tetapi apa yang objek, apa adalah tanggapan ini objek?
Nah, jika ia membantu, berfikir mengenainya pada jenis pertama
daripada seperti struktur C atau struct yang kita telah belajar tentang sebelum ini.
Dalam C, struktur yang mengandungi beberapa bidang,
dan mungkin kita sekarang mungkin mula memanggil sifat-sifat bidang.
Tetapi sifat-sifat tidak pernah berdiri di atas mereka sendiri, bukan?
Jika saya menentukan struktur untuk kereta seperti ini dengan dua berikut
bidang atau harta, salah satu integer bagi tahun dari kereta
dan satu lagi watak 10 tali untuk model kereta,
Saya boleh mengatakan sesuatu seperti ini, Aku hendak mengatakan pembolehubah baru
jenis kereta struct Herbie.
Dan kemudian saya boleh mengatakan sesuatu seperti herbie.year sama 1963,
dan herbie.model sama Beetle.
Tak apa.
Saya menggunakan medan dalam konteks struktur,
tetapi saya boleh tidak hanya mengatakan sesuatu seperti ini.
Betul?
Saya tidak boleh menggunakan nama medan bebas daripada struktur.
Ia semacam satu perkara yang asas.
>> Jadi bidang yang asas kepada struktur C
yang hampir sama dengan ciri-ciri yang asas kepada objek JavaScript.
Tetapi apa yang membuatkan mereka amat menarik
adalah bahawa objek juga boleh mempunyai apa dipanggil kaedah, yang benar-benar
hanya satu perkataan mewah untuk fungsi-fungsi yang sedia ada kepada objek juga.
Jadi ia adalah fungsi yang hanya boleh menjadi dipanggil dalam konteks objek.
Hanya satu objek yang telah ditakrifkan fungsi ini di dalam, yang
jika anda berfikir tentang struct, fungsi
ditakrifkan dalam orang-orang yang menentukan pendakap kerinting struktur.
Oleh itu, ia hanya bermaksud sesuatu kepada struktur.
Dan itulah jenis apa yang kita lakukan di sini dengan objek dan kaedah.
Ia pada dasarnya seperti kita mentakrifkan fungsi yang
hanya masuk akal pada objek tertentu, dan dengan itu kita
memanggil bahawa kaedah objek.
Dan kita tidak boleh memanggil bahawa berfungsi secara berkecuali objek,
sama seperti kita tidak boleh mengatakan tahun atau model bebas daripada struct dalam C.
>> Pengaturcaraan supaya berfungsi paradigma melihat sesuatu seperti ini.
Fungsi dan kemudian apabila anda lulus dalam objek sebagai parameter.
Dalam pengaturcaraan berorientasikan objek bahasa, ini semacam mendapat
dibalik, dan kita akan berfikir tentang ia seperti ini, object.function.
Jadi ia semacam dot yang Pengendali lagi membayangkan
bahawa itu beberapa jenis harta atau sifat objek itu sendiri.
Tetapi ini adalah apa objek bahasa pengaturcaraan berorientasikan
mungkin lakukan untuk membuat fungsi menyeru kepada kaedah yang, sekali lagi, yang
hanya satu perkataan khas untuk majlis yang wujud untuk objek.
Ini adalah apa yang sintaks mungkin kelihatan seperti.
Dan dengan itu kita akan mula melihat beberapa ini dalam konteks JavaScript.
>> Anda juga boleh berfikir tentang objek jenis seperti pelbagai bersekutu,
yang kita sudah biasa dengan dari PHP.
Ingat pelbagai bersekutu membolehkan kita mempunyai pasangan nilai utama, bukan
mempunyai indeks 0, satu, dua, tiga, dan sebagainya seperti kita digunakan untuk dari C
tatasusunan.
Array bersekutu boleh memetakan perkataan, seperti dalam video PHP,
kita bercakap tentang topping pizza.
Dan dengan itu kita mempunyai array dipanggil pizza, dan kami
mempunyai keju adalah kunci dan $ 8,99 adalah nilai, dan kemudian peperoni adalah kunci,
$ 9,99 adalah nilai, dan sebagainya.
Dan dengan itu kita juga boleh berfikir tentang yang membantah semacam sama dengan bersekutu yang
array.
Dan sebagainya sintaks ini di sini akan mewujudkan objek baru
dipanggil Herbie dengan dua sifat-sifat di dalamnya.
Tahun, yang diberikan nilai tahun 1963, dan model, yang diberikan tali
Beetle.
>> Dan perhatikan di sini bahawa saya menggunakan petikan tunggal dalam JavaScript.
Anda boleh menggunakan tanda petikan tunggal atau berpasangan apabila anda bercakap tentang tali.
Ia hanya konvensional kes yang kebanyakan masa
apabila anda menulis JavaScript, anda hanya menggunakan petikan tunggal.
Tetapi saya boleh menggunakan tanda petik di sini, dan yang akan menjadi sempurna denda juga.
>> Jadi ingat bagaimana dalam PHP kita mempunyai tanggapan ini
satu bagi setiap gelung yang akan membolehkan kita untuk melelar semua nilai utama
pasang bersekutu yang pelbagai, kerana kita
tidak mempunyai keupayaan untuk melelar melalui 0, satu, dua, tiga, empat,
dan sebagainya?
JavaScript mempunyai sesuatu yang sangat serupa, tetapi ia tidak dipanggil bagi setiap gelung,
ia dipanggil dalam gelung.
Jadi, jika saya berkata kepada saya seperti ini, bagi kekunci var dalam objek,
itulah jenis sama dengan mengatakan bagi setiap sesuatu yang sesuatu.
Tetapi semua yang saya lakukan di sini adalah iterating melalui semua kunci objek saya.
Dan di dalam kerinting pendakap di sana, saya akan
menggunakan objek utama kurungan persegi untuk merujuk kepada nilai di lokasi itu utama.
>> Selain itu, ada walaupun pendekatan yang lain.
Jika saya hanya hanya mengambil berat tentang nilai-nilai, yang boleh saya katakan untuk kekunci objek,
dan hanya menggunakan kunci di dalam.
Jadi untuk kunci var dalam objek, saya mempunyai menggunakan tanda kurung siku objek
utama di dalam gelung.
Untuk kekunci var objek, saya boleh hanya menggunakan utama di dalam gelung,
kerana saya hanya khusus bercakap tentang nilai-nilai di sana.
>> Jadi mari kita mungkin mengambil melihat perbezaan
hanya untuk cepat menunjukkan kepada anda perbezaan di antara empat
dalam dan bagi yang dengan sangat khusus pelbagai, yang kita ada di sini, minggu array.
Jadi saya perlu mencari pelbagai baru bahawa saya dipenuhi dengan tujuh tali,
Isnin, Selasa, Rabu, Khamis, Jumaat, Sabtu, Ahad.
Dan saya mahu sekarang melelar melalui pelbagai ini,
mencetak maklumat tertentu.
Jika saya menggunakan dalam gelung untuk mencetak maklumat,
apa yang anda fikir saya akan dapat?
Nah, mari kita lihat.
Dan sebelum kita melompat ke atas ke tetingkap pelayar saya,
hanya tahu bahawa console.log adalah semacam satu
cara melakukan F cetak dalam JavaScript.
Tetapi apa yang konsol?
Nah, itulah yang kita akan pergi lihat pada ketika ini.
>> OK, jadi kami kembali di sini dalam tetingkap pelayar saya,
dan saya akan membuka sehingga alat pemaju saya.
Sekali lagi, saya hanya memukul F12 untuk membuka alat pemaju.
Dan perhatikan bahawa di sini di bahagian saya telah memilih konsol.
Jadi ini adalah tanggapan konsol pemaju,
dan ia akan membolehkan kita untuk mencetak maklumat di luar,
jenis seperti terminal, tetapi kerana anda akan melihat sedikit kemudian,
kami juga boleh menaip maklumat dalam untuk berinteraksi dengan laman web kami.
Saya akan zum dalam sedikit di sini, dan saya akan sekarang klik di dalam ujian.
Dan empat di test-- Saya tak akan menunjukkan kepada anda kod untuk sekarang,
tetapi anda akan mendapat jika anda memuat turun kod sumber yang
dikaitkan dengan video-- ini hanya itu dalam gelung
yang kita lihat hanya saat yang lalu pada slaid.
>> Jadi saya akan klik yang butang, dan di sini,
inilah apa yang telah dicetak dalam konsol, 0, satu, dua, tiga, empat, lima,
enam.
Saya tidak mencetak maklumat yang dalam lokasi-lokasi array,
kerana saya menggunakan dalam gelung.
Dan di dalam badan gelung, saya hanya dicetak utama tidak membantah utama.
Tetapi jika saya sekarang membersihkan konsol saya, dan saya beralih kepada untuk ujian, dan empat ujian
Saya katakan saya gunakan untuk gelung sebaliknya dan mencetak utama,
jika saya klik itu, sekarang saya mendapat unsur-unsur yang sebenar di dalam objek saya
atau pelbagai saya dalam kes ini.
Pelbagai saya hari minggu.
Saya dicetak Isnin, Selasa, Rabu.
Supaya perbezaan di antara yang dalam gelung, yang mencetak keluar
hanya kunci jika anda hanya menggunakan kekunci dalam jasad gelung,
dan untuk gelung, yang cetakan daripada nilai-nilai jika anda menggunakan hanya
utama di dalam badan gelung.
>> Baiklah, bagaimana kita kini mula menyatukan tali dan mungkin adukkan
beberapa pembolehubah dengan interpolasi seperti kita dapat lakukan pada PHP?
Nah, kami cukup biasa dengan ini dari PHP.
Ini adalah bagaimana kita akan melakukannya dengan menggunakan pengendali dot untuk merangkaikan tali.
Dalam JavaScript, walaupun, kita sebenarnya menggunakan sesuatu
dipanggil pengendali plus, yang adalah mungkin juga sedikit lebih
intuitif, bukan?
Kami menambah sekumpulan tali bersama-sama.
Jadi kita pulang lebih dan melihat apa ini
akan mencetak jika kita cuba untuk mencetak semua maklumat yang pada minggu array.
Baiklah, jadi di bawah sini di bawah tali dinamika,
Saya mempunyai dua pilihan, bangunan rentetan V1 dan kemudian bangunan rentetan V2.
Dan kita akan melihat mengapa kita perlu V2 dalam satu saat.
Tapi aku akan klik pada rentetan bangunan V1, yang
adalah kod yang kami hanya mengambil melihat,
console.log dengan semua plus.
Mari kita lihat jika cetakan ini apa yang kita harapkan.
>> Isnin adalah bilangan hari 01 dalam seminggu, Selasa adalah bilangan hari 11 dalam seminggu.
Nah, apa yang saya cuba untuk melakukan terdapat mendapatkan
ia mencetak Isnin adalah bilangan hari satu, Selasa adalah bilangan hari dua.
Tetapi ia seolah-olah seperti saya sentiasa mencetak satu.
Nah, mengapa?
Nah, ternyata, kita lihat satu lagi di coretan ini sedikit kod di sini.
Perhatikan bahawa kita menggunakan campur pengendali dalam dua konteks yang berbeza.
>> Dan sebagainya di sini di mana mungkin perkara yang kita telah jenis telah berkata,
oh, ia begitu besar.
Kami tidak berurusan dengan jenis data lagi.
Tetapi di sini di mana fakta bahawa kita kehilangan jenis data
sebenarnya boleh agak sesuatu masalah untuk kita.
Sekarang pengendali ditambah yang digunakan untuk menyatukan tali dan menambah nombor
bersama-sama, mempunyai JavaScript untuk membuat tekaan yang terbaik
apa yang saya mahu lakukan untuk saya.
Dan dalam kes ini, ia meneka salah.
Ia hari hanya concatenated, yang akan menjadi 0, satu, dua, tiga, empat, lima, atau enam,
dan kemudian ia hanya concatenated itu dan kemudian dirangkaikan satu.
Ia tidak benar-benar menambah mereka bersama-sama.
Dan supaya bahasa ini, PHP dan JavaScript,
yang abstrak jauh idea ini jenis,
anda tidak perlu berurusan dengan lagi.
Mereka masih mempunyai jenis di bawah hood.
Dan kita boleh, dalam keadaan seperti ini, memanfaatkan hakikat bahawa
dengan mengatakan sesuatu seperti mungkin ini, yang
memberitahu JavaScript, oleh cara, merawat ini sebagai integer,
tidak menganggap ia sebagai tali, walaupun walaupun kita mencampurkan tali
dan bilangan bulat di sini.
>> Ia adalah salah satu daripada perkara-perkara bahawa ia seolah-olah begitu besar dalam konteks
bahawa kita tidak perlu berurusan dengan jenis lagi,
tetapi kadang-kadang anda akan menghadapi keadaan yang
sama seperti ini di mana hakikat bahawa anda tidak mempunyai kawalan ke atas jenis
boleh berbalik pada anda jika anda tidak berhati-hati.
Dan jadi jika kita pop kembali kepada IDE, Saya akan membersihkan konsol saya sekali lagi,
dan saya akan klik rentetan bangunan versi dua, yang
adalah di mana saya menggunakan fungsi int hurai.
Kini ia mencetak maklumat yang saya menjangkakan.
Beberapa hari pertama hari ini, Selasa adalah bilangan hari dua, dan sebagainya.
>> Jadi mari kita bercakap tentang fungsi lagi.
Saya berjanji kita akan bercakap tentang tanpa nama fungsi, dan sekarang konteks untuk
telah tiba.
Jadi sebelum kita berbuat demikian, mari kita bercakap lagi tentang tatasusunan untuk hanya satu saat.
Jadi tatasusunan adalah khas kes objek.
Malah, segala-galanya dalam JavaScript sebenarnya objek.
Jadi fungsi adalah kes khas objek,
bilangan bulat adalah khas kes objek,
tetapi tatasusunan khusus mempunyai beberapa kaedah.
Ingat kerana mereka objek, mereka boleh mempunyai ciri-ciri dan kaedah.
Mereka mempunyai beberapa kaedah yang boleh digunakan untuk objek.
Ada kaedah yang dipanggil saiz, array.size,
yang akan kembali ke anda seperti yang anda jangkakan
bilangan elemen dalam array anda.
array.pop, jenis seperti tanggapan kami bermunculan off
timbunan, jika anda masih ingat dari video susunan kami,
membuang elemen terakhir dari array.
array.push menambah elemen baru hingga akhir array.
array.shift adalah jenis seperti DQ, ia sambat keluar
elemen yang pertama dalam array.
>> Tetapi ada juga satu lagi khas kaedah mudah yang dipanggil peta.
Dan ini adalah jenis yang konsep yang menarik.
Jadi apa idea peta?
Anda benar-benar akan melihat ini dalam beberapa bahasa lain,
dan kami tidak bercakap tentang jenis ahli kartografi peta sini,
kita berbicara tentang fungsi pemetaan.
Dalam konteks kami bercakap tentang di sini, peta
ialah kita operasi khas boleh melakukan pada array
bagi menggunakan fungsi tertentu untuk setiap elemen array itu.
dan dengan itu kita akan berkata dalam kes ini, mungkin array.map,
dan di dalamnya, kita lulus ke dalam peta adalah fungsi yang kita mahu
yang akan dikenakan kepada setiap elemen tunggal.
Jadi ia adalah jenis analog dengan menggunakan gelung untuk melelar atas setiap elemen
dan memohon tertentu berfungsi untuk setiap elemen,
hanya JavaScript telah ini dibina pada konsep pemetaan yang boleh digunakan.
Dan ini dalam cara yang hebat untuk bercakap tentang fungsi tanpa nama.
>> Jadi katakan kita ada pelbagai ini integer.
Ia dipanggil nums, dan ia mendapat lima perkara di dalamnya, satu, dua, tiga, empat,
lima.
Sekarang saya mahu merancang beberapa fungsi ke pelbagai ini.
Saya ingin mempunyai fungsi yang memohon untuk setiap elemen array.
Nah, mari kita mengatakan bahawa apa yang saya mahu lakukan adalah hanya menggandakan semua unsur-unsur.
Apa yang saya boleh lakukan adalah hanya menggunakan gelung untuk var Saya sama dengan 0, saya adalah kurang daripada
atau sama dengan 4, saya plus, plus, dan kemudian dua kali ganda setiap nombor tunggal.
Tetapi saya juga boleh melakukan sesuatu seperti ini.
Boleh saya katakan nums merupakan bekas satu dua tiga empat lima,
sekarang, walaupun, saya mahu anda untuk memohon pemetaan ke pelbagai ini
di mana saya mahu anda untuk menggandakan setiap nombor.
Dan itulah apa yang berlaku di sini.
Tetapi perhatikan apa yang saya lulus sebagai hujah kepada peta.
Ini adalah satu fungsi tanpa nama.
Dan perhatikan saya tidak diberi fungsi ini nama,
Saya hanya diberikan senarai parameter.
Dan jadi ini adalah contoh daripada fungsi tanpa nama.
>> Kita biasanya tidak akan memanggil ini fungsi di luar konteks peta.
Kami mentakrifkan ia sebagai parameter untuk peta, dan dengan itu kita tidak benar-benar
perlu mempunyai nama untuk itu jika Satu-satunya perkara yang mengambil berat tentang adalah peta
dan ia ditakrifkan betul terdapat di dalam peta.
Dan sebagainya ini adalah fungsi tanpa nama.
Kami tidak dapat untuk melakukan ini sebelum ini.
Peta beberapa fungsi yang menerima satu parameter, num,
dan apa fungsi yang tidak adalah pulangan num 2 kali.
Dan sebagainya selepas ini pemetaan telah digunakan,
ini kini apa nums kelihatan seperti, dua, empat, enam, lapan, 10.
Dan kita akan pop ke saya tetingkap pelayar dan hanya
kita lihat ini benar-benar cepat juga.
>> Jadi saya mempunyai butang lain di sini di halaman rumah saya dipanggil dua kali.
Dan apabila saya klik dua kali, dan ia memberitahu saya sebelum ia satu, dua, tiga, empat,
lima selepas dua, empat, enam, lapan, 10.
Dan jika saya kembali dan klik dua kali lagi, dua, empat, enam, lapan, 10.
Dan kemudian selepas itu, empat, lapan, 12, 16, dan kemudian 20.
Dan apa yang saya lakukan dalam fungsi ini?
Nah, jika kita hanya pop ke IDE, dan Saya tarik fungsi tanpa nama saya, di sini
pada baris tujuh melalui 13, Saya melakukan kerja mewah sedikit di sini,
tetapi saya hanya mencetak apa yang kini dalam array.
Kemudian pada baris 16, 17, dan 18, ada peta saya.
Ini adalah di mana saya menggunakan dua kali ganda ini fungsi untuk setiap elemen tunggal.
Dan kemudian lebih jauh, Saya hanya melakukan perkara yang sama
Yang saya lakukan sebelum ini, kecuali sekarang saya mencetak kandungan array
selepas itu.
Tetapi semua yang saya lakukan di sini adalah hanya menggunakan fungsi tanpa nama
untuk memetakan seluruh seluruh array.
>> Jadi satu lagi topik besar untuk bercakap tentang di JavaScript adalah tanggapan peristiwa.
Satu peristiwa adalah sesuatu yang hanya berlaku apabila pengguna berinteraksi dengan web anda
halaman, jadi mungkin mereka klik sesuatu, atau mungkin halaman telah selesai memuat,
atau mungkin mereka telah berpindah tetikus mereka ke atas sesuatu,
atau mereka telah menaip sesuatu yang dalam medan input.
Semua perkara-perkara ini adalah peristiwa-peristiwa yang berlaku di laman web kami.
Dan JavaScript mempunyai keupayaan untuk menyokong sesuatu
dipanggil pengendali peristiwa, yang adalah fungsi panggil balik yang
respons kepada acara html.
Dan apa fungsi panggil balik?
Nah, ia biasanya hanya satu lagi menamakan dengan fungsi tanpa nama.
Ia adalah fungsi yang bertindak balas kepada peristiwa.
Dan ini adalah di mana kita datang ke idea mengikat fungsi tertentu
kepada sifat html tertentu.
Elemen html kebanyakannya mempunyai sokongan untuk atribut
bahawa kita tidak bercakap tentang di html video untuk sesuatu seperti di klik
atau pada hover atau beban, semua peristiwa-peristiwa
bahawa anda boleh menulis fungsi yang berurusan dengan peristiwa-peristiwa
apabila peristiwa-peristiwa berlaku di laman web anda.
>> Dan jadi mungkin html anda kelihatan seperti ini.
Dan saya mempunyai dua butang di sini, satu butang dan butang dua,
dan di sini saya ada pada masa ini apa-apa yang telah ditetapkan,
tetapi ini adalah di mana atribut pada klik nampaknya sebahagian daripada tag html saya.
Jadi nampaknya apabila saya menentukan apa yang berlaku di dalam atribut itu,
ia akan menjadi beberapa JavaScript fungsi yang memenuhi acara
mungkin untuk klik pada satu butang atau butang dua.
>> Apakah jenis sejuk kira-kira ini adalah kami foto A pengendali acara generik.
Dan Handler acara ini akan mencipta objek acara.
Dan objek acara itu akan memberitahu kita mana satu di antara dua butang diklik.
Sekarang bagaimana ia berfungsi?
Dengan baik, ia mungkin kelihatan seperti ini.
Oleh itu, kita pertama akan menentukan butang kami mempunyai tindak balas kepada panggilan balik
fungsi yang akan dipanggil apabila butang diklik,
kita akan memanggil nama amaran acara.
Dan perhatikan kedua-dua kes kami lulus dalam parameter acara ini.
Oleh itu, kita memanggil fungsi ini atau apabila fungsi ini
dicetuskan oleh peristiwa yang berlaku, ia akan mencipta objek acara ini
dan lulus sebagai parameter untuk memberi amaran kepada nama.
Dan bahawa objek acara adalah akan mengandungi maklumat
kira-kira yang butang diklik.
Dan bagaimana ia berbuat demikian?
Dengan baik, ia mungkin kelihatan seperti ini.
Jadi sekarang dalam berasingan saya Fail JavaScript, saya mungkin
perlu mencari ini Nama amaran fungsi, yang
lagi menerima bahawa parameter acara.
Dan maka di sini adalah di mana saya mengesan butang yang dicetuskan,
var pencetus sama acara dot unsur sumber.
Apakah sumber yang dicipta objek acara ini yang telah diluluskan dalam?
Adakah ia satu butang atau adakah ia butang dua?
>> Dan kemudian di sini semua yang saya lakukan adalah mencetak trigger.innerhtml.
Nah, dalam kes ini, dalam hal ini konteks, trigger.innerhtml
hanya apa yang ditulis pada butang.
Ia hanya akan berlaku jika kita melompat kembali untuk kali kedua, yang akan
menjadi apa yang ada di antara kedua-tag butang.
Ia akan menjadi satu butang atau butang dua.
Dan mari kita lihat pada bagaimana pengendali peristiwa ini akan
melihat jika kita mempunyai ia berjalan dalam amalan.
>> Jadi pertama sekali, anda telah membuka events.js,
yang merupakan fail JavaScript di mana Saya telah ditakrifkan fungsi ini.
Dan seperti yang anda lihat, ia cukup banyak apa yang
kita hanya melihat pada slaid kedua yang lalu.
Aku akan pergi ke halaman rumah kita telah menggunakan.
Dan saya ada di butang satu butang dua.
Dan saya akan klik pada butang satu.
Anda klik pada butang satu, jika anda boleh lihat di sini dalam berjaga-jaga.
OKAY.
Klik pada butang dua, anda klik pada butang dua.
>> Jadi kedua-dua butang mempunyai panggilan fungsi sama, bukan?
Kedua-duanya adalah nama amaran acara, tetapi objek acara ini
yang mendapat dicipta apabila kita klik pada ia memberitahu kita butang yang diklik.
Kami tidak perlu menulis dua berasingan fungsi atau perjanjian dengan mempunyai
untuk meluluskan apa-apa maklumat tambahan.
Kami hanya bergantung kepada apa JavaScript akan
lakukan untuk kita, iaitu untuk mewujudkan yang jenis objek acara bagi pihak kami.
Ada banyak lagi yang JavaScript daripada apa yang kita telah dibincangkan dalam video ini,
tetapi mempunyai ini asas perlu mendapatkan anda
agak cara lama untuk belajar semua yang anda
perlu tahu tentang ini bahasa yang menarik.
Saya Doug Lloyd.
Ini adalah CS50.