Allison Buchholtz-AU: Semua orang yang tepat.
Selamat datang kembali ke bagian.
Ini adalah bagian kedua dari belakang kami.
Ini sangat menyedihkan.
Aku tidak tahu apa yang akan saya lakukan tanpa melihat kalian setiap hari Senin.
Saya kira kita harus hanya-- mungkin kita bisa saja
bertemu di sini dan makan malam atau sesuatu.
Saya tidak tahu.
Aku akan membawa makanan sebagai gantinya.
Kami hanya akan bicara.
Tapi ya, minggu depan akan menjadi bagian terakhir kami.
>> Pada catatan itu, Anda memiliki kuis minggu depan.
Aku tahu aku lupa untuk melakukan saya, seperti, dua minggu pemberitahuan terlebih dahulu minggu lalu,
tapi mudah-mudahan kalian tahu ini akan terjadi.
Mudah-mudahan ini adalah salah satu yang terakhir ujian tengah semester untuk kalian untuk semester.
Tapi itu akan menutupi semua materi yang kita sudah berakhir.
Jadi tidak seperti Anda hanya bisa melupakan sekitar empat loop atau variabel.
Karena kita pelajari mereka pada awalnya,
mereka adalah jelas permainan yang adil untuk kuis Anda.
>> Ini akan menjadi format yang sama, yang sama panjang, sehingga Anda sudah digunakan untuk itu.
Ada akan menjadi coding oleh masalah tangan,
mungkin beberapa benar salah, mungkin beberapa jawaban singkat.
Jadi, Anda harus akrab dengan format,
terutama jika Anda mengambil tes praktek.
Tapi seperti yang saya katakan di sini, itu kumulatif, tapi kami pasti
akan fokus pada hal dari seminggu enam dan seterusnya.
Jadi, kami mungkin tidak akan menanyakan tentang berapa byte
dalam setiap jenis atau orang-orang macam hal,
tapi kami mungkin akan menjadi tertarik pada hal-hal seperti daftar link,
atau struktur data yang berbeda, atau algoritma yang berbeda
yang kita bicarakan.
Jadi, pastikan Anda benar-benar up pada mereka, dan jika Anda
membutuhkan sumber daya, inilah banyak sumber daya.
Saya hanya memberi Anda jenis dari daftar cepat di sana.
>> Minggu depan akan kuis meninjau selama ini.
Jadi jika Anda memiliki pertanyaan atau topik tertentu,
hal-hal tertentu pada kuis yang Anda ingin pergi, silakan
mengirimkannya kepada saya sebelumnya sehingga saya bisa jenis mempersiapkan beberapa materi untuk itu.
Dan selain itu bagian review, kami akan
juga memegang kursus-lebar meninjau seperti yang kita lakukan terakhir kali.
Dan itu akan menjadi dilakukan oleh orang yang sama.
Saya tidak tahu apakah itu membuatnya lebih baik atau lebih buruk,
tapi itu akan menjadi diriku, Hannah, Davan, dan Gabe lagi.
Jadi jika Anda ingin datang melihat kita semua olok-olok satu sama lain
dan memandu Anda melalui kuis review, Anda harus pasti
datang dengan Senin depan juga.
Jadi Anda hanya akan memiliki Senin jam dikemas kuis review, yang baik
karena Anda memiliki Selasa untuk memproses melalui segala sesuatu.
>> Tapi yang pasti melakukan cek keluar sumber daya tersebut.
Study.csv.net adalah jauh, saya berpikir, salah satu yang paling berguna,
sebagian besar karena memiliki banyak contoh kode,
ia memiliki semua Power Poin dengan semua catatan di atasnya,
yang benar-benar apa yang saya menggambar yang paling bahan bagian saya dari.
Jika ada sesuatu di sebelumnya bagian yang saya mungkin telah dikirim
Anda mungkin tidak memiliki mendapatkan, just let me know.
Seperti contoh kode pekan lalu, kalau ada yang tidak mendapatkan itu,
hanya email saya atau datang berbicara dengan saya, dan saya akan memastikan bahwa Anda mendapatkan itu.
>> Maka dengan itu, hari ini kita akan untuk berbicara tentang JavaScript.
Jadi di sini we Tommy, siapa aku hanya berbicara dengan Anda tadi malam.
Saya suka Tommy.
JavaScript adalah favoritnya bahasa, karena ia mengatakan di sini.
Mereka akan mencoba dan memberitahu Anda bahwa itu bukan yang terbaik, dan mereka akan salah.
Jadi Tommy adalah master JavaScript.
Aku tidak cukup di nya tingkat, tapi aku seperti,
"Tommy, bagaimana cara mengajar anak-anak ini JavaScript? "
Jadi saya punya beberapa tips, sehingga mudah-mudahan mereka bekerja.
>> Jadi beberapa hal yang perlu diketahui adalah bahwa JavaScript adalah scripting client-side
bahasa, sehingga sedangkan PHP adalah sesuatu bahwa kita dianggap lebih server-side,
itu meng-upload ke server, disusun dan dilaksanakan di sana.
Yang satu ini dijalankan pada komputer Anda sendiri.
OKE?
Jadi Anda memuat beberapa halaman JavaScript, dan dijalankan pada komputer Anda.
Sintaks yang sangat mirip dengan C dan PHP.
Kita akan pergi melalui beberapa contoh JavaScript,
dan Anda akan melihat bahwa Cara kita berbicara tentang variabel, loop,
dan kondisi semua sangat mirip.
OKE?
Fakta bahwa mereka begitu serupa mungkin akan perjalanan beberapa dari Anda
up, dalam beberapa kasus, hanya karena Anda akan memasukkan sedikit C
di mana tidak boleh ada.
Mungkin Anda mencoba dan ketik sesuatu ketika tidak harus diketik.
>> Dan pada itu, satu hal yang tahu adalah bahwa JavaScript
adalah dinamis diketik bahasa, seperti PHP.
Jadi, jika kalian ingat dari bagian pekan lalu,
ketika kami agak melakukan kursus kilat PHP kita,
kita melihat bagaimana satu string bisa berubah menjadi satu int, dan sebagainya.
Jenis variabel Anda ditentukan pada waktu berjalan,
sehingga mereka dapat berubah dari jalannya program,
dan dengan cara yang sama bahwa kita tidak pernah benar-benar mendeklarasikan jenis variabel PHP,
kita akan melakukan hal yang sama hal di sini, di mana kita tidak benar-benar
mengendalikan jenis variabel kita, sehingga untuk berbicara, seperti yang kita lakukan di C.
>> Dan kemudian satu hal yang cukup keren adalah
Anda dapat kesalahan periksa melalui konsol,
dengan fungsi yang besar ini console.log, yang
memungkinkan Anda untuk mencetak berbeda variabel atau objek yang kita akan
berbicara tentang.
Sama seperti minggu lalu ketika saya masih seperti, "menggunakan fungsi ini," dengan sampah
dari pset Anda ini adalah fungsi Anda ingin menggunakan, console.log.
Saya sangat terkejut berapa banyak siswa di jam kantor
tidak tahu tentang fungsi sampah.
Dan aku seperti, "orang-orang, ini akan membuat hidup Anda jauh lebih mudah. ​​"
>> Baiklah, sehingga agak hanya hal singkat, seperti biasa,
kami memiliki contoh.
Aku tahu kalian mencintai mereka.
Jadi, inilah contoh yang sangat sederhana JavaScript mengajukan sini.
Jadi itu hanya akan membuat ini pop-up yang mengatakan,
"Hello world," ketika Anda masukkan halaman, tapi mari kita
mencoba dan berjalan melalui ini sedikit.
Jadi jelas ini hanya seperti index.html normal.
Jadi, hanya template yang biasa kami di sini, dan kami memiliki HTML, kita memiliki kepala kita,
dan seperti dengan CSS, bagaimana kita termasuk beberapa file yang di luar, kan?
Kami memiliki beberapa script type teks yang JavaScript.
Dan sumbernya hello.js, yang di sini.
Ini adalah seluruh file dari hello.js.
Dan kemudian kita memiliki beberapa judul dan beberapa HTML tubuh
bahwa kita tidak benar-benar peduli.
>> Apa yang terjadi adalah, ketika kita memuat halaman ini, secara otomatis menjalankan script ini.
OKE?
Jadi JavaScript akan mengeksekusi secara otomatis.
Jadi apa yang akan dilakukan, itu akan untuk segera pergi dan melaksanakan hal ini.
Dan itu akan berkata, "waspada.
Halo Dunia. "
Yang peringatan adalah fungsi yang benar-benar menghasilkan kotak ini.
OKE?
Jadi itu semacam semua Encompass.
Tidak ada tambahan yang kami punya yang harus dilakukan selain hanya waspada,
dan kemudian apa yang kita inginkan dalam kotak Alert.
OKE?
Jadi itu hanya super sederhana contoh dari apa yang dapat Anda lakukan JavaScript.
>> Salah satu yang benar-benar keren hal, seperti yang kita lihat,
adalah bahwa JavaScript memungkinkan Anda untuk memanipulasi halaman web Anda,
tanpa harus kembali mereka setiap kali.
Jadi jika Anda want-- misalnya, jika Anda melayang di atas sesuatu,
jika kalian pernah terlihat seperti menu bar,
atau ketika Anda membawa lebih dari beberapa topik, menu drop-down muncul,
itu karena JavaScript.
OKE?
Jadi Anda tidak reload seluruh yang Halaman untuk mendapatkan menu ini muncul,
Anda hanya mencari beberapa tertentu tindakan yang pengguna telah diambil,
yang disebut peristiwa yang kita akan mendapatkan dalam, dan setelah Anda melihat bahwa, Anda berkata,
"OK, mengedit sesuatu tentang hal ini Halaman dan membuatnya terlihat berbeda,
tetapi hanya mengedit hal-hal tertentu.
Jangan ulang semuanya. "
Jadi itu benar-benar jauh lebih baik, dan Anda tidak perlu memuat ulang halaman Anda,
dan itu benar-benar keren.
>> Jadi deklarasi variabel, sehingga Anda dapat melihat jenis,
Aku meletakkan di atas sini, longgar diketik.
Jadi ini sangat banyak seperti PHP.
Kita tidak perlu memberitahu JavaScript jenis kami
mengharapkan masing-masing variabel tersebut menjadi.
Mereka bisa menjadi jenis apapun yang kita inginkan.
Jadi Anda melihat dalam hal ini, kami menyatakan mereka sangat sederhana, hanya dengan "var"
dan kemudian apa pun yang kita inginkan Nama variabel kami untuk menjadi.
Satu hal yang perlu diperhatikan adalah bahwa ketika Anda menempatkan var di depan nama variabel,
secara lokal scopes itu.
OKE?
Ini benar-benar masuk akal untuk Anda untuk benar-benar hanya menghapus var
dan hanya memiliki s sama CS50, dan itu hanya akan menjadi variabel global.
OKE?
Sehingga Anda dapat menginisialisasi kedua cara, hanya tergantung pada bagaimana Anda inginkan.
Jadi jika Anda menginisialisasi itu dalam fungsi,
dan Anda ingin bahwa variabel tetap scoped dalam fungsi itu,
Anda akan ingin melakukan sesuatu seperti var nama variabel,
dibandingkan jika Anda menginginkannya global scoped, Anda
hanya dapat melakukan nama variabel dan kemudian
apa pun yang Anda ingin itu ditetapkan sama dengan.
OKE?
>> Ini adalah jenis hal yang keren di sini, karena jika kita melihat variabel kami
b mulai keluar sebagai benar.
Dan apa ini does-- bisa ada yang bilang padaku apa hal ini?
Jadi kita memiliki beberapa peringatan.
Apa yang akan ketik b berada di awal?
AUDIENCE: Boolean.
Allison Buchholtz-AU: Boolean.
Yang Tepat.
Dan kemudian kita menetapkan kembali b string ini, kan?
Jadi di sini, apa jenis b adalah?
Ini akan menjadi string, kan?
Jadi apa yang penting untuk pemberitahuan adalah bahwa dalam c, kita
bisa hampir tidak pernah melakukan sesuatu seperti itu.
Kita harus memiliki variabel, dilemparkan sebagai sesuatu yang lain,
mungkin melakukan beberapa fungsi dengan dua i, pergi dari biaya ke integer.
Tetapi jika kita perhatikan di sini, b sangat mudah berubah mengetik.
>> AUDIENCE: Tunggu, sehingga Anda hanya dapat seperti, "membuat b integer?"
>> Allison Buchholtz-AU: Ya.
Anda hanya dapat menetapkan kembali b ke integer.
>> AUDIENCE: Benarkah?
>> Allison Buchholtz-AU: Ya.
Dan kemudian itu akan menjadi int.
Jadi variabel Anda dapat berubah seiring jalannya program juga.
Mereka tidak benar-benar diketik.
Hal ini sangat longgar diketik.
OKE?
Pada dasarnya variabel Anda dapat melakukan apapun mereka inginkan, seperti yang kita semacam melihat dengan PHP.
Mereka dapat melakukan beberapa hal gila, jadi penting untuk menjadi cukup hati-hati.
Nama variabel Anda dengan baik.
Jika Anda tidak, lakukan secara tiba-tiba Anda akan menjadi seperti,
"Tunggu, aku pikir ini adalah tali, dan sekarang ini merupakan int,
dan aku tidak benar-benar yakin apa yang terjadi di sini. "
Jadi ini hanyalah sebuah contoh sederhana menunjukkan bagaimana variabel dapat dengan mudah
mengubah jenisnya lebih jalannya program.
>> OKE.
Jadi ini harus melihat super, super akrab.
Jadi ini adalah loop kami di JavaScript.
Mereka persis sama, kecuali untuk bukan empat int i sama dengan nol,
kita hanya bisa mengatakan var i sama dengan nol.
Dan kemudian kita bisa memiliki jenis yang sama kami kondisi, jenis yang sama dari pembaruan,
i plus plus bekerja dengan baik.
Jadi merangkak adalah sama, sesekali adalah sama,
dan melakukan sesekali persis sama.
Jenis yang sama format umum.
Kita perhatikan, empat, tanda kurung, kurung, itu semua sama.
Juga akan ada titik koma ketika kita sampai ke contoh kode.
Anda akan melihat itu cukup sama seperti c.
>> Untuk deklarasi fungsi, lagi, sangat mirip.
Kami memiliki beberapa fungsi yang hanya mengatakan bahwa itu fungsi, dan kemudian
nama kami fungsi, dan masukan.
Dan lagi jika kita perhatikan, kita tidak memiliki jenis apapun di sini.
Yang Tepat?
Kami tidak ada yang mengatakan bahwa ini perlu int atau ganda, atau mengapung.
Mereka bisa menjadi apa pun yang mereka inginkan.
Yang penting adalah menyadari bahwa kita perlu menulis fungsi terlebih dahulu
untuk membiarkan JavaScript tahu bahwa ini sebenarnya fungsi.
>> Jadi ini hanya beberapa penjumlahan sederhana fungsi yang mengembalikan x atau y,
dan kemudian apa yang juga keren adalah bahwa Anda benar-benar bisa
menetapkan fungsi ke variabel.
Jadi dalam hal ini, jumlah sekarang fungsi yang sebenarnya sum.
Jadi, jika Anda melihat di sini, kita memiliki Fungsi, nama fungsi, input.
Yang Tepat?
Di sini kita hanya memiliki fungsi dan masukan.
Jadi ini disebut fungsi anonim.
Dan ini adalah sesuatu yang harus baru untuk sebagian besar dari kalian, jika tidak kalian semua.
Jadi pada dasarnya apa yang berarti bahwa kita tidak
perlu nama kami fungsi dalam kasus ini.
Kami hanya bisa mengatakan, "OK, aku akan memiliki fungsi ini yang mengeksekusi, di sini
adalah input, dan inilah apa yang akan lakukan. "
Dan terutama ketika Anda menetapkan fungsi beberapa variabel
bahwa Anda akan memanipulasi, Anda tidak perlu
perlu nama itu karena Anda akan merujuk
untuk itu oleh variabel ini Nama, tidak dengan cara apa pun
Fungsi ini sebenarnya disebut.
OKE?
>> Jadi jika kita lihat di sini, kami memiliki beberapa variabel jumlah sekarang
yang sama dengan jumlah tiga dan lima.
Dan kita akan mendapatkan ini.
Dan ini hanya akan memiliki beberapa peringatan, tiga ditambah lima sama dengan nomor.
Ditambah ini hanya akan menggabungkan apapun jawaban kami adalah ke string.
Juga keren, ditambah dapat menggabungkan string.
>> Untuk JavaScript, seperti PHP, HTML, CSS dan seperti yang kita katakan,
banyak itu kita seperti berada mengambil roda pelatihan off di sini
dan kalian punya banyak yang tahu bagaimana untuk benar-benar memahami hal-hal ini.
Mereka sedikit berbeda, tapi mereka tidak begitu asing
dan bahwa Anda tidak dapat Google hal-hal atau melihat mereka secara online dengan sekolah w3.
Dan kami benar-benar mengharapkan Anda orang untuk, jenis, percobaan
dan belajar sendiri.
Jadi, saya tahu ini mungkin tampak sedikit kurang teliti dari beberapa hal c
kita lakukan, tapi itu benar-benar karena suatu alasan.
Tapi mudah-mudahan itu tidak terlalu berbeda, dan itu tidak berlebihan.
>> Jadi array dalam JavaScript, lagi sangat, sangat mirip.
Yang Tepat?
Kami memiliki beberapa variabel array itu sama dengan kurung kosong,
dan itu hanya array kosong.
Hal ini sering disebut notasi array literal.
Itu baru satu hal yang kita menyebutnya.
Jika kita melihat array dua di sini, kami memiliki beberapa Array literal yang memiliki tiga unsur,
yang tepat?
Dan kemudian kita memiliki beberapa Elemen ketiga var yang
beberapa variabel yang hanya akan mengadakan string ini, JS.
>> Unsur-unsur, baik untuk melihat, dipisahkan dengan koma,
seperti yang kita harapkan.
Dan Anda juga dapat mengakses, seperti yang kita lakukan di C, dengan notasi indeks ini, kan?
Jadi berbeda dengan PHP sekarang, kita akan kembali
hanya jenis merujuk hal-hal dengan indeks.
Sama seperti C, itu juga indeks nol.
Saya merasa seperti itu akan benar-benar kejam jika mereka tiba-tiba membuat JavaScript satu
Indeks, dan Anda harus benar-benar memikirkan kembali bagaimana Anda berpikir tentang array.
>> Satu hal yang keren adalah bahwa alih-alih karena harus do-- jika Anda pernah
ingin panjang array, mungkin Anda iterate melalui itu
sampai Anda menemukan beberapa akhir, atau Anda hanya akan tahu apa itu.
Karena JavaScript sangat longgar lebih cara dari sekedar jenis, seperti yang kita lihat di sini,
kita hanya bisa membuat array ini lebih besar karena kita memutuskan untuk.
Jika kita melihat berbagai tiga memiliki tiga hal untuk memulai,
tapi kemudian tiba-tiba, kita seperti, "oh, hanya bercanda.
Kami benar-benar akan untuk membuatnya 101 hal. "
Jadi jika Anda pernah ingin tahu panjang sebenarnya array,
Anda melakukannya seperti ini.
Dan kita akan melihat banyak notasi ini di contoh,
tapi dengan JavaScript itu biasanya apa pun
objek yang Anda bicarakan dot apa pun jenis fungsi
Anda ingin diterapkan untuk itu.
OKE?
>> Jadi dalam hal ini, kami objek adalah array dua,
dan kita katakan kita ingin panjang array dua.
Jadi ini hanya panggilan seperti panjang itu.
Dan itu akan kembali panjang Anda.
Juga sesuatu yang perlu diperhatikan adalah bahwa jika kita melihat array kita,
tidak seperti C, mereka tidak memiliki menjadi semua jenis yang sama.
Ini jauh lebih seperti PHP.
JavaScript pada dasarnya adalah seperti berbaur menarik ini C dan PHP.
Jadi kita akan masuk ke dalam itu.
Untuk saat ini, mari kita asumsikan bahwa array Anda pada dasarnya
seperti C array, dalam mereka nol diindeks.
OK, jadi itu adalah segalanya.
Anda juga bisa hanya memperpanjang array ke indeks apa pun yang Anda inginkan.
Sedangkan ini mungkin akan seg kesalahan pada Anda atau memberikan beberapa kesalahan,
JavaScript adalah seperti, "nah, itu baik-baik saja.
Aku punya ini.
Kami hanya akan pergi langsung di mana Anda ingin. "
>> OK, jadi objek yang sangat penting.
Kalian akan menggunakan banyak ini di P set Anda, jika saya ingat dengan benar.
Jadi hal yang ini mirip dengan di C struct.
Jadi Anda bisa memikirkan about-- saat kita pergi ke sebuah contoh yang tepat
setelah ini saya pikir itu akan membuat lebih banyak sense--
tapi pada dasarnya kita menggunakan benda-benda untuk mengatur informasi yang berkaitan dengan kursus.
Ketika kita berbicara tentang struct di C, kita sering
berbicara tentang seorang mahasiswa yang memiliki beberapa nama, ID, rumah, Anda tahu, konsentrasi.
Dan itu semacam hal yang sama bahwa kita menggunakan benda-benda untuk di sini.
Hanya saja untuk mengatur informasi serupa.
>> Anda juga bisa memikirkan ini sebagai lebih mirip dengan asosiatif array di PHP.
Jadi ini akan menjadi semacam hal di mana kita memiliki beberapa kunci dengan nilai tertentu,
sangat mirip dengan PHP.
Sehingga Anda dapat menginisialisasi beberapa obyek kosong, seperti yang kita lihat di sini,
hanya dengan kurung kurawal.
Array begitu juga tanda kurung.
Benda kosong adalah kurung kurawal.
Perbedaan yang baik untuk memiliki.
Dan ini hanya dua yang berbeda cara untuk mengatur properti.
Jadi ini adalah jenis lebih banyak cara yang
mirip dengan PHP, dengan kami array asosiatif, dengan kunci kami,
dan nilai kita, sedangkan satu ini is-- Anda akan
melihat ini lebih banyak di JavaScript.
Hal ini cenderung konvensi.
Dan dengan cara yang sama yang kita lakukan array dua dot panjang, ini mengatakan,
"OK, beri aku ini atribut dari objek ini. "
Yang Tepat?
Jadi dengan cara yang sama seperti itu, "beri aku panjang atribut array dua, "
ini mengatakan, "memberi saya beberapa milik obyek kosong kami. "
Atau dalam hal ini, kita menugaskan beberapa nilai di sini.
Tapi Anda juga bisa mengaksesnya dengan cara itu.
>> Dan maka di sini ini hanya menampilkan dua tanda berbeda.
Jadi ini akan menunjukkan tanda akan sama persis,
itu hanya dua cara yang berbeda mengakses elemen yang kita inginkan.
Apakah itu masuk akal untuk semua orang?
Saya merasa seperti ini mungkin lebih masuk akal,
hanya karena kita datang dari PHP.
Tapi seperti yang kita lakukan lebih banyak contoh, ini secara harfiah persis sama.
Banyak itu hanya perubahan sintaks.
>> OK, jadi contoh.
Saya suka contoh.
Jadi di sini adalah beberapa CS50 variabel yang adalah obyek,
dan kita menyimpan semua ini informasi tentang hal itu.
Jadi kita harus tentu saja, instruktur, TFS, psets, dan direkam.
Jadi kita melihat ini hampir semua jenis.
Yang Tepat?
Jadi obyek dapat menyimpan atribut dari berbagai jenis.
Kita bisa memikirkan this-- itu sangat mirip dengan array asosiatif kami di PHP.
Jadi kuncinya, nilai, kunci, nilai, key, value, seterusnya dan sebagainya.
Yang juga menarik dengan cara yang sama bahwa kita dapat memiliki array dalam array,
kami juga dapat memiliki objek dalam benda, atau array dalam objek.
Anda pernah benar-benar terbatas hanya satu dari hal-hal.
Kita bisa menjadi sangat Inceptionesque, hanya terus ke lubang kelinci di sana.
>> Jadi jika kita perhatikan, kita memiliki beberapa kursus yang
adalah string, instruktur yang string, dan array, int, dan Boolean.
Jadi semua hal-hal yang berbeda.
>> Baiklah, jadi, kita memiliki satu sama lain.
Jadi dalam hal ini, kita memiliki array obyek.
Jadi hanya seperti sebuah objek dapat memiliki sebuah array di dalamnya.
Kami juga dapat memiliki sebuah array dari objek.
Hal ini mungkin berguna untuk berpikir tentang mirip dengan jenis
bagaimana kita memiliki hash meja, kami memiliki sebuah array
dari semua ini berbeda jenis struct yang
adalah pointer ke berbeda node dan yang lainnya.
Tapi dalam kasus ini, kita memiliki array obyek.
Jadi ini seperti sebuah array array asosiatif.
Jadi kita memiliki beberapa elemen pertama akan menjadi obyek dengan nama James
dan rumah Winthrop.
>> Kalian mungkin ingat sesuatu yang sangat mirip dengan ini
dengan pset terakhir Anda, di mana jika Anda menarik sesuatu dari database Anda,
jenis pertama hal dalam array adalah
semua informasi tentang pengguna pertama yang bertemu itu,
dan kemudian Anda harus indeks ke dalam untuk mendapatkan saham mereka atau tembolok mereka
atau yang lainnya.
Jadi ini sangat banyak yang sama hal, hanya sedikit perubahan
dalam sintaks, perubahan sedikit di kata-kata yang kita gunakan untuk menggambarkan mereka.
>> Jadi jika kita ingin, bisa ada yang bilang apa peringatan ini akan lakukan di sini?
Atau apa bit ini Kode akan lakukan untuk kita?
AUDIENCE: Ini akan memberikan semua nama.
Allison Buchholtz-AU: Benar, sehingga hanya akan mengingatkan dengan semua nama
karena akan pergi melalui pondok i, sehingga akan dimulai dari nol.
Jadi akan mengatakan, OK kita cari pada objek pertama ini, yang
adalah slot pertama dalam array kita.
Dan ia mengatakan, "beri aku atribut, nama objek itu. "
Jadi kita pergi ke sini, kita akan scan, kita akan menemukan nama,
dan kami akan mencetak James, Molly, dan Carl.
Setiap pertanyaan sejauh ini?
JavaScript sayangnya Anda akan menjadi
melakukan banyak mencari pada Anda sendiri, mencari tahu sintaks,
bergulat dengan itu.
Tapi tentu saja aku selalu di sini, jam kantor selalu di sini.
Aku mungkin pada hari Selasa minggu ini.
Jadi jika Anda berada di sana, Anda dapat datang mengunjungi saya minggu ini.
Ini akan menjadi besar.
>> OK, jadi DOM adalah Document Object Model-.
Jadi ini hanya cara bahwa kita suka berpikir
tentang bagaimana HTML dan segalanya di dalamnya diatur.
Hal ini sangat banyak sesuatu yang mungkin akan muncul di kuis Anda.
Aku tahu tahun saya, itu seperti inilah File HTML, mengisi DOM untuk itu.
Dan Anda hanya mengisi hal-hal kecil.
Ini harus menjadi titik mudah mudahan.
Mudah-mudahan Anda akan see--
>> AUDIENCE: [tidak terdengar]
>> Allison Buchholtz-AU: Jadi Anda melihat pohon ini di sini?
>> AUDIENCE: Ya.
>> Allison Buchholtz-AU: Jadi mereka akan meminta penggunaan
untuk mengisi apa yang terjadi di bawah tubuh.
Mungkin di bawah tubuh, kami memiliki beberapa divs atau kita memiliki beberapa paragraf,
dan kami akan meminta Anda untuk mengisi pohon yang sangat banyak seperti ini.
Jadi kita akan berjalan melalui itu.
Jadi Dokumen-Object Model ini hanya cara
struktur dan berpikir tentang HTML kita grafis.
Dan juga ketika kita mendapatkan menjadi lebih JavaScript,
itu akan menjadi cara bahwa kita benar-benar
memanipulasi berbeda elemen pada halaman.
Kita perlu cara untuk mengakses setiap hal di HTML kita,
dan jadi ini memberi kita sangat cara standar beton
di berbagai halaman web untuk melakukan itu.
>> Jadi jika kita hanya berjalan melalui ini di sini, tentu saja
dokumen kami seperti seluruh file kami.
Yang jelas masuk akal bahwa itu hal yang tertinggi,
dan kemudian kita memiliki HTML kita yang sebenarnya, yang sesuai dengan tag ini di sini.
Juga jika Anda dalam indent tag Anda benar, kemudian menciptakan pohon DOM ini
menjadi super sederhana.
Jadi kita memiliki beberapa kepala di sini.
Kami memiliki beberapa tubuh yang kita melihat batang off dari HTML,
itulah sebabnya mengapa kita memiliki kepala dan tubuh.
Dalam kepala, kami memiliki beberapa tag judul, akhir tag judul,
jadi kita tahu yang datang setelah kepala.
Dan dalam tag judul kami, kami memiliki halo, dunia.
OKE?
Jadi itulah cabang tangan kiri ini seluruh.
Dan kemudian untuk cabang kanan di sini, kita melihat bahwa kita memiliki HTML,
OK kita sudah melakukan kepala bagian ini, kita cari hanya di tubuh,
sehingga kita memiliki beberapa area tubuh.
Dan dalam itu, satu-satunya hal yang kita miliki adalah halo, dunia.
OKE?
Jika kita memiliki hal-hal seperti beberapa braket p dan kemudian
halo, dunia, dan kemudian lain braket p selamat tinggal, dunia,
kita akan memiliki dua gelembung datang dari sini.
Karena mereka berdua di bawah tubuh, namun mereka paragraf terpisah kasus ini.
Pasti ada praktek pada bahwa dalam kuis sebelumnya,
serta banyak secara online di atasnya.
OK jadi, ini hanya memungkinkan kita melihat segala sesuatu dengan baik
dan memanipulasi hal-hal sangat sistematis.
OKE?
Kita tahu persis bagaimana melintasi melalui pohon ini,
jadi kita tahu apa yang kita ingin mengakses.
>> OK jadi ini adalah mengapa kita ingin memiliki semacam ini model,
sehingga kita dapat menggunakan hal-hal seperti ini, dan kami mengerti apa yang mereka maksud,
dan mereka standar di semua hal yang kita lakukan.
Jadi dokumen dot judul hanya judul our-- semua ini
sendiri cukup jelas, Saya suka berpikir.
Jadi yang pertama tiga contoh hanya mengatakan,
"OK, hanya memberikan judul halaman web ini. "
Sehingga akan memberikan apa sesuai dengan judul.
>> Dokumen dot tubuh akan memberikan apa pun yang dalam tag body.
Sehingga Anda dapat memanipulasi itu.
Dan dokumen dot tubuh dot masukkan HTML adalah salah satu yang sangat dingin,
dan mungkin tidak seperti super intuitif, tetapi HTML batin
sesuai dengan hak ini di sini.
Jadi jika Anda pernah ingin memanipulasi teks pada halaman,
biasanya Anda akan melakukan sesuatu dengan tubuh dot HTML batin.
OKE?
Jadi HTML batin cenderung untuk merujuk apa yang sebenarnya antara tag tersebut.
OKE?
Dan kemudian fungsi yang berguna.
Jadi jika Anda ingin mendapatkan semua ini, setiap elemen,
kami memiliki beberapa Id, kelas Nama, atau nama tag.
Hal ini sangat mirip dengan hal yang kita lakukan dengan CSS, kan?
Di mana kita memiliki beberapa pemilih yang sesuai dengan baik tag, kelas
bahwa kita memberi mereka, atau Id.
Hal ini sangat banyak cara yang sama.
Jika Anda memiliki sesuatu yang memiliki beberapa kelas anjing,
dan Anda mengatakan mendapatkan elemen dengan nama tag, dan Anda menempatkan anjing di besar-- atau maaf,
nama kelas.
Anda dapat menempatkan titik di sana.
Ini akan mengembalikan semua dari mereka elemen untuk Anda yang memiliki kelas itu.
Sehingga Anda dapat memanipulasi hanya mereka.
Dengan cara yang sama, mungkin Anda hanya ingin memanipulasi beberapa header, sehingga
beberapa judul h1, seperti yang kita lakukan.
Anda bisa mendapatkan unsur menurut tag nama, karena h1 adalah nama tag.
Dan dengan cara yang sama, jika Anda ingin mendapatkan beberapa hal yang unik, Anda dapat melakukan get tag.
Dapatkan elemen dengan Id.
Dan mereka benar-benar banyak ini.
Ini hanya seperti tiga yang sangat banyak.
Jadi, jika Anda online, seperti Aku akan mendorong
Anda lakukan, dan melakukan beberapa penelitian pada Anda sendiri,
Saya merekomendasikan melihat ke semua orang.
Mereka bisa menjadi super berguna, terutama ketika
Anda ingin hanya jenis memanipulasi hal yang sangat spesifik tanpa
untuk pergi melalui dan mencoba untuk mengurai segala sesuatu.
>> OK, jadi hal terakhir adalah aktivitas JavaScript.
Jadi ketika saya sedang berbicara sebelumnya tentang pergi ke sebuah situs web,
dan ketika Anda membawa lebih dari sesuatu, atau mouse melayang di atas sesuatu,
sesuatu yang lain terjadi.
Ini adalah apa yang kita ingin pikirkan sebagai suatu peristiwa.
Jadi apa yang kita miliki kekuatan itu berguna di sini adalah onclick.
Jadi saya berada di hover, yang, saya cukup yakin, hanya di hover.
Juga satu ton ini Anda dapat mencari.
Ada daftar seluruh secara online hal yang berbeda
Anda dapat mendengarkan.
>> Tapi peristiwa JavaScript adalah pada dasarnya hanya menanggapi hal-hal
bahwa pengguna Anda lakukan.
Yang Tepat?
Jadi pengguna tidak sesuatu, itu suatu peristiwa,
dan JavaScript akan merespon namun Anda ingin untuk.
Ini akan merespon sesuai.
Jadi dalam hal ini, kita memiliki beberapa jendela dot onload.
Jadi apa ini, dapat dikatakan, "tunggu sampai jendela dimuat. "
OKE?
Jadi, ketika semuanya dimuat, onload, maka Anda dapat menjalankan fungsi ini.
Jadi, ketika semuanya dimuat, Anda akan
memiliki beberapa tombol pencarian yang mendapat suatu elemen dengan Id,
dan mencetak apa pun Unsur adalah sebagai tombol Search.
Dan kemudian kita memiliki variabel ini, kita katakan, "OK, onclick."
Jadi ketika kita mendengar bunyi klik pada tombol Search,
melaksanakan fungsi ini, yang merupakan peringatan, Anda mengklik tombol Search.
>> Jadi apa yang terjadi is-- ini bagus sedikit representasi grafis di sini.
Jadi beban dokumen kami, itu onload kami,
kita menemukan Pencarian kami tombol, yang ini.
Kami sedang mencari tombol Cari kami.
Dan kemudian ketika tombol Search adalah diklik, itu sesuai dengan di sini.
Onclick.
Kemudian kita akhirnya mengingatkan pengguna kami, yang merupakan baris terakhir ini di sini.
OKE?
Jadi masing-masing empat langkah saja sesuai dengan empat kotak
di sana di bagian bawah.
Apakah itu masuk akal untuk semua orang?
>> Dan kemudian satu hal yang aku hanya akan lagi sangat, sangat singkat, bahwa saya
mendorong kalian untuk pergi melihat lebih ke dalam adalah
jQuery, yang hanya perpustakaan yang dibangun di atas JavaScript.
Ini super berguna, karena dengan sebagian besar perpustakaan.
Ada banyak fungsi.
Jadi, jika ada sesuatu yang pernah Anda ingin lakukan dalam JavaScript,
insting pertama Anda tidak boleh berpikir
dari, "apa fungsi harus Aku kode? "Seharusnya,
"Biarkan aku melihat seseorang yang sudah melakukan ini untuk saya. "
Karena sembilan dari sepuluh, seseorang akan melakukannya sudah,
dan mereka mungkin melakukannya lebih baik.
Orang-orang menghabiskan banyak waktu melakukan ini, dan JavaScript sangat banyak digunakan,
sehingga orang yang terus-menerus mencoba untuk membuatnya lebih baik.
Dan jQuery memiliki banyak fungsi yang mungkin akan berguna bagi Anda
dalam tugas akhir Anda jika Anda melakukan apa-apa dengan desain web.
Seperti yang saya ingin mengatakan, "Pekerjaan cerdas, bukan lebih keras. "
Jika kalian melakukannya, itu akan menjadi besar.
Ketika kita berada di hackathon saya tidak ingin Anda untuk menjadi semua stres.
Aku ingin kau menjadi seperti, "aku ini. jQuery kembali saya.
Saya tidak perlu menulis fungsi-fungsi ini. "
>> Jadi hanya dua hal yang ingat, aku akan
untuk membiarkan kalian terlihat lebih ke jQuery sendiri.
Semua aku akan mengatakan itu melakukan beberapa hal yang cukup mengagumkan
dan dapat membuat hidup Anda jauh lebih mudah.
Tapi apa yang Anda ingin miliki adalah file apapun yang
bahwa Anda akan menggunakannya dalam, Anda akan ingin dua baris.
Anda akan ingin naskah js jQuery dot js.
Dan sebenarnya sumber Anda akan ada beberapa URL.
Jika Anda Google jQuery, Google sebenarnya host semua file untuk Anda.
Jadi Anda pasti ingin masukan URL gantinya.
Aku hanya menempatkan ini di sini untuk mudahnya.
Semua ini berarti adalah tempat untuk menemukan perpustakaan jQuery Anda.
Ini besar, sehingga Anda tidak ingin menyimpannya di komputer Anda sendiri
jika Anda dapat menghindari hal itu, itulah sebabnya kami cenderung hanya dimasukkan ke dalam URL Google yang
host semua file-file ini untuk Anda.
OKE?
Anda Google itu, aku janji itu akan berada di sana.
>> Dan kemudian apa pun File JavaScript yang Anda
menggunakan, jadi ini hanya beberapa eksternal JavaScript file yang Anda gunakan.
Dengan cara yang sama bahwa kita link ke CSS kami file, ini adalah hal yang sama.
Ini hanya link ke file di mana Anda JavaScript.
Dan saya memiliki beberapa contoh dengan JavaScript sederhana.
Jadi kita akan pergi melalui itu.
Dan kemudian dalam indeks Anda JavaScript, yang Anda JavaScript mengajukan sini,
ini adalah jenis pembungkus yang Anda miliki untuk jQuery.
Kau hampir 99,9 persen dari waktu akan
untuk memiliki ini dalam file index.js Anda.
Karena apa ini mengatakan adalah, "Tidak mengeksekusi apa-apa
sampai dokumen Anda sebenarnya siap, "yang adalah apa yang Anda inginkan.
Karena jika dokumen Anda tidak siap, dan jQuery mulai melakukan hal-hal,
itu hanya berantakan.
Jadi, Anda selalu ingin memiliki wrapper ini.
Dan kemudian untuk hal-hal yang masuk ke sana, saya akan meninggalkan untuk membaca dengan teliti orang Anda sendiri.
>> OK, jadi apakah ada pertanyaan yang tepat sekarang sekitar JavaScript pada umumnya?
Atau model DOM?
Jika tidak, kami memiliki beberapa keren contoh yang bisa kita lalui,
bahwa kalian dapat membantu saya kode.
Tapi aku juga akan menjadi super bagus, dan jika Anda
tidak ingin mengatakan apa-apa untuk ini, itu baik-baik saja.
Saya juga bisa hanya memberikan contoh.
Tapi apa pun di PowerPoint sebelum kita melanjutkan?
Keren.
>> Saya merasa seperti kalian perlu energi.
Jadi saya pikir kita akan memulai dengan contoh partai pertama saya.
Kami memiliki tiga contoh, Anda memiliki pilihan Anda.
Jadi kita memiliki jam, di mana kita akan untuk menerapkan jam aktual yang
akan memperbarui seiring berjalannya waktu.
Kami memiliki fungsi Twitter yang besar ini.
This-- Anda tahu apa, tunggu.
Kita akan membuat ini pergi.
Bam.
OKE.
>> Kami memiliki fungsi Twitter yang besar ini di sini, itu-- aku tahu, kan?
Ini akan menjadi besar.
Apakah kalian bersemangat?
Yang akan menghitung jumlah karakter yang telah Anda tinggalkan,
jadi jika saya ketik sekarang, jelas masih mengatakan 140,
tetapi kita tahu bahwa tidak terjadi.
Dan kemudian dengan satu terakhir kami di sini, klik di sini untuk pesta.
Apa yang akan terjadi adalah ketika kita klik, latar belakang yang
akan mengubah warna.
Jadi kalian punya pilihan Anda yang mana yang Anda ingin lakukan pertama.
Aku berjanji akan mengambil sangat mudah pada Anda.
Aku merasa seperti orang semacam hanya sangat rendah kunci hari ini.
Jadi saya akan memandu Anda melalui cara kita akan menerapkan semua ini.
Jika Anda ingin berpadu di, itu hebat, tapi aku
merasa seperti semua orang sedikit lelah.
Jadi saya hanya akan memandu Anda melalui contoh-contoh ini.
Apakah kita memiliki sesuatu yang kami ingin lakukan pertama?
Siapa Saja?
Tidak ada pilihan?
OKE.
Kamu tahu apa?
Kami berada di pesta.
Saya merasa seperti kalian perlu little-- sebuah jadi, kami akan melakukan salah satu pihak pertama.
OKE.
>> Jadi apa yang kita miliki di sini-itu tidak seharusnya berada di sana.
Sekarang baik.
OKE.
Jadi apa yang kita miliki di sini adalah hanya halaman HTML sederhana
bahwa kalian semua harus menjadi super akrab dengan dua psets terakhir Anda.
kami memiliki tipe doc kami di sini.
Bisakah semua orang melihat?
OKE.
Keren.
Kami memiliki HTML kita jelas.
Kami memiliki beberapa judul yang terkait dengan style sheet yang
hanya membuat font yang saya bagus dan besar dan tebal.
Jadi jangan khawatir tentang itu.
>> Kami memiliki beberapa tubuh dengan latar belakang Id, OK?
Karena kita akan menjadi mengubah latar belakang.
Jadi ketika kita mengubah latar belakang tubuh kita,
kita ingat dari dua minggu yang lalu ketika kita berhadapan dengan halaman web.
Begitu baik untuk memiliki.
Dan kami memiliki beberapa Id sama partai.
Ini h ref pound hanya berarti bahwa itu akan masuk ke halaman yang sama.
Dan klik di sini untuk pesta, itulah sebabnya ketika kita klik,
harus mengubah warna, untungnya.
>> Dan kemudian kita memiliki beberapa script di sini bahwa hanya terkait dengan partai ini dot js
File, yang kosong karena Kami tidak melakukan apa pun.
Dan itu sangat menyedihkan.
Tapi segera, itu akan berubah warna, dan itu akan menjadi luar biasa.
>> Jadi aku hanya akan berjalan kalian melalui bagaimana kita bisa pendekatan ini.
Jadi hal pertama yang kita mungkin ingin lakukan,
jika kita mengubah latar belakang tubuh, hal pertama yang kita mungkin ingin
lakukan sebenarnya ambil apa tubuh, kan?
Jadi kita ingin memiliki sum, kami latar belakang, dan jika Anda perhatikan,
Aku hanya otomatis hanya mulai mengetik.
Tidak ada yang istimewa bahwa kita perlu lakukan untuk file JavaScript kita.
Aku bisa mulai menyatakan variabel, dan menyatakan fungsi acak.
Dan itu bentuk yang lebih bebas.
Ini seperti dengan C, kami memberikan Anda semua aturan keras, dan Anda tumbuh,
jadi kita seperti, "pergilah.
Bebas.
Lakukan apa yang Anda inginkan. "
Dan itulah yang JavaScript.
Jadi kita memiliki beberapa latar belakang di sini.
Dengan model DOM kami, kami tahu kami dapat melakukan dokumen dot mendapatkan elemen,
dan jika kita perhatikan di sini, tubuh kita memiliki Id.
Yang Tepat?
Jadi kita bisa melakukan mendapatkan dokumen dengan Id, dan inilah yang sederhana.
Apa Id kita yang kita inginkan di sini?
AUDIENCE: Latar Belakang.
Allison Buchholtz-AU: Latar Belakang.
Sempurna.
Dan titik koma di akhir.
Itu belum pergi belum.
Anda masih perlu titik koma Anda.
OKE.
Jadi itulah yang pertama kami.
Dan ketika kita klik sesuatu, kita ingin sesuatu terjadi, kan?
Jadi kita mungkin ingin beberapa variabel yang menunggu klik.
Apa yang akan kita lakukan adalah kita akan membuat link kami lebih mirip dengan sebuah tombol.
Jadi kita akan memiliki beberapa tombol yang sama dokumen dot mendapatkan elemen dengan Id.
Dan jika saya sedang berbicara tentang klik link atau klik disini untuk pesta
Link, apa yang mungkin Id saya berada di sini?
Partai.
Yang Benar.
OK tidak terlalu buruk sejauh ini.
Semua orang mendapatkan apa yang kita lakukan?
>> OK, jadi sekarang kita memiliki kita tombol, dan kami ingin
hal yang berubah ketika kita klik di atasnya.
Jadi jika kita ingat dari PowerPoint kami, hal yang sangat sederhana yang dapat kita lakukan
adalah tombol hanya dot onclick, kan?
Dan itu akan sama beberapa fungsi.
Ini adalah fungsi anonim.
Dan ini hanya as-- sebenarnya aku akan membuat ini lebih besar sedikit.
>> Jadi apa yang saya hanya melakukan di sini adalah saya katakan, OK,
ketika kita klik tombol kita, yang link ini yang baru saja kita disebut,
kita akan mengeksekusi fungsi anonim ini.
Kita tidak perlu masukan apapun.
Kami tidak peduli apa yang dikatakan pengguna.
Ketika mereka klik di atasnya, kami akan melakukan apapun yang kita inginkan,
yang mengubah warna latar belakang.
OKE?
Jadi itu sebabnya kami tidak memiliki masukan apapun, kita hanya memiliki fungsi anonim ini.
Dan sekarang kita benar-benar akan untuk menulis fungsi ini.
>> Jadi ada banyak cara Anda bisa menghasilkan warna acak.
Cara yang saya lakukan itu adalah untuk menghasilkan tiga angka acak
dan mengkonversikannya ke RGB tiga.
Jadi ini hanya menunjukkan beberapa keren hal-hal yang jika Anda seperti, "oh,
Saya perlu untuk menghasilkan acak nomor. "Jika Anda Googled itu,
ini adalah apa yang akan Anda temukan.
>> Jadi kami memiliki tiga berbeda hal, var, tidak merah lagi, hijau.
Yang Tepat?
Jadi mereka adalah tiga hal-hal yang membuat warna.
Biru, merah, dan hijau.
Keren.
Dan apa yang bisa kita lakukan adalah bahwa kita tahu yang perlu antara 255,
dan jika Anda melihat beberapa nomor acak generator,
Anda bisa mendapatkan sesuatu seperti matematika dot acak, yang jika Anda melihat ini
kembali ke beberapa nomor antara nol dan satu.
OKE?
Dan apa yang nomor lakukan kami Triple RGB pergi antara?
Nol dan apa?
Apa yang bisa mereka pergi ke?
255.
Jadi, jika matematika dot acak berjalan antara nol dan satu,
bagaimana mungkin kita ingin mengubahnya?
AUDIENCE: Waktu?
Allison Buchholtz-AU: Ya, persis.
Jadi waktu 255.
>> AUDIENCE: [tidak terdengar] Ini seperti [tidak terdengar].
Allison Buchholtz-AU: Matematika dot acak.
AUDIENCE: Cool.
Allison Buchholtz-AU: Ya.
JavaScript hanya mengurus Anda.
OKE.
Jadi kita bisa melakukannya untuk semua ini.
Yang Tepat?
Matematika dot acak kali 255.
Salin itu.
Keren.
Jadi masalahnya, ini mungkin tidak kembali integer.
Yang Tepat?
Mungkin kita mendapatkan beberapa nomor antara nol dan satu,
dan hal itu menyebabkan hal itu terjadi sedikit off, dan RGBs kita tidak bisa mengapung.
Mereka harus int.
Jadi jika Anda mencoba ini, itu akan mungkin memiliki beberapa perilaku tak menentu.
Ini akan menjadi sedikit funky.
Jadi apa yang kita lakukan adalah kita ingin membuat yakin bahwa ini bulat,
dan Anda bisa melengkapi dengan cara baik.
Saya bulat dengan lantai.
Jadi saya selalu memastikan yang dibulatkan ke bawah.
Tapi pergi dari betapa sederhananya adalah untuk hanya mendapatkan nomor acak,
bagaimana Anda berpikir kita mungkin lantai nomor ini?
Ini sangat mirip.
Setiap ide?
Jadi jika random hanya matematika dot acak, jadi jangan berpikir Anda kami akan melakukan lantai?
Matematika dot lantai.
Dan Anda juga dapat melakukan matematika dot langit-langit.
Putaran adalah jenis ambigu karena Anda tidak
tahu apakah untuk mengumpulkan atau putaran bawah.
Jadi biasanya kami selalu melakukan matematika dot lantai, matematika dot langit-langit.
Tapi honestly--
>> AUDIENCE: Apakah lantai putaran bawah?
>> Allison Buchholtz-AU: Lantai putaran bawah.
Dan itu hanya pilihan di bagian saya.
>> Jadi sekarang kita memiliki nomor kami tiga yang telah dihasilkan secara acak,
dan apa yang akan kita lakukan sekarang adalah kita hanya akan mengubah latar belakang.
OKE?
Jadi kita sudah memiliki kita latar belakang jenis disimpan
dalam elemen ini disebut background.
Jadi apa yang akan Anda perhatikan adalah, jika Anda bermain-main dengan hal ini,
kita ingin mengubah gaya.
Dan ini adalah jenis sesuatu yang Anda akan Google dan mencari tahu,
seperti bagaimana untuk mengubah warna.
>> Tapi cara Anda mengakses warna ini background dot dot gaya latar belakang.
Jadi ini adalah pepatah yang diberikan objek ini, latar belakang,
yang merujuk pada Unsur Id di sana,
kita akan melihat gaya dalam gaya,
kita akan melihat latar belakang.
OKE?
Dan jika Anda pergi dan melihat ini, mungkin membuat sedikit lebih masuk akal,
tapi ini pada dasarnya hanya mengatakan, "Memberikan atribut yang sangat spesifik ini
dari apa yang saya ditetapkan sebelumnya. "
Jadi apa yang kita mengubahnya untuk adalah beberapa RGB, karena itu masuk akal.
Kami menggunakan RGB tiga kali lipat, kan?
Dan kami have-- saya ingin memastikan saya mendapatkan jumlah yang tepat dari kutipan di sini.
Jadi apa yang kita lakukan adalah kita harus RGB, dan kita akan
to-- ini adalah seperti Rangkaian, yang berwarna merah.
Dan kemudian kita ingin beberapa koma.
Dan kemudian kita ingin ditambah hijau, maka beberapa koma, dan beberapa biru.
>> Jadi Plus ini hanya berarti seperti Rangkaian.
Jadi ini hanya menciptakan ini string yang akan dalam RGB.
OKE?
>> AUDIENCE: [tidak terdengar] ditambah kemudian yang hijau ditambah kemudian merah.
>> Allison Buchholtz-AU: Ya, karena saya kacau yang.
Halus yang satu.
Oh, tunggu.
Tak Ada.
Karena aku harus memastikan bahwa aku baik-baik ini.
Jadi saya akan menjelaskan secara momento uno.
Hijau, biru, sempurna.
Sekarang saya sudah selesai.
Saya yakin.
>> OKE.
Jadi apa ini, adalah latar belakang yang akan diatur ke beberapa string.
Yang Tepat?
Yang adalah apa yang kita miliki di sini.
Ini akan menjadi beberapa RGB 255 koma 255 koma nol, atau apa pun nomor yang Anda
telah ada.
Jadi kita lakukan di sini, kami memiliki beberapa string.
Dan apa yang ingin kita lakukan, adalah kita jenis dinamis menciptakan
bahwa ketika kita benar-benar menjalankan program ini.
Jadi ini adalah beberapa string.
Ditambah merangkai dengan nilai merah yang memiliki,
yang merangkai itu dengan koma, yang merangkai itu
dengan apa yang hijau, dan seterusnya, dan sebagainya.
OKE?
Sampai akhir, yang merupakan menutup kurung RGB ini di sini.
OKE?
>> Jadi apa ini akan menghasilkan beberapa perintah yang benar-benar
yaitu RGB tiga angka background yang sekarang sudah siap untuk.
OKE?
Jadi mari kita lihat apakah ini bekerja.
Saya harap tidak, karena jika tidak, aku akan menjadi nyata sedih.
Oh tidak.
OK, tunggu.
Pasti background dot dot gaya latar belakang.
Aku pasti hilang sesuatu yang kecil saja.
Jangan kalian benci itu?
Ketika itu hanya sedikit kesalahan kecil?
Background Mahakuasa.
RGB.
>> AUDIENCE: [tidak terdengar]
Allison Buchholtz-AU: No.
Saya mencoba ini sebelumnya kelas.
Saya memiliki semua yang saya lakukan sebelumnya kelas dalam kasus saya seperti,
"Tunggu, apa yang saya lakukan salah?"
Karena aku seperti, "Aku mungkin akan kekacauan ini di beberapa titik. "
Ditambah hijau.
Semuanya tampak seperti itu digabungkan dengan benar.
OKE.
>> AUDIENCE: [tidak terdengar]
>> Allison Buchholtz-AU: Oh, di sana Anda pergi.
Itulah apa yang saya butuhkan.
Lihat itu.
Tiffany untuk menyelamatkan.
Sempurna.
OKE.
Sekarang mari kita lihat apakah ia bekerja.
Astaga.
OKE.
Tahan.
>> AUDIENCE: Ruang setelah ditambah kedua.
>> Allison Buchholtz-AU: Yang mana?
Oh, tunggu, tunggu.
Ruang memakai?
>> AUDIENCE: Kedua plus Rangkaian hijau.
Allison Buchholtz-AU: Oh.
AUDIENCE: Tidak ada ruang setelah ditambah, ya.
Allison Buchholtz-AU: Anda tidak perlu itu, tapi--
AUDIENCE: Oh, Anda tidak?
Allison Buchholtz-AU: Ini terlihat cantik.
AUDIENCE: OK.
OKE.
>> Allison Buchholtz AU: Mari kita lihat apakah ini bekerja.
OKE.
Aku jelas gagal di demo ini, yang mengingatkan saya
dari kuliah minggu, tapi aku tahu ini akan bekerja.
Saya tahu ini akan bekerja.
Begitu dekat.
Kecuali saya sengaja dihapus naskah saya yang satu ini.
Tidak, itu adalah titik partai js.
OK tunggu.
Aku akan menyalin ini, dan aku juga hanya akan menghapus segala sesuatu,
karena saya punya kerja ini sebelumnya.
>> Saya berjanji bekerja.
Jika tidak, saya akan menunjukkan apa yang Tommy adalah.
Dan ada.
>> AUDIENCE: Kau referensi partai dot CSS, dan itu adalah pesta dot js.
>> Allison Buchholtz-AU: Ah, baik di sini adalah pesta dot js.
OK, apa yang saya lakukan berbeda?
OK, kita akan melihat apakah ini bekerja sekarang.
Bam.
Jadi, saya tidak tahu apa yang saya lakukan secara berbeda, tapi ini adalah apa yang harus terjadi.
Agak dingin.
Aku mengklik ini, seperti, selamanya.
Tapi kita bisa mencoba dan melihat apa yang saya lakukan berbeda yang satu ini memiliki.
Aku tidak tahu tentang kalian, tapi ini terlihat pada dasarnya apa yang saya baru saja menulis.
Ada mungkin hilang koma di suatu tempat adalah hal saya.
Sebenarnya setelah itu, saya pikir saya hilang titik koma di sini sebenarnya.
Tapi aku tidak bisa melihatnya karena itu dari layar.
>> Tetapi jika kita perhatikan, ini cukup banyak persis apa yang saya baru saja menulis.
Saya pikir mungkin bagian tersulit tentang ini hanya jenis hal ini benar
di sini, pemahaman apa yang dilakukannya di sana.
Ini macam hal yang Anda pelajari benar-benar hanya dengan Googling dan jujur
hanya mencoba.
Jika Anda berpikir ada beberapa atribut, mungkin ada.
Jadi mencobanya.
Lihat apa yang terjadi.
Seperti yang saya katakan, ada banyak eksperimen dengan JavaScript,
dan PHP, dan semua yang hal, dan CSS terutama.
Itulah satu-satunya yang benar cara untuk memahaminya.
>> OK, jadi setelah itu kegagalan dengan pihak dot js, kita memiliki dua pilihan lain.
Kami memiliki jam atau Twitter.
Mereka berdua menarik.
Mungkin tidak cukup sebagai menyenangkan seperti partai, yang memiliki nyala sedikit dingin
hal di akhir.
Apakah kalian memiliki preferensi apapun?
AUDIENCE: Jam?
Allison Buchholtz-AU: Jam?
OKE.
Keren.
>> Jadi sekali lagi, kita kita kosong berkas JavaScript.
Dan seperti yang kita lihat di sini, kami memiliki beberapa HTML yang sangat sederhana.
Kami memiliki style sheet kita, bahwa hanya format apa yang seharusnya terlihat seperti.
Kami memiliki div kami dengan Id jam, yang
hanya mengatakan, "ini harus menjadi sebuah jam."
Dan kami memiliki link kami ke file JavaScript kami
yang benar-benar akan menghasilkan jam bagi kita.
Karena hal yang keren, adalah bahwa Anda dapat set JavaScript untuk secara otomatis me-refresh
itu sendiri.
OKE?
Jadi, bukannya menunggu pengguna untuk memukul Refresh pada halaman
sehingga Anda bisa mendapatkan waktu diperbarui, JavaScript
dapat memperbaruinya namun suka.
>> Jadi, seperti yang terakhir kami, kami ingin untuk mengakses latar belakang kita, kan?
Jadi apa yang Anda pikir mungkin Hal pertama yang ingin kita lakukan di sini?
Jika kita seperti pergi semacam ini paradigma di sini?
Kita mungkin ingin mengakses jam kami, kan?
Jadi, kami memiliki beberapa var jam, yang equals--
apa yang kita pikir itu akan menjadi?
Dokumen dot mendapatkan elemen by-- saya juga cinta Sublime-- Id dan Id kami adalah jam.
Titik Koma.
Harus memastikan untuk mendapatkan mereka titik koma saat ini,
karena saya merasa seperti itu adalah masalah terakhir kali.
OK jadi, karena saya hanya mengatakan dengan mencoba memiliki JavaScript menyegarkan diri,
ada fungsi yang besar ini, saya tahu itu datang berguna tahun lalu,
Saya tidak yakin itu sangat berguna untuk ini pset, tapi itu disebut set interval.
Dan ini sebenarnya benar-benar keren jika kalian melakukan apa-apa
dengan waktu atau mendapatkan informasi terbaru.
Pada website untuk final proyek, ini mungkin
fungsi yang ingin Anda mendapatkan super akrab dengan.
Jadi apa yang menetapkan jeda yang dilakukan adalah bahwa kita akan memberikan fungsi,
dan seberapa sering seharusnya memanggil fungsi ini.
OKE?
>> Jadi dalam hal ini, kita hanya akan membuat beberapa fungsi anonim lagi,
OK, yang akan mendapatkan kami tanggal, dan waktu kita,
dan kemudian memperbarui hal-hal dan menampilkannya.
Jadi kita akan khawatir tentang itu.
Kita akan menjadi seperti menghasilkan jam di sini.
Tapi apa yang kita butuhkan adalah bagaimana sering untuk menyegarkan itu.
Jadi dalam hal ini, itu hanya milidetik.
Jadi kita hanya akan melakukan 100 milidetik.
Tentu saja, benar-benar sewenang-wenang.
Jika Anda ingin untuk memperbarui jauh lebih lambat, Anda bisa.
Kami bisa main-main dengan interval set,
seberapa besar Interval kami setelah kami mendapatkan jam kerja, yang mudah-mudahan aku akan
mendapatkan.
Jadi ini hanya mengatakan, "OK, panggilan Fungsi ini setiap 100 milidetik. "
OKE?
Itu semua hal ini.
>> Jadi apa yang kita inginkan fungsi kita untuk lakukan adalah kita ingin memiliki beberapa tanggal
dan beberapa waktu yang kita akan memiliki.
Jadi Kita bisa mulai dengan kami tanggal sama sesuatu,
dan waktu kita sama sesuatu bahwa kita belum tahu.
Atau sebenarnya, kita hanya perlu date, karena tanggal akan meliputi segala sesuatu.
Sekali lagi jika Anda hanya Google apa-apa tentang apa yang ingin Anda lakukan, jika Anda menulis, "OK,
Saya ingin mendapatkan waktu melalui JavaScript, "itu
akan memberikan besar ini fungsi yang disebut tanggal get.
Secara harfiah, kebanyakan hal yang ingin Anda lakukan,
JavaScript akan memiliki itu dilakukan untuk Anda sudah.
Jadi itu benar-benar seperti baru mendapatkan tanggal, yang creating--
atau tanggal baru, rather-- yang menghasilkan
beberapa objek yang mewakili tanggal.
>> Dan apa yang akan kita lakukan di sini adalah ini is-- Aku akan menulis ini,
dan kemudian menjelaskan apa yang dilakukannya.
Jadi saya akan memastikan bahwa saya mendapatkan hak ini.
>> OK, jadi apa fungsi ini tidak, adalah kami hanya
menciptakan HTML yang sebenarnya akan pergi dalam Id div kami jam.
Jadi apa ini akan melakukan hanya menghasilkan beberapa string, OK?
Yang kemudian akan menjadi dipindahkan ke dalam HTML kita.
Pada dasarnya apa yang akan lakukan adalah apapun we-- apa yang akan saya tunjukkan
adalah bahwa apa pun yang kita katakan HTML adalah, kita akan mengganti teks ini di sini
dengan apa pun HTML.
Jadi ini akan memungkinkan kita untuk mengubah jam kami dot
HTML dari sekedar teks ini harus jam, untuk benar-benar menunjukkan
angka dan hal-hal yang kita peduli sekitar, dan benar-benar menjadi pukul.
>> Jadi apa yang akan kita lakukan adalah kita akan mulai menghasilkan HTML ini.
Jadi dengan cara yang sama yang kita gunakan untuk melakukan ditambah sama untuk bilangan bulat,
Anda sekarang dapat melakukannya untuk string, kecuali itu akan menyatukan mereka.
Yang Tepat?
Seperti yang kita lihat dengan dot partai js, ini hanya merangkai semua hal ini bersama-sama.
Jadi Anda dapat menggabungkan bit yang berbeda HTML dari variabel, atau bit string
bahwa Anda menuliskan diri sendiri, dan ini hanya
benar-benar memungkinkan Anda untuk secara dinamis menghasilkan HTML, yang cukup keren.
Jadi jika Anda memiliki sesuatu sangat user tertentu,
ini dapat memungkinkan Anda untuk melakukan itu.
>> Jadi kita memiliki HTML, untuk aku akan mencoba dan memastikan bahwa saya mendapatkan hak ini.
Jadi kita akan melakukan beberapa kepala h1.
Jadi apa yang penting untuk menyadari di sini adalah bahwa ini sebenarnya hanya HTML.
Yang Tepat?
Kami menulis aktual Kode HTML di sini, itu
bukan hanya string dalam normal cara yang kita akan berpikir tentang hal itu.
Jadi kita memiliki beberapa HTML.
Hal ini dianggap string di sini meskipun.
Dan kami lakukan tanggal dot-- kami ingin mendapatkan jam kami.
Sekali lagi, jika Anda adalah untuk melihat up apa-apa tentang tanggal,
itu akan memberitahu Anda ini semua atribut tanggal tersebut memiliki.
Dan inilah yang dapat Anda gunakan di atasnya.
Jadi mungkin memiliki hal-hal seperti mendapatkan jam, dan mendapatkan menit,
dan mendapatkan detik, dan mendapatkan milidetik, dan siapa tahu apa lagi yang mereka miliki.
Tetapi jika Anda melihat ke dalam dokumentasi, itu semua akan berada di sana.
>> Jadi kita harus mendapatkan jam, dan kemudian kita ingin
untuk menggabungkan bahwa with-- saya akan memindahkan ini di sini.
Jadi kalau kita menghasilkan sekarang, kami sebenarnya menghasilkan waktu, kan?
Kami memiliki jam, dan kemudian apa antara jam dan menit?
Anda memiliki titik koma, kan?
Jadi kita ingin melakukan koma sini.
Dan kemudian kita ingin mendapatkan kami menit, sehingga dengan cara yang sama
bahwa kita memiliki tanggal dot mendapatkan jam, bagaimana kita bisa mendapatkan menit kami?
Ini benar-benar tanggal dot mendapatkan menit, yang aku agak suka.
Ini seperti, "oh, bagaimana cara mendapatkan menit saya? "
Aku hanya mendapatkan menit saya.
>> OKE.
Dan kemudian kita memiliki usus lain di sini.
Dan kemudian jika kita ingin mendapatkan kami detik, bagaimana kita bisa mendapatkan kedua?
Tanggal dot mendapatkan detik.
Saya pikir itu cukup keren.
Dan apa yang penting untuk menyadari, adalah bahwa kita juga
harus menutup tag HTML kita di sini, karena masih harus HTML yang valid, sehingga h1.
Keren.
>> Jadi setelah itu, kita dapat melakukan jam dot HTML batin sama dengan HTML.
OKE?
Jadi ingat bagaimana saya mengatakan HTML batin pada dasarnya
mengambil apa pun yang antara dua tag yang kita bicarakan
dan menyisipkan atau memanipulasi apa yang ada di sana?
Jadi apa hal ini, jika kita kembali ke jam kami,
adalah bahwa jam mengacu segala sesuatu dalam div ini.
Ini adalah bagian dalam HTML jam Id ini div.
Dan itu akan mengubahnya ke HTML yang kita hanya dihasilkan,
yang, yang, mudah-mudahan, mudah-mudahan, mudah-mudahan,
akan menampilkan waktu sekarang.
Kita lihat saja nanti.
Tentu saja.
Begitu banyak masalah teknis.
Hanya-- Allison Saya off my pertandingan hari orang.
OK, yang bekerja.
Jam dot HTML batin.
Itu HTML Benarkah?
Juga ini adalah apa yang terjadi.
Bila Anda tidak dapat melihat sesuatu, Anda hanya melihat kode sumber Anda.
OKE.
Apakah Anda ingin tahu pekerjaan dingin sekitar bahwa kita akan lakukan di sini?
>> AUDIENCE: Dapatkah Anda lakukan huruf kapital?
Huruf tersebut?
Karena Anda telah mendapatkan jam, dan kemudian mendapatkan menit.
>> Allison Buchholtz-AU: Ini adalah mendapatkan jam dan get-- oh.
Anda are-- bintang emas.
Ini semua ujian, guys.
Saya berjanji itu bekerja di depan kelas.
>> OK, tapi sesuatu yang keren untuk tahu adalah Anda dapat also-- jika kadang-kadang
file eksternal Anda mendapatkan sedikit gila,
Anda juga dapat hanya menempatkan mereka langsung di sini, yang cenderung untuk memperbaiki hal-hal.
Kecuali ini adalah seperti benar-benar jelek.
Tentu saja memformat segalanya.
Pastikan itu semua cukup.
OKE.
>> Aku ingin melakukan semua demo keren, dan mereka hanya tidak bekerja.
OKE.
Script var jam.
Anyways, apa yang penting adalah bahwa ini adalah cara umum
Anda akan memformat JavaScript.
Seperti yang Anda lihat, itu bisa sangat rewel kadang-kadang,
bahkan ketika itu benar-benar bekerja dua detik yang lalu.
Atau tidak dua detik yang lalu, tapi sangat, sangat baru-baru ini.
>> Jadi untuk menunjukkan apa yang seharusnya terlihat seperti, dan menunjukkan bahwa aku tidak gila,
dan bahwa segala sesuatu adalah persis sama, ini adalah apa yang seharusnya terlihat seperti.
Anda hanya akan melakukan bagian atas ini di sini, dan jika Anda melihat sumber halaman,
jika Anda perhatikan, dia melakukan beberapa hal gila, aku disederhanakan itu.
Juga, kredit kepada Tommy McWilliam, yang benar-benar
membantu saya membuat contoh-contoh ini, itulah sebabnya saya tahu mereka bekerja.
Karena Tommy adalah master JavaScript.
Tetapi jika kita perhatikan, kami memiliki beberapa set.
Kami memiliki fungsi jam kami di sini.
Ini semua JavaScript yang kita hanya menulis, atau sebagian.
Kami hanya menulis satu ini di sini.
Dan dia memiliki tambahan fungsi yang hanya bantalan itu
dengan menempatkan nol sebelum surat atau sebelum nomor jika
hanya salah satu dari mereka.
Jadi, jika Anda perhatikan, ini cukup banyak apa yang baru saja kita tulis.
Anda memiliki beberapa jam variabel yang memiliki elemen kami, dapatkan elemen dengan ID,
yang jam.
Kami memiliki selang set kami fungsi, itu
fungsi anonim yang melaksanakan semua ini.
Kami telah beberapa string mulai HTML yang kita kemudian secara dinamis
menghasilkan dengan memiliki beberapa Header h1, concatenating
dengan mendapatkan jam, ditambah usus kita, ditambah mendapatkan
menit, ditambah lagi usus, ditambah detik kami,
dan akhirnya berakhir HTML untuk itu.
Dan kemudian kami memperbarui jam kami dot HTML batin untuk HTML,
dan kami update setiap 100 milidetik.
OKE?
>> Lihat Aku berjanji aku tidak gila.
Saya tidak tahu.
Saya tidak tahu mengapa hal itu tidak menyukai saya.
Saya merasa seperti terlihat sama, tapi rupanya ia membenci Aku.
>> Jadi mari kita lihat apakah putaran tiga berjalan lebih baik.
Kami akan melihat.
Saya tidak yakin bagaimana ini akan pergi.
Apakah setiap orang setidaknya mendapatkan kontra, seperti hanya tema umum
JavaScript, meskipun?
Saya berharap bahwa setidaknya berguna, lebih daripada menunjukkan bahwa itu sedikit rewel.
Tapi set masalah Anda akan sangat menyenangkan.
Ini akan menjadi besar.
Ini tidak akan cukup sebagai membosankan karena hal ini, saya tidak berpikir.
Anda benar-benar akan mendapatkan melihat hal-hal yang benar-benar keren.
>> Jadi last but not least, kami akan mencoba yang Twitter.
Aku benar-benar takut sekarang, guys.
Saya tidak tahu bagaimana ini akan pergi.
Tapi hanya untuk memberikan sedikit lebih banyak rasa, dan ini sebenarnya
memanipulasi string dan masukan, apa yang akan kita lakukan
adalah, jika kita perhatikan di sini dengan HTML-- yang satu ini memiliki sedikit more--
kami memiliki beberapa area teks, yang sesuai dengan area teks ini di sini.
OKE?
Dan yang memiliki Id teks.
Kami dibenahi itu sedikit dengan beberapa lebar dan tinggi
bahwa kita telah ditentukan sebelumnya, dan kami telah h1,
yang hanya merupakan salah satu sundulan kami yang mewakili karakter kita meninggalkan.
Kami memberikan beberapa Id karakter yang tersisa,
dan kemudian kita memiliki beberapa script di sini, yang saya benar-benar
berharap ketiga kalinya ini pesona di sini, guys.
>> Jadi apa yang ingin kita lakukan, dalam vena umum yang sama
bahwa kami telah melakukan dengan jam dot js dan dot partai js seperti yang kita perhatikan,
adalah kita sudah mulai dengan benar-benar meraih hal-hal yang kita peduli, kan?
Jadi dalam hal ini, ada dua hal-hal yang kita peduli, OK?
Satu hal yang kita benar-benar jenis melihat ke dalam dan menggambar data dari,
dan satu hal yang kita benar-benar berubah.
Jadi ada HTML kita.
Jika ini adalah halaman web kami di sini, apa yang data yang kita lihat?
Ini akan menjadi apa pun teks dalam kotak kami, kan?
Jadi apa pun yang saya ketik di sini.
Itulah yang saya ingin tahu, atau itulah yang saya ingin melihat.
Dan apa yang akan menjadi perubahan pada halaman web kami?
Karakter yang tersisa.
Jadi dengan cara yang sama, kita ingin mulai dengan inisialisasi variabel
yang benar-benar memegang unsur-unsur.
OKE?
Jadi jika kita memiliki beberapa var yaitu text area kami,
dan kami memiliki beberapa var yang tersisa.
Yang Tepat?
Jadi ini akan terus kedua hal.
Jadi hal yang sama, Dokumen dot-- OK, aku
akan memastikan bahwa ini adalah akan bekerja saat ini.
Saya sangat bersikeras.
OK, jadi jika kita ingin kita text area, menurut
untuk HTML kita, apa identifier kami?
Apa Id kami?
Ini hanya akan menjadi teks karena ini menciptakan area teks kita, OK,
dan Id kami adalah teks, sehingga bagaimana kita bisa ambil apa yang ada di sana.
OK, titik koma.
Aku akan menjadi super tepat tentang hal ini,
karena saya ingin ini bekerja saat ini.
OK, melakukan hal yang sama, mendapatkan elemen dengan Id.
Aku benar-benar bertanya-tanya apa yang telah menyebabkan dua lainnya untuk mengacaukan.
OK, maka dalam satu ini, apa yang kita ingin mengakses?
Apa Id kita di sini?
Kami memiliki Id lain HTML kita, apa itu?
AUDIENCE: Karakter tersisa.
Allison Buchholtz-AU: Karakter tersisa.
>> OKE.
Keren.
Jadi aku hanya akan menulis ini benar-benar cepat.
Aku hanya akan menulis ini dalam detik.
Jadi area teks.
Yang menarik adalah B function-- ada banyak fungsi yang tidak hanya
sesuai dengan Anda mouse, tapi keyboard Anda.
OKE?
Jadi, Anda bisa mengatakan ketika tombol apapun ditekan, Anda dapat melakukan hal-hal seperti itu.
Jadi salah satu yang kita gunakan disebut pada tombol up, yang
mengatakan, "jika Anda telah menekan tombol apa saja pada keyboard, bila pengguna telah mengangkat
jari mereka off itu, dan kuncinya telah menjadi unpressed,
maka kita akan melakukan sesuatu. "
OKE?
Jadi ini masuk akal, kan?
Karena setiap karakter kita ketik, kita akan
harus mengangkat jari-jari kita off itu, jadi ketika tombol naik,
kita bisa tahu untuk pengurangan karakter kita yang tersisa.
>> Jadi kita memiliki beberapa pada tombol up, dan dengan cara yang sama,
kita akan mengatakan, "OK, ketika kita melakukan itu, kita
akan membuat beberapa fungsi yang akan mengambil e, "dalam hal ini,
dan apa yang ingin kita lakukan adalah menghitung jumlah yang tersisa.
OK, jadi mari kita mulai dengan menciptakan sebuah variabel.
Jadi kita memiliki beberapa variabel r, yang akan mewakili
berapa banyak karakter yang tersisa.
OKE?
Kita tahu bahwa kita mulai dengan 140, dan jika kita ingin tahu,
katakanlah, panjang ini string yang sudah masukan,
apakah kalian punya ide bagaimana kita bisa melakukan itu?
Hanya didasarkan dari jelas hal, seperti jika kita ingin jam,
kami menggunakan mendapatkan jam.
Kita tahu bahwa kita adalah obyek text area, tapi bisa kalian
memikirkan apa yang mungkin datang setelah?
Ada gagasan?
>> Jadi semacam ini seseorang kurang intuitif, tetapi itu adalah nilai dot panjang.
Jadi hanya memberi saya beberapa nilai atribut yang
sebenarnya panjang string ini.
Jadi itu akan berkata, "OK, saya sedang mencari di seluruh string ini dalam area teks,
dan aku akan memberitahu berapa lama itu. "
Karena jika kita ingat string benar-benar hanya array,
jadi kami hanya bisa mengambil panjang mereka.
Jadi kita memiliki itu.
Keren.
>> Lalu apa yang ingin kita lakukan adalah kita tidak pernah ingin untuk memungkinkan pengguna
input lebih dari 140 karakter, kan?
Karena jika kita mengatakan seperti, "oh, Anda hanya memiliki sebanyak ini yang tersisa, "
dan kemudian membiarkan mereka melakukan itu lagian, kami telah berbohong.
Dan ini merupakan salah satu hal yang JavaScript
dapat benar-benar baik untuk, adalah validasi pengguna
dan memastikan bahwa Anda pengguna cocok dalam aturan apapun
yang Anda berikan kepada mereka.
Jadi jika Anda ingin melakukan hal-hal seperti membuat yakin seseorang masukan alamat email mereka,
atau memastikan bahwa ketika mereka memasukkan dua password, mereka cocok.
JavaScript bisa melakukan itu.
Anda akan melakukan sesuatu seperti, "ketika formulir dikirimkan, "atau seperti,
"Ketika tombol Submit Form adalah diklik, periksa semua hal-hal ini. "
Dan kita bisa melakukan itu JavaScript.
Jadi itulah yang kita akan lakukan di sini.
>> Jadi apa yang mungkin menjadi cara untuk memeriksa apakah mereka sudah lebih dari 140 karakter?
Apa yang akan terjadi Nilai kami r jika mereka mencoba?
Ini akan menjadi negatif, kan?
Atau itu akan menjadi kurang dari atau sama dengan nol.
Jadi kita bisa menggunakan jika itu sama seperti segala sesuatu yang lain.
OKE?
Dan kami memiliki beberapa area teks dot nilai, dan apa yang kita lakukan di sini
adalah kita hanya cutting-- apa itu?
Mohon Maaf.
Yang satu ini, kami hanya ingin kembali palsu.
Aku bingung.
Semua letih dari hal-hal yang tidak bekerja.
OK, kami hanya ingin kembali palsu, dan kemudian kita
ingin menampilkan karakter yang tersisa, kan?
Jadi dengan jam, kami melakukan sesuatu dengan HTML batin, kan?
Di mana kita set sama dengan beberapa variabel, jadi apa yang bisa kita lakukan di sini?
Apa yang kita mengubah HTML batin?
>> AUDIENCE: Sisa?
>> Allison Buchholtz-AU: Kami mengubah tersisa.
Baiklah, dan apa yang kita ingin mengaturnya sama dengan?
Ini akan menjadi r, karena itu harus karakter kita yang tersisa.
OKE?
Jadi aku benar-benar gugup untuk melihat apakah ini bekerja sekarang, tapi kita lihat.
Tinggalkan ini.
Itu benar-benar cepat.
[Tak terdengar] OK.
Sekali lagi, aku hanya akan menunjukkan kepada Anda.
Untuk alasan apapun, saya akhirnya memutuskan untuk tidak bekerja,
tapi apa yang saya akan menunjukkan adalah bahwa ini is-- oh aku harus menempatkan bahwa dalam.
OK, kita melihat jenis yang sama hal di sini, mendapatkan area teks.
>> Juga, jika Anda pria pemberitahuan, jika ada pernah sesuatu yang ingin Anda lakukan,
dan Anda tidak tahu bagaimana melakukan itu, klik View Page Source,
dan mereka akan memberitahu Anda.
Kadang-kadang akan dienkripsi.
Untuk pset Anda, kami mengenkripsi segalanya, sehingga hanya tampak seperti omong kosong.
Tapi kalau ada yang pernah benar-benar situs keren yang Anda sukai,
jika Anda hanya klik View Page Source, itu akan memberitahu Anda bagaimana untuk melakukannya.
Jadi sekali lagi, bekerja lebih cerdas, bukan lebih keras.
Dan seperti yang Anda lihat di sini, semua hal-hal ini adalah sama.
yang satu ini di sini hanya mengambil beberapa substring itu, saya lupa persis apa hal ini.
Tapi itu jelas mengambil beberapa substring dari nilai dari nol sampai sepuluh,
dan mengembalikan palsu apa yang harus berhenti pengguna dari memasukkan lagi,
dan kemudian jelas update HTML dalam sana.
>> Keren.
Mengambil aways begitu besar dari hari ini, eksperimen, melihat kode sumber
karena itu akan banyak membantu Anda, dan semua orang, kadang-kadang JavaScript
akan sulit untuk bekerja dengan dan tidak selalu bekerja dengan cara yang Anda harapkan,
tapi hanya terus mencoba karena saya berjanji akan.
Saya berjanji semua contoh ini bekerja di depan kelas.
Saya tidak mengerti apa yang terjadi.
Aku benar-benar memiliki semua yang sama.
>> Satu hal lagi yang saya hanya ingin menunjukkan orang-orang yang bisa menjadi super berguna
adalah in-- apa yang bekerja sebelumnya?
Kami punya pesta untuk bekerja, bukan?
Saya rasa begitu.
Iya Nih.
Kami melakukan.
Mengagumkan.
OK, jadi satu hal yang kalian harus tahu
adalah log konsol yang saya bicarakan.
Jadi konsol dot log halo.
Jadi ini adalah jenis yang JavaScript setara dengan printf.
Jadi jika Anda pernah ingin memeriksa variabel
atau melihat apa yang terjadi di sana, apa yang dapat Anda lakukan adalah, jika kita memeriksa elemen,
adalah apa yang Anda ingin pergi untuk, dan Anda pergi ke konsol,
Anda akan melihat bahwa itu dicetak halo.
>> Jadi kita bisa memilikinya cetak apa pun yang kita inginkan.
Jika kita ingin mencetak latar belakang dot dot gaya latar belakang,
kita harus bisa melihat RGB tiga yang muncul.
Atau tidak.
Saya lupa persis bagaimana Anda mencetak variabel seperti itu,
tetapi Anda harus dapat mencetak hal-hal seperti itu.
Itu akan sangat berguna untuk pset Anda ketika
Anda mencoba untuk memanipulasi koordinat atau yang lainnya.
Jadi mereka juga mengubah bagian ini di kelas.
Hal ini berbeda dari tahun-tahun terakhir, jadi hanya menyenangkan untuk TF Anda, atau TF
pada jam-jam kantor agak, karena kita jenis belajar bersama dengan kalian.
Tapi log konsol super, super membantu JavaScript tahun lalu.
Jadi menyukainya.
Pelajari cara menggunakannya.
Ini lebih mudah digunakan daripada GDB, sehingga harus setidaknya titik plus.
Tapi terima kalian bantalan dengan saya.
Aku menyesal bahwa saya contoh untuk beberapa alasan
hanya tidak ingin bekerja sama dengan saya, tapi saya
berharap bahwa itu membantu mendapatkan semacam Anda sedikit lebih di zona JavaScript.
Dan saya mengirimkan semua pertanyaan Anda untuk minggu depan jadi saya bisa sangat diperbaiki,
dan Aku akan membawa permen dan bahkan ekstra permen karena ini konyol.
Tapi kalian yang besar, dan memiliki minggu yang mengagumkan.