>> Baiklah.
Jadi, JavaScript.
Hampir semua orang di ruangan ini mungkin memiliki beberapa derajat
kenyamanan dengan itu apakah itu adalah cara kembali ketika di SC50
atau sudah pribadi proyek web atau bahkan
jika Anda melakukan sedikit dengan ini proyek dasar PHP masa lalu,
tetapi untuk sebagian besar bagian, banyak dari Anda,
bahkan jika Anda memiliki beberapa kenyamanan
dengan JavaScript mungkin belum diambil
untuk diberikan bagaimana karya bahasa dan apa yang terjadi
di bawah kap mesin dan apa yang kita akan mencoba
lakukan hari ini adalah mengupas kembali beberapa lapisan teknis
apa JavaScript adalah, bagaimana hal itu berbeda dari bahasa
seperti PHP, bagaimana bisa digunakan tidak hanya sisi klien
tetapi juga sisi server dan kemudian fokus secara khusus
pada kerangka ini, perhatikan tidak ada JS yang pada dasarnya adalah waktu berjalan,
program dengan mana Anda dapat mengeksekusi kode JavaScript,
sisi server dan itu menjadi semacam semakin populer
dari pada perawakannya yang sama ini hari mungkin Ruby dan PHP
dan Python dan Anda akan melihat
bahwa ia memiliki beberapa cukup fitur canggih dengan cara beberapa
bahasa built-in konstruksi.
Tapi pertama-tama, beberapa mudah hal-hal hanya untuk mengingatkan Anda
bagaimana bahasa ini bekerja dan jika Anda memiliki kesulitan untuk melihat setiap
ini, hanya berteriak dan kami akan menyesuaikan.
Jadi, yang seperti di PHP ada ada gagasan dari fungsi utama,
Anda hanya mulai menulis kode
dan Anda dapat untuk itu tidak menafsirkannya atas ke bawah.
Dalam konteks browser
atau di sisi sesuatu Server kita akan melihat beberapa contoh
dalam sedikit.
Kondisi, sintaksis setara dengan PHP serta C,
C + + dan beberapa bahasa lain jadi hanya untuk memberikan rasa
bagaimana kita mungkin struktur itu,
hanya ada kanonik a kondisi.
Ekspresi Boolean, yang sama persis sintaksis karena Anda telah melihat
pada mereka lainnya yang sama bahasa, baik untuk oring
dan untuk mengakhiri hal-hal bersama-sama.
JavaScript memiliki switch, seperti PHP dan lain do
dan Anda tidak terbatas, seperti dalam C untuk primitif terpisahkan
seperti karakter dan ints benar-benar dapat melakukan jenis-jenis nilai.
Loops. Jadi, ini adalah persis sama
dan mungkin selusin bahasa, sementara loop, lakukan sementara loop
dan kemudian trik ini di sini.
Jadi, ini semacam dikenal sebagai pencacahan cepat
dan itu adalah cara yang sangat cerdas dari seperti di PHP melakukan
untuk masing-masing FU bar Anda bisa sama,
dalam sebuah objek JavaScript, di mana objek adalah nama
variabel di sini, katakanlah, var i dalam objek dan pada setiap iterasi
loop ini, i adalah akan menjadi salah satu
kunci dari objek tersebut.
Jadi, jika Anda memiliki objek untuk siswa, dan mahasiswa memiliki ID
dan nama dan rumah, iteratif saya akan mengambil
dari nilai ID dan nama dan rumah dan Anda dapat mengindeks untuk itu
ke objek seolah-olah itu array menggunakan braket persegi
notasi untuk mendapatkan nilai ID kunci atau nama
atau rumah dan sebagainya.
Dan bertentangan dengan umum asumsi, JavaScript objek,
properti tidak tentu dijamin
dalam urutan yang sama, ini juga benar untuk PHP jadi jangan menganggap
bahwa hal-hal akan tetap dalam urutan yang sama
bahwa Anda memasukkan kunci tersebut nilai pasangan menjadi obyek.
Bagaimana dengan array?
Ada beberapa cara untuk menulis sintaksis
tapi ini mungkin yang paling umum sekarang hanya menggunakan persegi
notasi bracket.
Jadi, ini adalah variabel memanggil nomor yang berisi berbagai
dari enam bilangan bulat di sana, inilah string sederhana
dan perhatikan apa yang ada dari contoh-contoh ini,
apa JavaScript tampaknya kurang.
Ya. Jadi, tidak ada gagasan mengetik, tentu saja tidak
dalam konteks ini di sini, tapi ini memang string.
Jadi, JavaScript memiliki jenis dan itu memang sebuah array
yang itu sendiri tipe dan masing-masing elemen
dalam array yang bertipe nomor sebagai JavaScript menyebut mereka.
Jadi, itu adalah longgar diketik bahasa dan kita akan melihat
bahwa JavaScript seperti PHP memiliki operator identitas
dan mekanisme lain untuk benar-benar memeriksa apa jenis
dari beberapa variabel baik untuk pengecekan error
dan untuk aplikasi lainnya.
Dan inilah obyek sampel mengandung hanya ID dan nama.
Dan sekarang, perhatikan bahwa kita menggunakan notasi bracket keriting,
lekukan dan putih ruang semacam berarti
dan ini mendeklarasikan Variabel yang namanya Rob
dan di mana ID adalah 1 dan jenis tanggal di sini nomor kami
dan benang masing-masing.
Dan kemudian ini sesuatu yang sedikit berbeda
jika Anda pernah melakukan apa-apa dengan Ajax hari ini?
Anda mungkin digunakan obyek seperti ini
tapi apa yang perlu dicatat di sini?
Apa sintaksis pernah begitu berbeda, hanya beberapa
hal antara contoh ini yang diakui lebih kecil
dan contoh yang lebih besar ini.
Jadi, pertama di awam istilah, apa ini?
Apa jenis Staf yang akan Anda katakan?
OK, itu sebuah array, itu array apa?
>> Objects.
>> OK, itu array obyek.
Dan sekarang, fokus hanya pada satu - salah satu dari benda-benda ini,
apa yang berbeda antara ini dan ini?
>> Tombol string.
>> Ya. Jadi, kunci adalah string,
dan tombol yang sebenarnya string dalam kedua kasus
dan ini adalah semacam konyol
menurut pendapat saya desain sejarah keputusan setiap kali Anda menggunakan
JSON, JavaScript Object Notation,
yang pada dasarnya adalah format transport
untuk mengirim data biasanya di seluruh jaringan
antara klien dan server, Anda perlu ingat
bahwa hal ini tidak benar-benar valid JSON dan ini adalah salah satu
dari FYIs ini kecuali Anda pernah membenturkan kepala Anda ke dinding
selama beberapa menit untuk tidak baik Alasannya, itu tidak valid JSON
karena tombol yang tidak benar-benar dikutip.
JSON idiot mengharuskan kunci tidak hanya dikutip,
tetapi bahwa mereka akan ganda dikutip, tanda kutip tunggal tidak cukup.
Jadi, hal kecil bodoh dan lebih dari fakta yang menyenangkan
untuk tujuan hari ini tapi ini juga akan berlaku JavaScript
itu hanya tidak - berbicara tidak benar.
Baik.
Jadi, kita akan melihat banyak lebih dari itu.
Baik.
Jadi, itulah JavaScript sintaksis mungkin cukup
familiar, ada di antara kalian yang memiliki pernah menggunakan JavaScript sebelum
itu bukan lompatan besar dari PHP atau hampir semua bahasa prosedural
bahwa Anda mungkin telah digunakan.
Jadi, hari ini kita akan fokus pada aspek menarik
JavaScript khususnya dalam konteks no JS
tetapi tidak eksklusif karena sampai sekarang Anda sudah mungkin,
jika Anda menggunakan Javascript, menggunakannya dalam browser.
Jadi, tidak ada JS adalah sebuah lingkungan maka dalam sedikit akan
untuk memungkinkan kita untuk mengakses Kode JavaScript client -
sisi server tapi pertama, mari kita lihat
sesuatu itu adalah sisi klien sedikit lebih.
Jadi, aku pergi dan ini adalah terkait di situs kursus,
jika Anda ingin bermain bersama, ada dua subdirektori
Zip di hari ini disebut sumber kancing zip di website
dan ini hanya beberapa contoh mengenang
hal yang mungkin telah melihat sebelumnya dan saya semacam dibangun mereka
naik dari yang paling sederhana untuk sedikit lebih rumit untuk menggoda
beberapa fitur dari JavaScript.
Jadi, mari kita pergi ke depan dan mengambil terlihat misalnya pada ini.
Jadi, sayangnya tag blink adalah membunuh beberapa tahun yang lalu
sebagai cara sudah mendapat cantik dan lebih cantik
dan tag blink secara harfiah braket terbuka berkedip braket dekat
dan itu semacam ada lagi bersama kami.
Tapi, kita masih bisa membangkitkan ide ini dari tag dengan hanya jenis
berpikir tentang hal itu logis, bagaimana Anda pergi
tentang membuat sesuatu seperti ini berkedip secara intuitif?
Dengan asumsi Anda tahu sedikit sedikit JavaScript dan CSS atau
pada saat ini, itu OK jika Anda tidak.
>> Mengatur waktu keluar dan menyembunyikan kemudian setelah saya akan tag
keluar dan menunjukkan lagi.
>> Yeah, sempurna.
Ini adalah semacam pemrograman 101,
bagaimana Anda akan mencapai efek visual seperti ini?
Nah, Anda entah bagaimana harus menunjukkan sesuatu
dan kemudian menyembunyikan sesuatu, menunjukkan sesuatu, menyembunyikan sesuatu
dan sebagai Jonathan mengusulkan menggunakan beberapa jenis waktu,
semacam jadwal yang dapat Anda lakukan ini berulang-ulang tanpa perlu
menggunakan loop atau sesuatu seperti itu.
Jadi, biarkan aku pergi ke blink-0.html
dan biarkan aku menyusut font sedikit
sehingga lebih dari ini cocok.
Dan mari kita lihat apa yang terjadi di sini.
Jadi, pertama-tama, melihat bahwa tubuh
halaman ini super sederhana, di dalam tubuh
halaman hanya div.
Aku sudah sewenang-wenang diberikan ID dari ucapan
dan itu bisa apa saja asalkan itu unik
dan kemudian saya hanya memiliki beberapa teks sederhana, hello world.
Jadi, jika saya sekarang gulir ke atas, melihat beberapa styling mengembang.
Jadi, saya katakan, tajam salam, yang seperti yang Anda tahu
dalam CSS hanya berarti unik mengidentifikasi elemen
dengan ide dari ucapan,
ukuran font akan sewenang-wenang menjadi ini, margin dan teks align.
Jadi, tidak menarik detail estetika
kira-kira pusat teks.
Jadi, bagian yang menarik adalah dalam tag script di sini
yang kebetulan aku masukkan ke dalam kepala halaman.
Jadi, Kita akan - Anda dapat melakukan ini dalam berbagai cara
dan kita akan melihat beberapa iterasi dari program yang sama ini
tapi mari kita mulai dari atas.
Jadi, saya sudah mendeklarasikan fungsi yang disebut blink
dan tampaknya menggunakan ini built-in metode DOM disebut
getElementById yang mungkin salah satu metode yang lebih kuat
bahwa Anda keluar dari kotak dengan JavaScript mencari
"Ucapan" tidak harus menjadi tanda kutip ganda seperti itu
di HTML adalah salah baik-baik saja begitu lama
seperti Anda Gaya konsisten hari ini saya berani mengatakan
banyak orang menggunakan Java, tanda kutip tunggal dalam JavaScript,
tanda kutip ganda di HTML tapi itu tidak terlalu penting
asalkan Anda konsisten.
Jadi, di sini jika Anda tidak terbiasa, Anda benar-benar dapat mengakses
dengan JavaScript CSS properti pada elemen.
Jadi, perhatikan bahwa saya sudah mendeklarasikan variabel disebut div
dan disimpan di dalam variabel tersebut,
referensi untuk apa pun elemen DOM.
Jadi, jika Anda berpikir kembali ke CS50 atau setiap kelas di mana Anda pikir
tentang struktur pohon dan DOM, Document Object Model,
ini hanya referensi ke node di pohon,
yang merupakan halaman ini
dan jika div.style.visibility properti sama, sama, sama,
tersembunyi, maka saya hanya ingin beralih itu
sebagai Jonathan diusulkan kalau tidak saya ingin
untuk beralih itu ke tersembunyi.
Sekarang, seperti di samping, mengapa triple sama sana?
Atau apa itu dibandingkan ganda equals?
>> Setara ketat.
>> Maaf.
>> Setara ketat.
Jadi, itu adalah operator identitas
di mana oleh Anda memeriksa tidak hanya nilai variabel
sebagai sama, rasa yang sama tetapi juga jenis itu.
Jadi, meskipun kita belum ditentukan sejauh ini data
jenis untuk setiap variabel dalam ini atau dari slide,
ada jenis terkait dengan string yang tersembunyi
dengan nilai tersebut, tersembunyi dan yang tentu saja tali.
Jadi, dalam hal ini, tidak terlalu penting
karena tidak ada cara yang kita akan untuk menggabungkan string
"tersembunyi" dengan beberapa nilai lain
tapi ini sering baik sebuah Kebiasaan saya akan mengatakan untuk mendapatkan
dalam menggunakan sama, sama,
tanda sama umumnya hal yang baik.
Ini akan membuat kode Anda lebih kuat baik dalam PHP tetapi
dan JavaScript karena Anda akan berjalan
ke sesekali kasus sudut dimana nilai mungkin nol
bahwa Anda memeriksa dan nol dapat digabungkan dengan palsu
atau mungkin ada dan seperti di PHP,
Javascript juga dapat memiliki beberapa nilai-nilai palsu di mana dengan nol
dan palsu dan batal dan terdefinisi semua bisa menyelesaikan secara implisit
ke false.
Tetapi jika Anda benar-benar ingin untuk memeriksa nilai tertentu
seperti nol, nomor, atau palsu Boolean maka Anda memiliki
menggunakan operator identitas ini.
Jadi, itu bisa terjadi untuk mendapatkan menjadi tetap meskipun di sini,
itu semacam berarti karena kita tahu bahwa kita sedang memeriksa
untuk nilai string dan itu tidak akan menjadi apa-apa lagi.
Jadi, inilah keajaiban itu, jika saya gulir ke bawah ke baris ini di sini,
tampaknya, dibangun ke objek window
dan ini adalah fitur dari browser Anda bisa mengakses
ini global super objek yang disebut Window,
dalam yang beberapa fungsi,
jika sepotong yang yang mengatur interval
dan dibutuhkan rupanya apa jenis argumen?
Ya.
>> Fungsi panggilan dan waktu.
>> Baik. Jadi, fungsi panggilan dan waktu
dan sebagainya khususnya referensi ke fungsi,
pointer ke fungsi sedikit banyak
dan itulah fungsi yang akan
untuk dijalankan setiap jumlah milidetik dan dalam hal ini,
itu setiap 500 milidetik.
Jadi, ini adalah cara merangsang efektif dan infinite loop
tanpa menggunakan iterasi tetapi bukannya mengatakan JavaScript
ke mesin dalam dari browser
untuk melakukan hal ini setiap 500 milidetik atau dekat
500 milidetik karena dapat,
ternyata di bawah tenda,
ada apa yang disebut sebuah acara lingkaran dan kami akan kembali ke ini
dalam konteks simpul JS itu hanya terus-menerus semacam
duduk di sana, berputar, menunggu pekerjaan yang harus dilakukan
dan secepat itu menyadari,
500 milidetik telah berlalu blink akan dipanggil lagi
dan lagi dan lagi adalah bersama dari pekerjaan lain
yang perlu untuk dilakukan.
Jadi, apa yang bisa kita meningkatkan di sini?
Nah, biarkan aku buka up blink-1.html
dan menunjukkan blink-1.html
sebagai estetis sempurna identik.
Jadi, apa yang bisa kita meningkatkan sini?
Nah, melihat bahwa itu agak tidak berguna
untuk menentukan fungsi yang disebut Blink karena berapa banyak
di berapa tempat yang saya memanggil fungsi berkedip?
>> Sekali saja.
>> Jadi, satu.
Jadi, itu tidak buruk, di Bahkan itu mungkin cukup
lurus ke depan.
Saya mendefinisikan fungsi berkedip, aku memanggil fungsi berkedip dengan cara
parameter ini, tetapi secara teknis,
tidak ada alasan untuk dan paradigma umum
dalam JavaScript adalah untuk benar-benar memanfaatkan fungsi lambda
karena Anda mungkin ingat dari 51 atau fungsi anonim
di mana jika Anda tidak perlu nama untuk fungsi,
jika Anda hanya menyebutnya tentu di satu tempat,
mengapa repot-repot mengacaukan kode Anda, mengacaukan pikiran programmer
dan nama Anda ruang benar-benar dengan simbol
bahwa Anda tidak benar-benar perlu peduli.
Jadi, dalam versi ini di sini,
melihat bahwa aku menelepon window.SetInterval langsung
di bagian paling atas dari saya tag script maka aku lewat
dalam fungsi tanpa nama yang tidak mengambil argumen
dan itu sempurna baik-baik saja dan kemudian tubuh
fungsi yang muncul adalah identik dengan apa itu sebelum
dan satu-satunya sintaksis perbedaan saat ini adalah
di sini di sebelah 500.
Aku menutup tubuh fungsi
dan kemudian saya katakan mengeksekusi kode sebelumnya,
setiap 500 milidetik.
Jadi perubahan, sangat marjinal
namun langkah menuju apa yang mungkin lebih elegan
pelaksanaan ini.
Jadi, mari kita satu ini langkah lebih lanjut jika saya sekarang pergi
menjadi berkedip dua, Anda akan melihat perpustakaan umum,
efek yang akan
harus benar-benar ngawur estetis tetapi jika kita pergi
menjadi versi dua di sini, pemberitahuan yang di bagian atas kepala saya,
Saya telah menyertakan versi terbaru dari JQuery.
Dan kemudian, di bawah sini, Aku hanya dibersihkan
up kode sedikit, itu tidak akan menjadi dunia yang menyenangkan
untuk terus menggunakan fungsi DOM asli
dan semacam baku JavaScript.
Bahkan, JQuery karena Anda mungkin tahu telah menjadi begitu populer
bahwa kebanyakan orang hanya Konflik jQuery dengan JavaScript
tapi benar-benar hanya makan malam a perpustakaan berguna ditulis
oleh seorang bernama John Resig dan karena orang lain
yang baru saja membuat banyak hal yang membosankan
di JavaScript lebih mudah dan lebih ringkas.
Jadi, dalam hal ini di sini apa yang terjadi?
Jadi, saya memiliki penampilan ini tanda dolar, lebih pada
hanya dalam beberapa saat, kemudian ini adalah selector CSS.
Jadi, itu sangat mirip dalam semangat untuk apa yang saya lakukan sebelumnya,
tapi kali ini, aku harfiah menggunakan tag hash
untuk menunjukkan yang unik identifier disebut ucapan
dan kemudian ternyata . Css adalah metode dibangun
ke objek apapun adalah bahwa saya baru saja dibuat
dan aku memeriksa nilai kunci visibilitas.
Dan jika nilai kunci yang sama, sama, sama, tersembunyi,
maka aku akan beralih dan Aku akan beralih kali ini
dengan menggunakan metode yang sama yang tampaknya kelebihan beban
dalam arti bahwa ia memiliki dua tanda tangan yang berbeda,
satu dengan satu argumen dan satu dengan dua argumen,
kedua yang adalah setter,
mantan yang getter sehingga untuk berbicara.
Dan jika penasaran dan kalau kau lebih pernah benar-benar melihat hal ini,
jika kita pergi ke jquery.css mudah-mudahan hit top memang ini
dan Anda dapat melihat lebih penjelasan resmi
bahwa kita hanya menggunakan ini, . Css dengan nama properti
dan kemudian setter adalah dot CSS
dengan nama properti dan nilai.
Jadi, sedikit lebih bersih, tapi melihat semacam pola di sini
dengan setiap iterasi kode ini,
kita semacam membuatnya semakin ketat dan ketat
dan ada mengatakan desain yang lebih baik
karena kita menggunakan seseorang kode lain yang dieliminasi
beberapa kompleksitas.
Jadi, sekarang mari kita membuat ini bahkan lebih sederhana.
Dan pada kenyataannya, jika saya menghapus semua kutipan Anda akan melihat hanya semua
komentar Anda akan melihat bagaimana sederhana ini telah mendapat.
Satu perbedaan di sini tentu saja adalah
bahwa saya menggunakan toggle Metode yang juga datang dibangun
ke jQuery dan itu hanya
karena orang lain menulis kode
yang benar-benar matikan pengaturan visibilitas
dari setiap elemen DOM yang Anda kirimkan.
Jadi, lebih baik dan lebih baik.
Jadi, ini adalah sebuah pola,
meskipun ini adalah perjamuan contoh sederhana dan semacam
dari efek bersih yang bodoh adalah bagian berkedip teks,
itu semacam pemikiran proses yang harus Anda pikirkan -
berpikir tentang tidak tentu pertama
menulis sesuatu pasif untuk proyek yang akan datang
tapi tentu seperti yang Anda iterate dengan penasihat atau dengan saya
dan pertemuan tim Anda atau Anda hanya memeriksa kode rekan kerja Anda
tentang pengetatan segalanya, kan?
Setelah semua, mereka kurang -
lebih sedikit baris kode Anda akhirnya memiliki
dalam teori sedikit bug Anda kemungkinan akan mengundang
karena ada hanya kode kurang mengacaukan dengan.
Baik.
Jadi, beberapa takeaways.
Fungsi Lambda, fungsi anonim,
banyak yang Anda telah terlihat sebelumnya
dan kemudian juga hanya pengetatan hal dengan perpustakaan
seperti jQuery dalam hal ini kasus tertentu.
Baik.
Ada pertanyaan?
Mari kita lakukan yang lain Aspek sisi klien di sini,
dalam bentuk nol kita memiliki efek bersih ini.
Bentuk super sederhana dan tampaknya jika saya mencoba untuk klik daftar disini,
awalnya ia memberitahu saya Anda terdaftar, baik, tidak benar-benar.
Nah, kenapa begitu?
Nah, inilah bentuk-0.html sangat sedikit kode,
no JavaScript apapun dan itu benar-benar semacam palsu
bentuk karena tindakan nilai registered.html
yang berarti tidak peduli apa Saya ketik ke dalam bentuk ini,
di mana itu akan dikirim pada server?
Ya. Jadi, untuk registered.html yang jelas merupakan file HTML
Oleh karena itu yang statis File yang tidak memiliki sarana
mengambil input pengguna dengan asumsi tidak ada kode JavaScript
tertanam di dalamnya yang cari di URL
jadi ini benar-benar NOOP dan tidak ada yang akan terjadi
dengan data yang disampaikan, tetapi Anda dapat melihat struktur
dari bentuk HTML5 cukup sederhana
yang memiliki beberapa password, beberapa jenis masukan.
Jadi, mari kita benar-benar sekarang menambahkan beberapa pengecekan error
dan melihat bagaimana kita mungkin memperbaiki ini.
Jadi, di sini adalah semacam miskin cara manusia menerapkan ini
dan itu semacam potongan kode jahat.
Jadi, pertama-tama mari kita gulir turun ke bawah
untuk melihat apa yang sama dan apa yang berbeda.
Satu-satunya hal yang berbeda sekarang ini antara
dan versi sebelumnya adalah bahwa saya telah diberi bentuk dan ID
dari "pendaftaran" bisa memiliki menjadi apapun yang saya mau
namun dimaksudkan untuk menjadi unik diidentifikasi bahkan itu tidak
benar-benar diperlukan karena jika Halaman hanya memiliki satu bentuk pasti saya
bisa menemukannya dengan salah satu metode pemilih jQuery.
Namun cara ini hanya membuat lebih deterministik.
Jadi, jika aku pergi sekarang untuk naskah saya tag, perhatikan berikut ini,
equals window.onload fungsi anonim.
Jadi, apa ini lakukan?
Jadi, Anda mungkin ingat bahwa dalam pemrograman client-side -
JavaScript bukan halaman HTML memiliki berbagai acara yang berkaitan
dengan unsur-unsur, mengklik dan mengirimkan dan berfokus
dan kabur dan lainnya seperti peristiwa yang bisa terjadi
sebagai pengguna biasanya berinteraksi dengan halaman,
window.onload melakukan apa yang dikatakannya.
Pada jendela seluruh pemuatan
jadi setelah semua gambar telah download semua file sekali telah
telah didownload dan sekali halaman telah dimuat,
melakukan kode berikut, dan perhatikan jika saya beralih ke bawah
metode ini, perhatikan bahwa tidak ada tanda kurung
setelah kurung kurawal yang berarti
bahwa aku tidak melaksanakan fungsi ini di sini sekarang,
browser akan mengeksekusi untuk saya bila telah ditentukan
bahwa halaman telah dimuat.
Jadi, mari kita lihat apa yang kami lakukan,
document.getElementById pendaftaran
sehingga hanya memberi saya referensi ke node
di pohon itu dari memiliki ID pendaftaran.
Dan sekarang, aku akan mendaftarkan event handler lain
dengan melakukan form.onsubmit mendapat fungsi anonim ini
yang berarti berikut kode harus mengeksekusi setiap kali
Bentuk yang disampaikan.
Sekarang, sebagian besar ini hanya semacam membosankan logika.
Jadi, jika nilai bidang email dalam bentuk yang
"Apa-apa" maka Anda harus memberikan alamat email Anda,
Anda berteriak pada pengguna dengan waspada dan kemudian kembali palsu.
Dan kemudian saya memiliki sekelompok pemeriksaan lainnya,
cek password,
cek jika password yang sama,
cek jika perjanjian kotak centang dicentang atau tidak
dan aku hanya berteriak pengguna jika ada
dari tes tersebut benar-benar gagal.
Jadi, di sini adalah contoh bahkan meskipun itu sedikit dibikin
di sini fakta bahwa saya menggunakan sama, sama, sama,
berarti bahwa pengguna tidak dapat mencoba untuk menipu saya
dengan mengetikkan apa nilai.
Atau lebih tepatnya aku benar-benar memeriksa kehadiran
dari string kosong, pengguna belum diketik apa pun.
Jika pengguna mengetik dalam harfiah nol,
"Nol" berpotensi menjadi bingung dengan string kosong.
Dan saya mengatakan itu semacam dari sini berarti
karena jelas bahkan nol bukan alamat email.
Tapi jika ini adalah lebih bidang generik seperti kolom teks
atau nama atau deskripsi atau sesuatu yang Anda ingin nilai untuk
dan hal itu belum tentu sintaksis memiliki
menjadi alamat email, pengguna bisa mengetik sesuatu seperti nol
dan lagi kasus sudut tapi itu mengapa biasanya memeriksa jenis adalah
hal yang berguna.
Kau benar-benar memeriksa pengguna telah diketik apa-apa
ke dalam bidang tersebut.
Jadi, apa yang terjadi jika tidak ada dari tes tersebut gagal, baik,
kembali benar dalam dari event handler
seperti onsubmit hanya berarti membiarkan perilaku asli benar-benar
menyebarkan dan oleh karena itu Formulir akan mendapatkan disampaikan.
Dan itulah mengapa ketika saya akhirnya diklik mengirimkan sebelum aku
melalui register.html dan jika saya melakukan itu sekarang, pemberitahuan,
Saya dimarahi jika saya tidak berikan alamat email
dan saya dapat mengetikkan malan@harvard.edu,
merah [fonetik], merah, mencentang kotak,
dan sekarang mendaftar dan ia memberitahu saya, sekali lagi,
Anda terdaftar atau tidak benar-benar.
Baik.
Jadi, mari kita membersihkan ini hanya sedikit dan kemudian transisi
ke yang lebih baru baru sisi server hal.
Jadi, jika aku pergi ke dalam bentuk-2.html, memperhatikan beberapa hal.
Jadi, satu, saya membawa jQuery kembali ke dalam campuran
jadi di sana lagi adalah tanda dolar ini
dan sekarang saya menggunakan beberapa metode jQuery.
Jadi, pertama, apa itu tentang tanda dolar yang
begitu istimewa di sini?
Apa tanda dolar laced di sebagian besar kode jQuery?
Ya.
[Tak terdengar Keterangan]
OK. Jadi, fungsi tanda dolar melewati DOM mencari
untuk sesuatu dengan ini selector CSS tertentu.
Jadi, benar, tetapi hampir terlalu tepat.
Itulah yang terjadi ketika Anda lulus dalam string
seperti dalam kasus ini, tapi Anda tidak selalu harus lulus dalam string.
Bahkan, kasus di titik, yang sangat baris pertama di sini adalah ini bukan
CSS selector, aku lewat dalam fungsi Lambda.
Jadi, lebih umum - jadi, jawaban yang baik tapi terlalu tepat.
Secara umum, apa yang tanda dolar mewakili?
>> Hanya jQuery.
>> Ya. Jadi, hanya jQuery atau itu hanya fungsi
bahwa beberapa orang tahun yang lalu menulis dan orang lain memiliki
sejak ditingkatkan yang secara harfiah secara default disebut -
oops, disebut jQuery.
Itu hanya - ternyata keluar tidak seperti banyak
tanda bahasa dolar adalah simbol sempurna sah untuk menggunakan
dalam nama variabel sedangkan
dalam tanda dolar PHP jelas memiliki arti khusus
tetapi dalam JavaScript seperti di beberapa bahasa, tanda dolar
dan garis bawah dan semacamnya lainnya karakter khusus benar-benar legit
untuk digunakan dalam simbol Anda sendiri nama untuk variabel.
Jadi, seseorang hanya memutuskan itu, Anda tahu apa?
Ini akan menjadi sangat membosankan
untuk membuat seluruh dunia ketik jQuery sepanjang waktu,
biarkan aku semacam menanam saham di tanah dan berkata,
"Perpustakaan ini akan menggunakan tanda dolar. "
Dan pada kenyataannya, ini tidak meningkatkan risiko
bahwa orang lain presumptuously akan menggunakan tanda dolar
untuk nya perpustakaan tetapi ada cara untuk semacam menjamin
bahwa ketika Anda menggunakan dolar menandatanganinya peta ke jQuery
karena Anda dapat menguji apakah itu sudah ditetapkan
untuk sesuatu yang lain pada dasarnya.
Baik.
Jadi, itulah yang adalah, tidak ada sihir.
Ini hanya seksi mencari bagian dari sintaks yang bagus
dan cepat dan mudah untuk mengetik.
Jadi, apa yang terjadi ketika Anda ketik tanda dolar paren terbuka
dan kemudian fungsi anonim.
Nah, ternyata bahwa ini adalah notasi sebenarnya singkatan
untuk dokumen dot paren terbuka siap.
Jadi, sebagai Cynthia melihat sebelumnya kita sudah menemukan satu
kasus sudut.
Jika Anda hanya lulus dalam fungsi lambda,
pengaruh dolar tanda sedikit berbeda.
Bahkan, apa yang sebenarnya terjadi adalah bahwa hal itu setara dengan ini,
lewat di referensi ke objek dokumen global yang
yang bersifat global seperti objek window adalah
yang memberi Anda beberapa fungsi khusus
yang mempengaruhi seluruh halaman atau browser dan ternyata
out dokumen bahwa ketika Anda bungkus dengan jQuery,
jQuery dasarnya menyadari, oh, ini adalah referensi
dengan objek dokumen khusus,
biarkan aku sekarang mendaftar event handler disebut siap
yang tidak asli JavaScript atau DOM terkait.
Siap jQuery a hal yang mengatakan
saat halaman telah dimuat semua elemen HTML
tetapi tidak harus dimuat, semua CSS dan gambar
dan file JavaScript dan file flash dan sejenisnya.
Jadi, ini adalah langkah sebelum pada beban kemudian pergi ke depan
dan mengeksekusi berikut.
Dan terbalik digunakan pada siap berarti adalah bahwa Anda bisa, Anda tahu,
bahwa semua elemen dalam DOM Anda,
semua diidentifikasi secara unik hal dengan ID, mereka ada bahkan
jika halaman, isinya masih memuat dan pemuatan
dan Anda memiliki beberapa ikon rusak sejenak
atau halaman putih di latar belakang.
Ya.
>> Apa yang akan terjadi jika [tak terdengar]?
>> Contoh sempurna, pertanyaan yang sempurna.
Jadi, mari kita lihat apakah kita bisa mensimulasikan ini sekarang.
Jadi, biarkan aku pergi ke depan dan menghapus ini dua baris di sini dan kemudian
tanpa repot-repot untuk memperbaiki lekukan, biarkan aku pergi ke depan
dan menghapus ini di sini - oops, yang satu ini di sini.
Dan sekarang, biarkan aku pergi ke halaman, pergi ke bentuk-2.html dan jenis
Masuk Daftar, tidak tampak untuk terjadi, katakanlah, mengapa adalah bahwa,
mari kita pergi ke depan dan membuka up inspektur Chrome,
membuka Console hanya untuk melihat jika terjadi sesuatu di sini, sekarang,
mendaftar, masih ada.
Jadi, kode sintaksis halus
jadi saya tidak melihat apapun pesan kesalahan merah,
tapi apa jelas tidak terjadi?
Tak satu pun dari kode saya adalah benar, itu tidak bekerja sehingga tidak ada
kode saya tampaknya mengeksekusi, jadi mengapa ini?
Nah, JavaScript dan browser lebih umum mengeksekusi
isi dari halaman web, top ke bawah, kiri ke kanan.
Dan masalahnya adalah bahwa karena atas
halaman ini telah HTML kemudian kepala maka script maka script lain,
ini akan dijalankan sebelum apa yang bahkan siap,
atau bahkan ada di pohon representasi halaman.
Bentuk itu sendiri, bahkan tidak tubuh ada pada saat ini.
Jadi, jQuery cukup pintar dengan pengecekan error itu
bahwa jika tidak ada elemen dengan unik ID pendaftaran,
itu tidak akan bail out pada Anda
dan hanya memicu beberapa konsol kesalahan dan mematahkan seluruh halaman,
itu akan diam-diam mengabaikan Anda, tetapi alasan bahwa tidak ada
kode ini pernah mengeksekusi adalah
karena ketika Anda memiliki terdaftar ini mengirimkan handler,
tidak ada unsur untuk melampirkan ke.
Jadi, itu semacam ada op di sana.
Jadi, dengan menetapkan sebaliknya, menunggu sampai usia telah dimuat
jika kita lakukan window.onload yang hal yang semacam
dari sekolah lama cara melakukan atau yang lebih seksi jQuery cara
seperti ini, kita bisa mengatakan itu menunggu sampai semua
dari mereka tag HTML memiliki telah dipecah sehingga bahkan
jika gambar tidak dimuat, di Setidaknya simpul yang ada di pohon,
maka JQuery bisa memastikan bahwa segala sesuatu ada di sana.
Ya.
[Tak terdengar Keterangan]
Ya, bagus, ya benar-benar.
Jadi, solusi lain untuk ini, jika Anda tidak menggunakan ini
atau tidak ingat bahwa ini ada,
Anda bisa benar-benar bergerak semua ini ke bawah
dari halaman web, bagian dalam tubuh masih tetapi di bawah form
dan itu juga akan memecahkan masalah ini.
Hanya saja biasanya dianggap praktik buruk.
Ini sedikit berantakan dan ceroboh khusus
jika Anda terus jamming semuanya ke bagian bawah halaman,
terutama ketika saya sedang menjaga hal-hal sederhana dengan menempatkan semua
kode saya di dalam dari halaman HTML
ketika tentu saja Anda bisa tentu masuk ke dalam kebiasaan
anjak keluar ke file terpisah
di mana titik itu hanya bagus
untuk memusatkan file di kepala.
Kecuali ada harga yang Anda bayar
dengan menempatkan JavaScript aset lain seperti file CSS
di kepala halaman, apa risiko yang Anda jalankan?
>> Halaman lambat pemuatan.
>> Halaman lambat pemuatan, mengapa?
>> Karena kami berusaha untuk memuat semua perpustakaan
sebelum [tidak terdengar].
>> Persis karena browser membaca atas kode ke bawah,
kiri ke kanan jika Google analisis lambat
atau jQuery CDN lambat atau Facebook API lambat
dan file yang hanya hang berpotensi tergantung
pada bagaimana Anda dimuat berkas itu, seluruh halaman bisa muncul untuk menggantung.
Dan jika Anda melihat ini banyak terus terang
di situs Web mereka memiliki banyak iklan kualitas rendah
pada mereka, kami hanya satu lambat atau situs menenggak bisa menggantung halaman
untuk beberapa terbatas jumlah detik
sampai akhirnya browser mudah-mudahan kali keluar pada yang
dan kemudian menunjukkan Anda sisa halaman.
Jadi, jika Anda pernah digunakan seperti Facebook, seperti tombol,
di halaman web Anda, biarkan saya melihat apakah saya dapat menemukan ini
tanpa harus login di sini.
Jadi, jika Anda pergi ke Tombol Facebook seperti
dan klik get code, sialan,
mari kita lihat apakah kita bisa menemukan contoh,
pasti seseorang telah diposting ini.
[Pause]
Aku akan menyerah dalam beberapa detik jika kita tidak melihat ini.
Facebook asynch - OK.
Jadi, ini adalah kode dan kecuali mereka telah berubah baru-baru ini
bahwa Facebook benar-benar menyarankan Anda menggunakan
untuk memuat perpustakaan mereka dan benar-benar mengusulkan
bahwa Anda menempatkan ini dalam tubuh halaman Anda.
Jadi, Facebook menyarankan Anda membuat semacam bodoh DIV
yang hanya memiliki ID unik seperti ini, kemudian memiliki tag script
dan semua kompleksitas ini pada dasarnya melakukan hal berikut
dan mereka tidak menggunakan JQuery karena mereka tidak ingin
untuk menganggap yang lain dependensi,
biarkan aku bergerak ini atas hanya sedikit.
Jadi, perhatikan mereka memiliki fungsi anonim di sini,
lebih pada hanya dalam beberapa saat,
mereka kemudian menggunakan document.createElement,
mereka menciptakan elemen DOM, ini adalah seperti malloc sehingga untuk berbicara
di mana tag adalah tipe skrip, itu kemudian menentukan
bahwa atribut async tag yang akan
untuk menjadi kenyataan maka Anda pergi ke depan dan mencari tahu apa URL
dari Facebook JavaScript harus
dan ini hanya cara mewah
pengecekan harus itu HGP atau HDPS.
Dan akhirnya, Anda memperhatikan apa yang Facebook lakukan,
mereka mendapatkan DOM node yang memiliki ID dari Facebook akar
yang adalah apa yang mereka mengatakan kepada Anda dapat dimasukkan ke dalam halaman
dan kemudian mereka menambahkan anak sehingga efek dari semua ini adalah
untuk jenis dinamis menyuntikkan tag script baru ke halaman Anda
sebagai anak DIV yang Anda dimasukkan di sana sehingga sisanya
dari beban halaman bahagia
dan kemudian kode ini benar-benar akan dimuat asynchronous.
Jadi, pada dasarnya setelah Bahkan saya ditangguhkan menyebutkan
dari fungsi anonim,
apa yang funky ini sintaks mengacu ke sini
ketika saya memiliki tidak hanya berfungsi buka paren, paren dekat
dan kemudian kurung kurawal, mengapa paren terbuka di sini
dan kemudian buka tutup, tutup paren ada, apa itu lakukan?
>> [Tak terdengar] mendefinisikan dan kemudian mengeksekusi?
>> Tepat, itu mendefinisikan fungsi yang anonim
tetapi hanya mendefinisikan sebuah fungsi,
tentu saja tidak mengeksekusi fungsi sampai Anda menyebutnya
dengan nama, tapi tentu saja ini adalah fungsi anonim
sehingga Anda tidak dapat menyebutnya dengan nama tetapi Anda dapat
dalam JavaScript mengeksekusi fungsi anonim hanya
dengan encapsulating semuanya dalam kurung seperti yang kita lakukan
dengan paren ini dan ini Paren sini dan kemudian memperbaiki sebuah
sampai akhir fungsi paren terbuka, paren dekat,
jika Anda tidak ingin lulus argumen.
Tapi ini tampaknya agak bodoh,
seperti mengapa tambahan kompleksitas sintaksis
bahwa kebanyakan orang tampaknya tidak untuk mengenali, apa nilai
membungkus mereka tiga baris kode
dalam fungsi anonim dengan cara ini.
Ya.
>> Untuk menghindari Timpa a berharga dalam [tidak terdengar].
>> Tepat, untuk menghindari Timpa variabel
di halaman yang ada, kan?
Facebook agak presumptuously memutuskan,
mereka akan menggunakan variabel E, itu sangat mungkin
bahwa Anda atau siapa saja yang menggunakan Facebook seperti tombol
atau apapun konektor sosial lainnya
dalam memiliki variabel di suatu tempat yang disebut E. Jadi,
dengan encapsulating semua kode mereka di dalam
fungsi anonim ini, mereka pada dasarnya memiliki ruang lingkup mereka sendiri
yang tidak berisiko clobbering setiap variabel yang ada.
Jadi, ini juga sebenarnya paradigma yang sangat umum,
terutama saat menulis kode perpustakaan
atau ketika Anda sendiri tidak ingin kekacauan ruang nama Anda
dengan variabel lain yang ingin nilai hidup
dan mati setelah Anda keluar blok kode,
ini adalah teknik yang bagus dalam JavaScript.
Baik.
Jadi, kemudian kembali ke contoh ini di sini, semua yang kami lakukan pada akhirnya
dengan contoh ini adalah hanya membersihkan kode.
Jadi, itu masih punya keseluruhan sekelompok switch, sekelompok keseluruhan
kondisi di sini, tapi melihat sedikit sintaks,
ini mengakses DOM node dengan pendaftaran ID yang unik,
sarana ruang melihat sekarang untuk keturunan dari simpul tersebut,
menemukannya jika itu jenis input dan kemudian bahkan
jika Anda belum melihat ini sebelumnya, Anda mungkin tahu
bahwa ini hanya berarti menemukan dengan tag input,
elemen masukan yang memiliki atribut nama dengan nilai
email, dan kemudian membiarkan saya melambaikan tangan saya di beberapa
sisanya tidak semua itu merangsang
tapi benar-benar hanya jQuery sintaks untuk operasi yang sama.
Baik.
Tapi apa yang tidak begitu penting di sini adalah hal-hal sisi browser
melainkan fakta bahwa kita memiliki bersih dan bersih cara
benar-benar membuat bahwa pekerjaan kode.
Baik.
Ada pertanyaan?
[Tak terdengar Keterangan]
OK. Sekarang bagian yang menyenangkan.
Jadi, Node.js Mengapa?
Siapa yang peduli?
Apa yang Anda tahu hari ini?
Node.js, mengapa?
Henry [diasumsikan ejaan].
[Tak terdengar Keterangan]
Baterai reset?
Apa - ini adalah sempurna gantungan tebing
untuk paruh kedua hari ini.
Mengapa kita tidak pergi dan mengambil 5 menit istirahat di sini,
ada setengah candy mesin di sana jika Anda akan
seperti beberapa permen tanpa menempatkan seperempat masuk