>> Baiklah.
Jadi, JavaScript.
Hampir semua orang di dalam bilik ini mungkin mempunyai beberapa tahap
keselesaan dengannya sama ada ia adalah cara kembali apabila dalam SC50
atau ia menjadi peribadi projek-projek web atau
jika anda lakukan sedikit dengan ini projek asas PHP lalu,
tetapi untuk yang paling bahagian, ramai daripada anda,
walaupun anda mempunyai beberapa keselesaan
dengan JavaScript mungkin tidak diambil
mudah bagaimana kerja-kerja bahasa dan apa yang
di bawah hud dan apa yang kita akan cuba
untuk lakukan hari ini adalah kulit belakang beberapa lapisan teknikal
apa JavaScript, bagaimana berlainan dengan bahasa yang
seperti PHP, bagaimana boleh digunakan bukan sahaja sebelah pelanggan
tetapi juga sebelah pelayan dan kemudian memberi tumpuan secara khusus
rangka kerja ini, notis tidak JS yang pada dasarnya adalah masa jangka,
program yang anda boleh melaksanakan kod JavaScript,
sebelah pelayan dan ia menjadi jenis semakin popular
daripada pada kedudukan sama ini hari mungkin Ruby dan PHP
dan Python dan anda akan melihat
bahawa ia mempunyai beberapa cantik ciri-ciri berkuasa melalui beberapa
bahasa terbina dalam konstruk.
Tetapi pertama, beberapa mudah barangan hanya untuk mengingatkan anda
bagaimana bahasa ini berfungsi dan jika anda mempunyai masalah melihat apa-apa
ini, hanya menjerit dan kami akan menyesuaikan diri.
Jadi, satu seperti dalam PHP ada ada tanggapan fungsi utama,
anda hanya mula menulis kod
dan anda boleh baginya mentafsirkannya atas ke bawah.
Dalam konteks pelayar
atau di sebelah sesuatu server kita akan melihat beberapa contoh-contoh
dalam sedikit.
Syarat ini, sintaksis bersamaan dengan PHP dan juga C,
C + + dan beberapa bahasa lain jadi hanya untuk memberi anda rasa
bagaimana kita mungkin struktur itu,
ada hanya berkanun yang keadaan.
Ungkapan Boolean, sama sintaksis kerana anda telah melihat
dalam orang-orang sama lain bahasa, kedua-duanya untuk oring
dan untuk berakhir perkara bersama-sama.
JavaScript mempunyai suis, sama seperti PHP dan itu lain do
dan anda tidak terhad, seperti dalam C untuk primitif penting
seperti aksara dan Ints boleh sebenarnya melakukan lain-lain jenis nilai-nilai.
Gelung. Jadi, ini adalah sama
dan bahasa mungkin sedozen, manakala gelung, lakukan semasa gelung
dan kemudian silap mata ini di sini.
Jadi, ini adalah jenis dikenali sebagai penghitungan cepat
dan ia adalah cara yang sangat bijak hanya seperti di PHP melakukan
untuk setiap FU bar anda boleh juga,
dalam objek JavaScript, di mana objek adalah nama yang
pembolehubah di sini, berkata, var i objek dan pada setiap lelaran
gelung ini, saya adalah akan menjadi salah satu
satu kunci dari objek itu.
Jadi, jika anda mempunyai satu objek untuk pelajar, dan pelajar mempunyai ID
dan nama dan rumah, iterative saya akan mengambil
daripada nilai ID dan nama dan rumah dan anda boleh indeks baginya
ke dalam objek seolah-olah ia pelbagai menggunakan kurungan persegi
notasi untuk mendapatkan nilai daripada ID kunci atau nama
atau rumah dan sebagainya.
Dan bertentangan dengan biasa andaian, JavaScript objek,
hartanah tidak semestinya dijamin
dalam perintah itu sama, ini juga benar kepada PHP jadi jangan menganggap
bahawa perkara yang akan kekal dalam perintah itu sama
anda meletakkan kunci mereka pasangan nilai ke dalam objek.
Bagaimana pula tatasusunan?
Ada beberapa cara menulisnya sintaksis
tetapi ini mungkin adalah yang paling biasa kini hanya menggunakan persegi
notasi kurungan.
Jadi, ini adalah berubah-ubah untuk nombor yang mengandungi pelbagai panggilan
enam integer di sana, inilah tali yang mudah
dan notis apa yang tidak hadir daripada contoh-contoh ini,
apa yang JavaScript nampaknya kurang.
Yeah. Jadi, tidak ada tanggapan menaip, sudah tentu tidak
dalam konteks ini di sini, tetapi ini memang rentetan.
Jadi, JavaScript mempunyai jenis dan itu memang satu pameran
yang sendiri jenis yang dan setiap unsur-unsur
dalam array yang dari jenis nombor sebagai JavaScript memanggil mereka.
Jadi, ia adalah satu longgar ditaip bahasa dan kita akan melihat
JavaScript yang seperti PHP mempunyai identiti pengendali
dan mekanisme lain untuk sebenarnya memeriksa apa jenis yang
beberapa pembolehubah adalah kedua-dua untuk pemeriksaan ralat
dan untuk aplikasi lain.
Dan di sini adalah objek sampel mengandungi hanya ID dan nama.
Dan kini, notis bahawa kita menggunakan notasi kurungan kerinting,
yang lekukan dan putih ruang adalah jenis bermakna
dan ini mengisytiharkan pembolehubah yang namanya Rob
dan yang ID adalah 1 dan Jenis tarikh di sini bilangan kami
dan tali masing-masing.
Dan maka ini adalah sesuatu yang sedikit berbeza
jika anda pernah melakukan apa-apa dengan Ajax pada hari ini?
Anda mungkin digunakan objek seperti ini
tetapi apa yang diperhatikan di sini?
Apakah sintaksis pernah begitu berbeza, hanya beberapa
perkara antara contoh ini yang diakui lebih kecil
dan contoh ini lebih besar.
Jadi, pertama dalam orang biasa itu panjang, apa yang ini?
Apakah jenis kakitangan yang akan anda katakan?
OK, itu satu pameran, ia pelbagai apa?
>> Objek.
>> OK, ia pelbagai objek.
Dan kini, memberi tumpuan kepada hanya satu - mana-mana satu objek-objek ini,
apa yang berbeza antara ini dan ini?
>> Kekunci tali.
>> Yeah. Jadi, kekunci tali,
dan kekunci sebenarnya tali di kedua-dua kes
dan ini adalah jenis yang bodoh
dalam reka bentuk sejarah pendapat saya keputusan apabila anda menggunakan
JSON, JavaScript Objek Notasi,
yang pada dasarnya format pengangkutan
untuk menghantar data biasanya di seluruh rangkaian
antara pelanggan dan pelayan, anda perlu ingat
bahawa ini tidak benar-benar sah JSON dan ini adalah salah
daripada FYIs ini melainkan jika anda pernah bang kepala anda ke dinding
selama beberapa minit untuk tidak baik sebab, ia tidak sah JSON
kerana kekunci sebenarnya tidak disebut harga.
JSON idiotically memerlukan kunci bukan sahaja dipetik,
tetapi mereka akan duanya adalah terpakai disebut harga, petikan tunggal tidak mencukupi.
Jadi, perkara bodoh sedikit dan lebih daripada satu fakta yang menyeronokkan
untuk tujuan hari ini tetapi ini juga akan menjadi sah JavaScript
ia hanya tidak - yang bertutur tidak benar.
Baiklah.
Jadi, kita akan lihat banyak lebih daripada itu.
Baiklah.
Jadi, itulah JavaScript sintaksis mungkin cukup
biasa, mana-mana orang yang mempunyai tidak pernah menggunakan JavaScript sebelum
ia bukan satu perubahan besar dari PHP atau apa-apa bahasa yang paling prosedur
yang anda mungkin telah digunakan.
Jadi, hari ini kita akan memberi tumpuan kepada aspek-aspek yang menarik
JavaScript terutamanya dalam konteks tidak JS
tetapi tidak secara eksklusif kerana sehingga sekarang anda telah mungkin,
jika anda menggunakan Javascript, menggunakannya dalam pelayar.
Jadi, tidak JS adalah persekitaran yang maka dengan sedikit akan
untuk membolehkan kita untuk mengakses JavaScript pelanggan kod -
sebelah pelayan tetapi pertama, mari kita lihat
pada sesuatu itu adalah satu sebelah pelanggan sedikit lebih.
Jadi, saya telah pergi dalam dan ini adalah dikaitkan pada laman web kursus yang,
jika anda mahu bermain bersama-sama, terdapat dua subdirektori
dalam Zip hari ini dipanggil sumber kancing zip di laman web
dan ini adalah hanya satu Beberapa contoh mengenang kembali
perkara yang anda mungkin telah melihat sebelum ini dan saya jenis yang dibina mereka
dari yang paling mudah untuk sedikit lebih rumit untuk menggoda
beberapa ciri-ciri JavaScript.
Jadi, mari kita pergi ke hadapan dan mengambil yang mencari contoh di.
Jadi, sedih tag sekelip itu membunuh beberapa tahun lalu
sebagai cara yang telah mendapat lebih cantik dan lebih cantik
dan tag sekelip itu betul-betul kurungan terbuka berkelip kurungan rapat
dan ia semacam tidak lagi dengan kami.
Tetapi, kita masih boleh membangkitkan idea ini tag dengan hanya jenis
berfikir mengenainya secara logik, bagaimana anda pergi
tentang membuat sesuatu seperti ini berkelip intuitif?
Dengan mengandaikan anda tahu sedikit sedikit JavaScript dan CSS atau
pada ketika ini, ia OK jika anda tidak lakukan.
>> Tetapkan masa keluar dan menyembunyikan ia kemudian selepas saya akan menandakan ia
keluar dan menunjukkan sekali lagi.
>> Ya, sempurna.
Ini jenis pengaturcaraan 101,
bagaimana anda akan mencapai kesan visual seperti ini?
Nah, anda entah bagaimana perlu menunjukkan sesuatu
dan kemudian menyembunyikan sesuatu, menunjukkan sesuatu, menyembunyikan sesuatu
dan sebagai Jonathan mencadangkan menggunakan beberapa jenis masa keluar,
beberapa jenis jadual yang boleh anda lakukan ini berulang kali tanpa perlu
menggunakan gelung atau sesuatu seperti itu.
Jadi, biarlah saya pergi ke sekelip-0.html
dan biarlah saya mengecut fon sedikit
supaya lebih daripada ini sesuai.
Dan mari kita lihat apa yang berlaku di sini.
Jadi, pertama sekali, melihat bahawa badan
laman ini adalah super mudah, di dalam badan
halaman hanya div a.
Saya sewenang-wenangnya diberi ID ucapan
dan yang boleh menjadi apa-apa selagi ia unik
dan kemudian saya hanya mempunyai beberapa teks yang mudah, hello dunia.
Jadi, jika saya kini tatal ke atas, melihat beberapa gaya kembang.
Jadi, saya katakan, tajam ucapan, yang seperti yang anda tahu
dalam CSS hanya bermakna unik mengenalpasti elemen
dengan idea ucapan,
saiz fon akan sewenang-wenangnya menjadi ini, margin dan align teks.
Jadi, tidak menarik butiran estetik
kepada kira-kira pusat teks.
Jadi, bahagian yang menarik ialah dalam skrip tag di sini
yang saya berlaku untuk diletakkan di dalam kepala halaman.
Jadi, we'll - anda boleh melakukan ini dalam apa-apa bilangan cara
dan kita akan melihat beberapa lelaran program ini sama
tetapi mari kita bermula dari atas.
Jadi, saya telah mengisytiharkan fungsi dipanggil sekelip
dan nampaknya ia menggunakan ini terbina dalam kaedah DOM dipanggil
getElementById yang mungkin salah satu kaedah yang lebih kuat
bahawa anda keluar dari kotak dengan JavaScript mencari
"Ucapan" tidak perlu menjadi tanda petikan berganda seperti itu
dalam HTML adalah sama ada adalah baik selagi
kerana anda stylistically konsisten hari ini saya berani mengatakan
banyak orang menggunakan Jawa, petikan tunggal dalam JavaScript,
petikan berganda dalam HTML tetapi ia tidak benar-benar perkara
selagi anda konsisten.
Jadi, di sini jika anda tidak biasa, anda sebenarnya boleh mengakses
dengan JavaScript CSS hartanah pada elemen.
Jadi, melihat bahawa saya telah diisytiharkan dalam pembolehubah div
dan disimpan di dalam pembolehubah itu,
sebutan mengenai apa sahaja bahawa elemen DOM adalah.
Jadi, jika anda berfikir kembali ke CS50 atau mana-mana kelas di mana anda fikir
mengenai struktur pokok dan DOM, Dokumen Objek Model,
ini hanya rujukan dengan nod dalam pokok,
yang mewakili halaman ini
dan jika div.style.visibility harta sama, sama, sama,
tersembunyi, maka saya hanya mahu togol ia
sebagai Jonathan dicadangkan jika tidak, saya mahu
untuk bertukar-tukar ia kepada yang tersembunyi.
Sekarang, seperti yang di sebelah, mengapa tiga kali ganda sama ada?
Atau apa yang yang berbanding setaraf dua kali?
>> Bersamaan ketat.
>> Maaf.
>> Bersamaan ketat.
Jadi, ia adalah pengendali identiti
di mana dengan anda memeriksa tidak hanya nilai pembolehubah
sebagai sama, rasa yang sama tetapi juga jenis itu.
Jadi, walaupun kita tidak mempunyai dinyatakan sejauh ini apa-apa data
jenis bagi mana-mana pembolehubah dalam ini atau mana-mana slaid,
terdapat satu jenis yang berkaitan dengan tali yang tersembunyi
dengan nilai yang, tersembunyi dan yang tali kursus.
Jadi, dalam kes ini, ia tidak benar-benar perkara
kerana tidak ada cara yang kita akan conflate rentetan
daripada "tersembunyi" dengan beberapa nilai lain
tetapi ini adalah sering baik yang tabiat saya akan berkata untuk mendapatkan
ke dalam menggunakan yang sama, yang sama,
tanda yang sama secara umumnya sesuatu yang baik.
Ia akan menjadikan kod anda lebih mantap kedua-dua dalam PHP tetapi
dan dalam JavaScript kerana anda akan menghadapi
kadang-kadang ke dalam kes sudut di mana nilai mungkin sifar
bahawa anda memeriksa dan sifar boleh conflated dengan palsu
atau tidak ada dan seperti dalam PHP,
Javascript juga boleh mempunyai pelbagai nilai-nilai palsu di mana dengan sifar
dan palsu dan batal dan undefined semua boleh menyelesaikan tersirat
untuk palsu.
Tetapi jika anda benar-benar mahu untuk memeriksa nilai tertentu
seperti sifar, nombor, atau palsu Boolean maka anda mempunyai
menggunakan operator identiti ini.
Jadi, ia boleh berlaku untuk mendapatkan ke dalam apa jua cara sekalipun di sini,
ia semacam bermakna kerana kita tahu kita sedang menyemak
untuk nilai rentetan dan ia tidak akan menjadi apa-apa lagi.
Jadi, di sini sihir maka, jika saya tatal ke bawah ke talian ini di sini,
nampaknya, dibina ke dalam objek tingkap
dan ini adalah ciri pelayar anda boleh mengakses
untuk ini super global objek dipanggil Window,
bahagian dalam yang beberapa fungsi,
jika sekeping yang ditetapkan selang
dan ia mengambil nampaknya apa jenis hujah?
Yeah.
>> Panggilan Fungsi dan masa.
>> Baik. Jadi, fungsi memanggil dan masa yang
dan sebagainya terutamanya yang rujukan kepada fungsi,
penunjuk ke fungsi dalam erti kata yang
dan itulah fungsi perkara yang berlaku
untuk dilaksanakan setiap beberapa milisaat dan dalam kes ini,
ia setiap 500 milisaat.
Jadi, ia adalah cara yang mendorong berkesan dan gelung tak terhingga
tanpa menggunakan lelaran tetapi sebaliknya memberitahu JavaScript
kepada enjin dalam pelayar
untuk melakukan ini setiap 500 milisaat atau berhampiran
500 milisaat kerana ia boleh,
ternyata bahawa di bawah hood,
ada apa yang dipanggil acara gelung dan kita akan kembali kepada ini
dalam konteks nod JS yang hanya sentiasa jenis
daripada duduk di sana, berputar, menunggu kerja yang perlu dilakukan
dan sebaik sahaja ia sedar,
500 milisaat telah berlalu sekelip akan mendapat dipanggil lagi
dan lagi dan lagi adalah bersama apa-apa kerja lain
yang perlu dilakukan.
Jadi, apa yang kita boleh memperbaiki di sini?
Baiklah, biar saya membuka sehingga sekelip-1.html
dan menunjukkan sekelip-1.html
sebagai estetika sempurna sama.
Jadi, apa yang kita boleh memperbaiki di sini?
Nah, melihat bahawa ia adalah jenis yang tidak berguna
untuk menentukan fungsi yang dipanggil Berkelip kerana berapa banyak
dalam berapa banyak tempat-tempat yang tidak saya memanggil fungsi yang sekelip?
>> Hanya sekali.
>> Jadi, satu.
Jadi, ia tidak buruk, dalam Malah ia mungkin agak
lurus ke hadapan.
Saya ditakrifkan fungsi sekelip, saya memanggil fungsi sekelip melalui
parameter ini, tetapi dari segi teknikal,
tidak ada sebab untuk dan paradigma biasa
dalam JavaScript adalah untuk benar-benar menggunakan fungsi lambda
kerana anda mungkin ingat dari 51 atau fungsi tanpa nama
di mana jika anda tidak perlu nama untuk fungsi,
jika anda hanya memanggil pasti di satu tempat,
mengapa mengganggu cluttering kod anda, cluttering fikiran pengaturcara yang
dan nama anda ruang benar-benar dengan simbol-simbol
yang anda tidak benar-benar perlu mengambil berat tentang.
Dan sebagainya, dalam versi ini di sini,
melihat bahawa saya menyeru window.SetInterval langsung
di bahagian paling atas saya skrip tag kemudian saya lulus
dalam fungsi bernama yang tidak mengambil hujah-hujah
dan itulah sempurna halus dan kemudian badan
fungsi yang ternyata adalah sama dengan apa yang ada di hadapan
dan satu-satunya sintaksis yang berbeza sekarang ialah
turun di sini bersebelahan dengan 500.
Saya menutup badan fungsi
dan kemudian saya cakapkan melaksanakan kod sebelumnya,
setiap 500 milisaat.
Perubahan Jadi, sangat kecil
tetapi satu langkah ke arah apa yang mungkin yang lebih elegan
pelaksanaan ini.
Jadi, mari kita mengambil satu ini langkah lagi jika saya sekarang pergi
ke dalam sekelip dua, anda akan melihat perpustakaan biasa,
kesan yang akan
untuk menjadi benar-benar tidak penting estetika tetapi jika kita pergi
ke dalam versi dua di sini, notis yang di bahagian atas kepala saya,
Saya termasuk Versi terbaru JQuery.
Dan kemudian, turun sini, Saya hanya dibersihkan
sehingga kod sedikit, ia tidak akan menjadi dunia yang menyeronokkan
untuk terus menggunakan fungsi DOM ibunda
dan jenis mentah JavaScript.
Malah, JQuery kerana anda mungkin tahu telah menjadi begitu popular
sehinggakan ramai yang konflik dengan jQuery JavaScript
tetapi benar-benar hanya makan malam yang perpustakaan berguna bertulis
oleh rakan-rakan yang bernama John Resig dan sejak orang lain
yang hanya membuat banyak perkara yang membosankan
dalam JavaScript mudah dan lebih ringkas.
Jadi, dalam kes ini di sini apa yang berlaku?
Jadi, saya mempunyai penampilan ini tanda dolar, lebih kepada yang
dalam hanya seketika, kemudian ini adalah pemilih CSS.
Jadi, ia adalah hampir sama dalam semangat untuk apa yang saya lakukan sebelum ini,
tetapi kali ini, saya literal menggunakan tag hash
untuk menunjukkan yang unik pengecam dipanggil ucapan
dan kemudian nampaknya . Css adalah kaedah dibina
dalam apa jua objek ialah saya sahaja mencipta
dan saya memeriksa nilai kunci penglihatan.
Dan jika nilai utama yang sama, sama, sama, tersembunyi,
maka saya akan bertukar-tukar dan Saya akan bertukar-tukar masa ini
dengan menggunakan kaedah yang sama yang nampaknya terlebih beban
dalam erti kata bahawa ia mempunyai dua tandatangan yang berbeza,
satu dengan satu hujah dan satu dengan dua hujah,
kedua yang adalah penetap itu,
bekas yang terbanyak yang boleh dikatakan.
Dan jika ingin tahu dan jika anda hendak sebenarnya tidak pernah melihat ini,
jika kita pergi ke jquery.css diharapkan melanda atas adalah sesungguhnya ini
dan anda boleh melihat yang lebih penjelasan rasmi
bahawa kita hanya menggunakan ini, . Css dengan nama harta
dan kemudian penetap itu CSS dot
dengan nama harta dan nilai.
Jadi, lebih bersih sedikit, tetapi notis jenis corak di sini
dengan setiap lelaran kod ini,
kita semacam menjadikannya lebih ketat dan lebih ketat dan lebih ketat
dan ada mengatakan reka bentuk yang lebih baik
kerana kita menggunakan seseorang kod lain yang yang dihapuskan
beberapa kerumitan.
Jadi, mari kita membuat ini lebih mudah.
Dan sebenarnya, jika saya membuang semua sebut harga anda akan melihat semua
comment anda akan melihat bagaimana mudah ini telah mendapat.
Perbezaan satu di sini sudah tentu adalah
yang saya menggunakan satu togol kaedah yang juga datang dibina
masuk ke jQuery dan itu hanya
kerana orang lain menulis kod
yang benar-benar menogol penetapan penglihatan
sebarang unsur DOM yang anda menghantarnya.
Jadi, lebih baik dan lebih baik.
Dan sebagainya, ini adalah corak,
walaupun ini adalah makan malam yang contoh mudah dan jenis
kesan bersih bodoh yang adalah sebahagian berkelip teks,
ia adalah jenis yang pemikiran proses yang anda perlu berfikir -
berfikir tentang tidak semestinya yang pertama
bertulis pasif sesuatu untuk projek yang akan datang
tetapi pastinya anda melelar dengan penasihat anda atau dengan saya
dan mesyuarat pasukan anda atau anda hanya memeriksa kod rakan sepasukan anda
kira-kira mengetatkan perkara, bukan?
Lagipun, mereka kurang -
garis yang lebih sedikit daripada kod anda akhirnya mempunyai
dalam teori yang lebih sedikit pepijat anda mungkin akan menjemput
kerana terdapat hanya kod kurang keadaan kucar-kacir dengan.
Baiklah.
Jadi, beberapa takeaways.
Fungsi Lambda, fungsi tanpa nama,
banyak yang anda lihat sebelum
dan kemudian juga hanya mengetatkan perkara dengan perpustakaan
seperti jQuery dalam ini kes tertentu.
Baiklah.
Apa-apa soalan?
Mari kita buat satu lagi aspek sebelah pelanggan di sini,
dalam bentuk sifar kita mempunyai ini kesan bersih.
Bentuk super mudah dan nampaknya jika saya cuba untuk klik mendaftar di sini,
pada mulanya ia memberitahu saya anda berdaftar, baik, tidak benar-benar.
Nah, mengapa pula?
Nah, di sini bentuk-0.html sangat sedikit kod,
ada JavaScript jua dan itu benar-benar satu bentuk palsu
borang kerana tindakan itu nilai adalah registered.html
yang bermaksud tidak kira apa Saya menaip ke dalam borang ini,
di mana ia akan dihantar pada pelayan?
Yeah. Jadi, untuk registered.html yang jelas fail HTML
yang oleh itu statik fail yang tidak mempunyai cara
mengambil input pengguna dengan andaian tidak ada kod JavaScript
tertanam di dalamnya itulah mencari di URL
jadi ini adalah benar-benar mengaktifkannya dan apa-apa yang akan berlaku
dengan data yang dikemukakan, tetapi anda boleh melihat struktur
daripada satu bentuk yang agak mudah HTML5
yang mempunyai kata laluan beberapa, beberapa jenis input.
Jadi, mari kita sebenarnya kini menambah beberapa penyemakan ralat
dan melihat bagaimana kita mungkin memperbaiki ini.
Jadi, di sini adalah jenis yang miskin cara manusia melaksanakan ini
dan ia semacam satu sebahagian jahat kod.
Jadi, pertama mari kita tatal turun ke bawah
untuk melihat apa yang yang sama dan apa yang berbeza.
Satu-satunya perkara yang berbeza kini antara ini
dan versi sebelumnya adalah bahawa saya telah diberi bentuk dan ID
daripada "pendaftaran" boleh pernah menjadi apa-apa saya mahu
tetapi yang dimaksudkan untuk menjadi unik boleh dikenal pasti walaupun itu bukan
dengan tegas perlu kerana jika halaman hanya mempunyai satu bentuk sesungguhnya aku
boleh merasa dengan salah satu kaedah pemilih jQuery ini.
Tetapi cara ini hanya membuat lebih berketentuan.
Jadi, jika saya pergi sekarang untuk skrip saya tag, notis berikut,
setaraf window.onload fungsi tanpa nama.
Jadi, apa yang ini lakukan?
Jadi, anda masih ingat bahawa di pengaturcaraan pelanggan-sampingan -
JavaScript bukan laman HTML telah pelbagai acara yang berkaitan
dengan unsur-unsur, klik dan mengemukakan dan memberi tumpuan
dan kabur dan lain-lain peristiwa-peristiwa yang boleh berlaku
sebagai pengguna biasanya berinteraksi dengan halaman,
window.onload melakukan apa yang ia berkata.
Pada tingkap keseluruhan muatan
jadi sekali semua imej telah turun sekali semua fail telah
dimuat turun dan sekali halaman yang telah dimuatkan,
melakukan kod berikut, dan notis jika saya bertukar kepada bahagian bawah
kaedah ini, notis yang tidak ada kurungan
selepas pendakap kerinting yang mengatakan
bahawa saya tidak melaksanakan fungsi ini di sini sekarang,
pelayar akan melaksanakan ia bagi saya apabila ia telah ditentukan
bahawa laman yang telah dimuatkan.
Jadi, mari kita lihat apa yang kita lakukan,
document.getElementById pendaftaran
supaya hanya memberikan saya merujuk kepada nod
di pokok itu itulah daripada mempunyai ID pendaftaran.
Dan sekarang, saya akan mendaftar satu lagi pengendali peristiwa
dengan melakukan form.onsubmit mendapat fungsi tanpa nama ini
yang bermaksud berikut kod hendaklah melaksanakan setiap kali
bentuk yang dikemukakan.
Kini, sebahagian besar daripada ini hanya semacam membosankan logik.
Jadi, jika nilai bidang e-mel dalam borang ini adalah
"Apa-apa" maka anda mesti memberikan alamat e-mel anda,
anda menjerit pada pengguna dengan amaran dan kemudian kembali palsu.
Dan kemudian saya mempunyai sekumpulan cek lain,
cek untuk kata laluan,
cek jika kata laluan adalah sama,
cek jika perjanjian itu kotak semak diperiksa atau tidak
dan saya hanya menjerit pada pengguna jika apa-apa
dari orang-orang ujian sebenarnya gagal.
Dan sebagainya, di sini adalah satu contoh walaupun walaupun ia sedikit dibuat-
di sini bahawa saya menggunakan sama, sama, sama,
bermakna bahawa pengguna tidak boleh cuba untuk menipu saya
dengan menaip apa nilai.
Atau sebaliknya saya benar-benar memeriksa kehadiran
tali kosong, pengguna tidak ditaip apa-apa lagi.
Jika pengguna ditaip dalam beribu-sifar,
"Sifar" berpotensi menjadi keliru dengan rentetan kosong.
Dan saya katakan ia jenis daripada bermakna di sini
kerana jelas sifar bukan alamat e-mel.
Tetapi jika ini adalah yang lebih bidang generik seperti medan teks
atau nama atau perihalan atau sesuatu yang anda mahu nilai untuk
dan ia tidak semestinya sintaksis mempunyai
untuk menjadi alamat e-mel, pengguna boleh taip sesuatu seperti sifar
dan sekali lagi kes sudut tetapi itu mengapa biasanya memeriksa jenis adalah
satu perkara yang berguna.
Anda benar-benar memeriksa pengguna telah menaip apa-apa
ke dalam bidang itu.
Jadi, apa yang berlaku jika tiada dari orang-orang ujian gagal, baik,
kembali benar di dalam penjualnya yang acara
seperti onsubmit hanya bermakna yang disewakan tingkah laku asal sebenarnya
menyebarkan dan oleh itu bentuk akan mendapatkan yang dikemukakan.
Dan itulah sebabnya apabila saya akhirnya klik mengemukakan sebelum saya mendapat
melalui untuk register.html dan jika saya berbuat demikian sekarang, notis,
Saya akan menjerit kepada jika saya tidak memberikan alamat e-mel
dan saya boleh menaip malan@harvard.edu,
lembayung [fonetik], lembayung, menyemak semua butiran,
dan kini mendaftar dan ia memberitahu saya, sekali lagi,
anda pengguna berdaftar atau tidak benar-benar.
Baiklah.
Jadi, mari kita membersihkan ini sehingga hanya sedikit dan kemudian peralihan
kepada yang lebih baru baru barangan sebelah pelayan.
Jadi, jika saya pergi ke bentuk-2.html, notis beberapa perkara.
Jadi, satu, saya dibawa jQuery kembali ke dalam campuran
jadi sekali lagi adalah tanda dolar ini
dan sekarang saya menggunakan beberapa kaedah jQuery.
Jadi, pertama, apa yang ia kira-kira tanda dolar itulah
begitu istimewa di sini?
Apakah tanda dolar dicampur sepanjang mana-mana kod jQuery?
Yeah.
[Didengar Catatan]
OK. Jadi, fungsi tanda dollar akan melalui DOM mencari
sesuatu dengan ini pemilih CSS tertentu.
Jadi, benar tetapi hampir terlalu tepat.
Itulah apa yang berlaku apabila anda meninggal di tali
seperti dalam kes ini, tetapi anda tidak sentiasa perlu lulus dalam rentetan.
Malah, kes di titik, yang baris pertama di sini ialah ini bukan
Pemilih CSS, saya lulus dalam fungsi Lambda.
Jadi, secara umum - jadi, jawapan yang baik tetapi terlalu tepat.
Secara umum, apa yang tanda dolar mewakili?
>> Hanya jQuery.
>> Yeah. Jadi, hanya jQuery atau ia hanya satu majlis
bahawa beberapa tahun yang lalu lelaki menulis dan orang lain mempunyai
sejak dipertingkatkan yang betul-betul secara lalai dipanggil -
oops, dipanggil jQuery.
Ia hanya - ternyata keluar tidak seperti banyak
tanda bahasa dolar adalah simbol sempurna sah untuk menggunakan
nama pembolehubah itu manakala
dalam PHP tanda dollar jelas mempunyai makna khas
tetapi dalam JavaScript seperti di beberapa bahasa, tanda dolar
dan menekankan dan apa-apa lain aksara khas sama sekali legit
untuk digunakan dalam simbol anda sendiri Nama-nama untuk pembolehubah.
Jadi, seseorang hanya memutuskan itu, anda tahu apa?
Ia akan menjadi agak membosankan
untuk membuat seluruh dunia menaip jQuery sepanjang masa,
biarlah saya semacam menanam kepentingan di dalam tanah dan berkata,
"Perpustakaan ini akan menggunakan tanda dolar. "
Dan sebenarnya, ini tidak meningkatkan risiko
bahawa orang lain presumptuously akan menggunakan tanda dolar
bagi atau perpustakaan tetapi ada cara untuk jenis menginsuranskan
bahawa apabila anda menggunakan dolar menandatanganinya peta untuk jQuery
kerana anda boleh menguji jika ia sudah pun diberikan
kepada sesuatu yang lain pada asasnya.
Baiklah.
Jadi, itu sahaja yang adalah, tidak ada sihir.
Ia hanya seksi mencari sekeping sintaks yang bagus
dan cepat dan mudah untuk menaip.
Jadi, apa yang berlaku apabila anda menaip tanda dollar paren terbuka
dan kemudian fungsi tanpa nama.
Nah, ternyata bahawa ini adalah notasi sebenarnya trengkas
untuk dokumen dot paren terbuka bersedia.
Jadi, sebagai Cynthia perasan sebelum ini kita sudah menemui satu
kes sudut.
Jika anda hanya lulus dalam fungsi lambda yang,
kesan dolar tanda adalah sedikit berbeza.
Malah, apa yang benar-benar berlaku adalah bahawa ia adalah bersamaan dengan ini,
lulus dalam sebutan objek dokumen global
yang global seperti objek tingkap adalah
yang memberikan anda beberapa fungsi khas
yang memberi kesan kepada keseluruhan halaman atau pelayar dan ia bertukar
keluar dokumen yang apabila anda balut dengan jQuery,
jQuery dasarnya menyedari, oh, ini adalah suatu rujukan yang
dengan objek dokumen khas,
biarlah saya kini mencatat pengendali peristiwa dipanggil bersedia
yang bukan berasal JavaScript atau DOM berkaitan.
Siap adalah jQuery a perkara yang berkata
apabila laman telah dimuatkan semua unsur-unsur HTML
tetapi tidak semestinya dimuatkan, semua CSS dan imej
dan fail JavaScript dan flash fail dan sebagainya.
Jadi, ia adalah satu langkah sebelum kepada beban maka teruskan
dan melaksanakan yang berikut.
Dan terbalik menggunakan pada bersedia cara adalah bahawa anda boleh, anda tahu,
bahawa semua unsur-unsur dalam DOM anda,
semua dikenal pasti secara unik perkara dengan ID, mereka wujud walaupun
jika halaman, kandungannya masih memuatkan dan memuatkan
dan anda mempunyai beberapa ikon pecah seketika
atau halaman putih di latar belakang.
Yeah.
>> Apa yang akan berlaku jika [didengar]?
>> Contoh Perfect, soalan sempurna.
Jadi, mari kita lihat jika kita boleh simulasi ini sekarang.
Jadi, biarlah saya teruskan dan memadam ini dua baris di sini dan kemudian
tanpa mengganggu untuk menetapkan lekukan, izinkan saya pergi ke hadapan
dan Padam turun di sini - oops, yang satu ini di sini.
Dan sekarang, saya pergi lebih kepada halaman, pergi kepada borang-2.html dan jenis
dalam Daftar, apa-apa seolah-olah berlaku, katakan, mengapa itu,
mari kita pergi ke hadapan dan membuka sehingga inspektor Chrome,
membuka Console hanya untuk melihat jika apa-apa yang berlaku di sini, sekarang,
mendaftar, masih apa-apa.
Jadi, kod adalah sintaksis denda
jadi saya tidak melihat apa-apa mesej ralat merah,
tetapi apa yang jelas tidak berlaku?
Tiada kod saya adalah betul, ia tidak bekerja supaya tidak
kod saya seolah-olah melaksanakan, jadi mengapa ini?
Nah, JavaScript dan pelayar secara umum melaksanakan
kandungan laman web, atas ke bawah, kiri ke kanan.
Dan masalahnya ialah itu kerana atas
laman ini telah HTML kemudian kepala maka skrip maka skrip lain,
ini akan dilaksanakan untuk sebelum apa yang lebih bersedia,
atau wujud di pokok itu perwakilan halaman.
Bentuk sendiri, tidak juga badan wujud pada ketika ini.
Jadi, jQuery adalah bijak dengannya itu pemeriksaan ralat
yang jika tidak ada unsur dengan ID unik pendaftaran,
ia tidak akan menyelamatkan pada anda
dan hanya mencetuskan beberapa konsol kesilapan dan memecahkan keseluruhan halaman,
ia akan senyap mengabaikan anda, tetapi sebab-sebab yang tidak
kod ini pernah melaksanakan adalah
kerana apabila anda mempunyai berdaftar ini mengemukakan pengendali,
tidak ada unsur untuk memasangnya ke.
Jadi, ia adalah jenis op ada di sana.
Jadi, dengan menyatakan sebaliknya, menunggu sehingga umur itu dimuatkan
jika kami menyembah yang window.onload benda yang semacam
cara sekolah lama melakukan atau cara jQuery yang seksi
seperti ini, kita boleh beritahu menunggu sehingga semua
dari orang-orang tag HTML mempunyai telah dipecah supaya walaupun
jika imej tidak dimuatkan, di kurangnya nod yang ada di pokok itu,
maka JQuery boleh memastikan segala yang ada di sana.
Yeah.
[Didengar Catatan]
Ya, baik, ya benar-benar.
Jadi, penyelesaian lain untuk ini, jika anda tidak menggunakan ini
atau tidak ingat bahawa ini wujud,
anda benar-benar boleh bergerak semua ini ke bawah
halaman web, bahagian dalam badan masih tetapi di bawah borang yang
dan yang akan juga menyelesaikan masalah ini.
Ia hanya biasanya dianggap amalan yang tidak baik.
Ia adalah satu kemas sedikit dan ceroboh khas
jika anda menyimpan semua jamming ke bahagian bawah halaman,
terutama apabila saya menjaga perkara-perkara mudah dengan meletakkan semua
kod saya di dalam halaman HTML
apabila sudah tentu anda boleh pasti masuk ke dalam tabiat
pemfaktoran keluar untuk fail yang berasingan
di mana titik ia hanya bagus
untuk memusatkan gambar dalam kepala.
Kecuali ada harga yang anda bayar
dengan meletakkan JavaScript lain aset seperti fail CSS
di kepala halaman, apa risiko yang anda berjalan?
>> Perlahan memuatkan halaman.
>> Perlahan memuatkan halaman, mengapa?
>> Kerana kita cuba untuk memuatkan semua perpustakaan
sebelum [didengar].
>> Tepat kerana pelayar membaca kod di atas ke bawah,
kiri ke kanan jika Google analytics lambat
atau jQuery CDN lambat atau API Facebook yang lambat
dan fail yang hanya tergantung berpotensi bergantung
bagaimana anda dimuatkan fail itu, turun laman boleh muncul untuk menggantung.
Dan jika anda melihat ini banyak terus terang
di laman web mereka mempunyai banyak iklan yang berkualiti rendah
pada mereka, kami Hanya satu perlahan atau laman web dijatuhkan boleh menggantung halaman
bagi sesetengah yang tidak ditentukan beberapa saat
sehingga akhirnya pelayar mudah-mudahan kali daripada pada yang
dan kemudian menunjukkan anda seluruh halaman.
Jadi, jika anda pernah digunakan seperti Facebook, seperti butang,
di laman web anda, biarlah saya melihat jika saya boleh mendapatkan ini
tanpa perlu log masuk di sini.
Jadi, jika anda pergi ke Butang seperti Facebook
dan klik kod mendapatkan, persetan,
membolehkan melihat jika kita boleh mencari contoh,
pasti seseorang telah menyiarkan ini.
[Jeda]
Saya akan melepaskan dalam beberapa saat jika kita tidak melihat ini.
Facebook asynch - OK.
Jadi, ini adalah kod dan melainkan jika mereka telah berubah baru-baru ini ia
yang Facebook sebenarnya mengesyorkan bahawa anda menggunakan
untuk memuatkan perpustakaan dan sebenarnya mencadangkan
bahawa anda meletakkan ini di badan halaman anda.
Jadi, Facebook menasihatkan anda mencipta sejenis bodoh DIV
yang hanya mempunyai ID yang unik seperti ini, maka mempunyai tag skrip
dan semua kerumitan ini pada dasarnya tidak berikut
dan mereka tidak menggunakan mana-mana JQuery kerana mereka tidak mahu
untuk mengambil alih mana-mana kebergantungan,
biarlah saya bergerak ini lebih hanya sedikit.
Jadi, notis mereka mempunyai fungsi tanpa nama di sini,
lanjut mengenai bahawa dalam seketika,
mereka kemudian gunakan document.createElement,
mereka mewujudkan elemen DOM, ini adalah seperti malloc jadi untuk bercakap
di mana tag ini daripada jenis skrip, ia kemudian menyatakan
bahawa sifat Async yang tag yang akan
adalah benar maka anda pergi ke hadapan dan memikirkan apa URL
daripada Facebook JavaScript perlu
dan ini adalah hanya cara mewah
daripada pemeriksaan perlu ia menjadi HGP atau HDPS.
Dan kemudian akhirnya, anda notis apa Facebook tidak,
mereka mendapat nod DOM yang mempunyai ID akar Facebook
iaitu apa yang mereka memberitahu anda untuk dimasukkan ke dalam halaman
dan kemudian mereka menambah kanak-kanak jadi kesan semua ini adalah
kepada jenis dinamik menyuntik tag skrip baru ke dalam halaman anda
sebagai seorang kanak-kanak DIV yang anda dimasukkan sana supaya selebihnya
daripada beban halaman bahagia
dan kemudian kod ini sebenarnya akan dimuat tak segerak.
Jadi, pada dasarnya selepas fakta dan saya tertunda sebutan
fungsi tanpa nama,
apa yang funky ini sintaks merujuk kepada di sini
apabila saya mempunyai fungsi bukan sahaja membuka paren, paren rapat
dan kemudian pendakap kerinting, mengapa paren terbuka di sini
dan kemudian tutup terbuka, berhampiran paren sana, apa itu lakukan?
>> [Didengar] menentukan dan kemudian melaksanakan?
>> Tepat, ia mentakrifkan fungsi yang tanpa nama
tetapi semata-mata menentukan fungsi,
sudah tentu tidak melaksanakan fungsi sehingga anda memanggilnya
dengan nama, tetapi kursus ini adalah fungsi tanpa nama
jadi anda tidak boleh memanggil ia dengan nama tetapi anda boleh
dalam JavaScript melaksanakan satu fungsi tanpa nama hanya
oleh menghimpun seluruh perkara yang dalam kurungan seperti yang kita lakukan
dengan paren ini dan ini paren di sini dan kemudian penetapan yang
ke akhir majlis itu paren terbuka, paren rapat,
jika anda tidak mahu lulus apa-apa hujah.
Tetapi ini seolah-olah jenis bodoh,
seperti mengapa ini tambahan kerumitan sintaksis
bahawa kebanyakan orang tidak kelihatan untuk mengiktiraf, apa yang nilai
daripada membungkus mereka tiga baris kod
dalam fungsi tanpa nama dengan cara ini.
Yeah.
>> Untuk mengelakkan menulis ganti berharga dalam [didengar].
>> Tepat, untuk mengelakkan penggantian pembolehubah
di halaman yang sedia ada, bukan?
Facebook adalah agak presumptuously diputuskan,
mereka akan menggunakan pembolehubah E, ia agak mungkin
yang anda atau sesiapa yang menggunakan Facebook seperti butang
atau apa sahaja palam sosial yang lain
dalam mempunyai pembolehubah di suatu tempat yang dipanggil E. Jadi,
oleh menghimpun semua kod mereka di dalam
fungsi tanpa nama ini, mereka dasarnya mempunyai skop mereka sendiri
yang tidak risiko clobbering apa-apa pembolehubah yang ada.
Jadi, ini juga sebenarnya paradigma yang biasa,
terutama semasa menulis kod perpustakaan
atau apabila anda sendiri tidak mahu menyemakkan ruang nama anda
dengan pembolehubah lain yang anda mahu nilai untuk hidup
dan mati sebaik sahaja anda keluar yang blok kod,
ini adalah satu teknik yang baik dalam JavaScript.
Baiklah.
Oleh itu, maka kembali kepada contoh ini di sini, semua yang kita lakukan pada akhirnya
dengan contoh ini adalah hanya dibersihkan kod.
Jadi, ia masih mendapat keseluruhan sekumpulan suis, sejumlah
keadaan di sini, tetapi notis sedikit sintaks,
ini mengakses nod DOM dengan pendaftaran ID yang unik,
cara ruang kelihatan sekarang untuk keturunan nod itu,
merasa jika ia dari jenis input dan kemudian walaupun
jika anda tidak pernah melihat ini sebelum ini, anda mungkin tahu
bahawa ini hanya bermakna mencari dengan tag input,
elemen input yang mempunyai sifat nama dengan nilai yang
e-mel, dan biarkan saya melambai tangan saya pada beberapa
yang lain tidak semua yang merangsang
tetapi benar-benar hanya jQuery sintaks untuk operasi yang sama.
Baiklah.
Tetapi apa yang tidak begitu penting di sini adalah barangan sampingan pelayar
tetapi hakikat bahawa kita mempunyai cara yang lebih bersih dan lebih bersih
sebenarnya membuat bahawa kerja kod.
Baiklah.
Apa-apa soalan?
[Didengar Catatan]
OK. Sekarang bahagian yang menyeronokkan.
Jadi, node.js Mengapa?
Yang peduli?
Apa yang anda tahu itu hari ini?
Node.js, mengapa?
Henry [diandaikan ejaan].
[Didengar Catatan]
Semula bateri?
Apa - ini adalah penyangkut tebing sempurna
untuk separuh kedua hari ini.
Apa kata kita pergi dan mengambil rehat selama 5 minit di sini,
ada gula-gula yang separuh mesin sana jika anda akan
seperti beberapa gula-gula tanpa meletakkan suku masuk