>> TOMAS REIMERS: Hai, semua orang.
Nama saya Tomas Reimers.
>> MIKE Rizzo: Dan saya Mike Rizzo.
>> TOMAS REIMERS: Kami adalah dua CS50s TS.
Dan hari ini kami mendahului seminar mengenai JavaScript dan CSS untuk aplikasi web.
Jika anda ingin mengikuti bersama-sama, yang pautan yang tepat di sana.
Dan adakah anda ingin meletakkan ia pada ringkas komputer?
>> Ada link.
Ia adalah satu kawasan yang kecil, yang mempunyai pautan kepada semua sumber kita akan menjadi
menunjuk anda hari ini dan juga mempunyai banyak maklumat yang berguna yang ditulis oleh kami untuk
membaca lebih mendalam apabila anda kembali, dan anda cuba untuk mengingati apa yang
sebenarnya yang kita katakan, apakah anda bercakap tentang, dan sebagainya.
>> MIKE Rizzo: Baiklah.
Jadi mari kita bermula.
>> TOMAS REIMERS: Jadi anda mahu untuk bermula?
OK.
>> MIKE Rizzo: Yeah.
Oleh itu, kita mula-mula mahu untuk memulakan dengan luas gambaran tentang internet dan
memfailkan jenis apabila mereka bentuk laman web.
Walaupun persembahan ini kita mahu masuk ke dalam ke dalam JavaScript banyak yang lebih
kemudian, kita mahu mulakan dengan hanya, jenis, seperti pandangan mata burung
apa laman web dan bagaimana untuk berfikir tentang bentuk
laman web untuk permulaan.
>> Jadi anda semua, pada ketika ini - dengan itu menjadi malam Jumaat - seharusnya mempunyai
dikemukakan kewangan CS50 anda masalah menetapkan.
Mudah-mudahan, yang rasa baik apa pengaturcaraan web boleh.
Tetapi di sini kita mahu, jenis, memberi anda satu lagi rasa, juga.
>> TOMAS REIMERS: Jadi untuk recap apa berlaku, apabila anda menaip URL anda untuk
pelayar web anda, URL yang mendapat melihat ke atas dalam komputer.
Dan komputer anda disambungkan ke komputer lain,
yang menjadi tuan rumah laman web itu.
OK, jadi apabila anda pergi ke google.com, anda disambungkan kepada salah satu Google
komputer, yang mempunyai fail untuk google.com.
>> Ia kemudian meminta fail tertentu.
Jadi, jika anda pergi ke -
Saya tidak tahu -
example.com / index.html atau / test.html, anda akan meminta
bahawa fail tertentu.
Dan web pelayan akan untuk kembali kepada anda.
>> Kemudian, apabila anda pergi melalui fail yang -
sekali anda mendapat komputer yang fail - ia akan mula
untuk membina sebuah laman web.
Jadi sekarang ia mempunyai fail HTML, yang merupakan jenis seperti yang
struktur laman web.
Fail HTML juga boleh rujukan Fail CSS, yang menentukan
gaya laman web.
>> JavaScript fail, yang mentakrifkan interaksi dengan laman web.
Fail-fail imej, yang hanya imej.
Dan mungkin mengandungi pautan ke fail HTML yang lain, yang anda boleh melawat.
>> MIKE Rizzo: OK, hebat.
Jadi anda lelaki itu mempunyai semua, mungkin, teliti menubuhkan tuan rumah tempatan anda
pada mesin maya anda.
Itu yang, jenis, adalah tempatan domain bahawa komputer anda menjadi tuan rumah hanya
untuk anda di alamat IP anda sendiri.
>> Jadi dalam tempoh itu, maka anda boleh menambah kepadanya laman web anda sendiri.
Maksud saya, di CS50 Kewangan, anda perlu mempunyai menambah beberapa muka surat HTML, yang,
jenis, dibungkus dalam pembungkus PHP.
Tetapi akhirnya, apa laman PHP anda telah keluarkan adalah HTML.
>> Tetapi memikirkan kembali awal-awal lagi daripada Serangga, kami terpaksa menyediakan
kebenaran untuk segala-galanya, bukan?
Jadi ini hanya pada dasarnya membolehkan kita tahu yang boleh membaca, menulis, dan mungkin
melaksanakan setiap satu daripada fail.
Jadi, kita akan melakukan cepat - hm?
>> TOMAS REIMERS: Jadi, kita akan untuk melakukan demo cepat.
Jadi hanya untuk mengingatkan anda, apabila anda menyambung ke komputer Google -
sesiapa -
dan meminta fail, komputer yang pertama perlu memastikan anda diberi kuasa
untuk benar-benar melihat fail itu atau membaca bahawa memfailkan kerana anda tidak boleh hanya meminta
bagi mana-mana fail pada komputer itu, betul?
Itu akan menjadi bahaya keselamatan.
>> Jadi fail di dalam sistem yang kita gunakan, seperti perkakas CS50 ini, mempunyai tiga
orang umum yang boleh mempunyai kebenaran kepada sesuatu.
Yang pertama adalah sebenar pemilik fail berkata.
Yang kedua ialah kumpulan yang file dipunyai tersebut.
Kami tidak akan memberi tumpuan terlalu banyak pada itu.
Dan perkara yang terakhir adalah, jenis, seperti dunia atau seperti orang lain siapa yang
tidak khusus kepada fail itu dan tidak mempunyai hak-hak pemilikan ke atasnya.
>> Jadi jika kita mempunyai pemilik, kumpulan, dan kemudian dunia.
Dan kemudian, bagi setiap kumpulan-kumpulan ini, anda boleh mempunyai salah satu daripada tiga kebenaran,
OK, atau pelbagai daripada mereka.
Anda boleh mempunyai keizinan baca.
Anda boleh mempunyai kebenaran betul.
Dan anda boleh mempunyai melaksanakan kebenaran.
>> Jadi dari segi jenis fail sebenar, baca kebenaran adalah seperti sebenarnya membaca
kandungan fail.
Satu kebenaran hak menulis untuk berkata fail.
Satu kebenaran melaksanakan sedang berjalan yang memfailkan seperti yang anda lakukan apabila anda menjalankan salah satu
projek CS50 anda.
>> Oleh itu, apabila kita berfikir tentang fail seperti apabila kita perlu membaca HTML
fail, yang perlu dunia dibaca, bukan?
Mungkin, juga pemilik mahu dapat mengedit fail itu.
Jadi pemilik akan memerlukan membaca dan menulis kebenaran.
Mereka tidak benar-benar perlu melaksanakan.
>> Kumpulan, kami akan merawat sama seperti di dunia sekarang.
Jadi mereka perlu kebenaran telah dibaca.
Tetapi mereka tidak perlu menulis atau melaksanakan kebenaran.
Dan kini, jika kita berfikir kembali kepada bekas PSETs, apa yang kita sedar ialah jenis ini
daripada kelihatan seperti binari, bukan?
1 bermaksud ya.
0 untuk tiada.
Dan kita boleh menterjemahkan ini kepada perduaan.
>> Jadi 110 dalam binari akan menjadi 6.
100 akan 4.
Sama dengan dunia.
Jadi nombor yang anda akan mendapat untuk kebenaran untuk ini akan menjadi 644.
>> MIKE Rizzo: Dan jika anda berfikir kembali ke apabila anda chmoded sesuatu, saya percaya
mereka mengalah masalah menetapkan contoh di mana anda boleh melakukan
sesuatu seperti chmod 644 dan kemudian memfailkan nama.
644 maka, anda kini boleh melihat secara langsung di mana yang datang dari.
Jadi mudah-mudahan yang membuat yang yang lebih jelas.
>> Dan kemudian untuk kejelasan anda lelaki ini -
oh yeah, di sini ini sekali lagi.
Jadi 600 maka hanya akan menjadi contoh yang kita mendermakan sini di mana pemilik mempunyai
membaca dan kebenaran betul manakala kumpulan dan dunia tidak mempunyai apa-apa kebenaran
untuk mengakses fail.
>> TOMAS REIMERS: Dan maka kita mempunyai cepat senarai kebenaran yang sama.
Jadi direktori, anda mahu untuk benar-benar chmod 711.
Pantas mengetepikan - untuk direktori untuk mempunyai kebenaran laku bermakna dapat
untuk membuka direktori.
Imej, CSS, JavaScript, keperluan HTML 644 kerana, pada dasarnya, dunia
keperluan membaca kebenaran.
>> Dan PHP, yang anda semua telah melihat walaupun kita tidak akan bercakap mengenainya
ketat biasanya chmoded dengan kebenaran 600 kerana ia berjalan dengan
kebenaran pemilik.
Sekurang-kurangnya perkakas.
>> MIKE Rizzo: Jadi, jika anda tidak khusus menentukan jenis fail
yang anda mahu dalam sebenarnya menetapkan sehingga persembahan ini -
kami mempunyai masalah dengan ini kerana semuanya tidak chmoded dengan betul -
anda akan mendapat, jenis, yang ralat terlarang bahawa laman web yang
sebenarnya tidak mempunyai kebenaran untuk mengakses apa sahaja fail
anda mahu ia untuk mengakses.
Dan sudah tentu, yang dapat dijalankan - seperti dalam masalah yang ditetapkan - dengan menukar
kebenaran sewajarnya.
>> TOMAS REIMERS: Dan komen terakhir untuk pembangunan cepat tempatan adalah - kita
dibawa ini, tetapi kami hanya mahu untuk membawa semula -
jika anda meminta pelayan - tuan rumah jadi tempatan, sebagai contoh, com atau apa sahaja. -
dan anda tidak menentukan fail tertentu, fail yang komputer anda akan
untuk meminta dipanggil index.html.
Atau jika yang tidak wujud, index.php.
>> Sejuk.
Jadi itu hanya recap segala-galanya, mudah-mudahan, kita telah dibincangkan dalam
seksyen, dan kuliah, dan setakat ini dalam CS50.
Dan sekarang kita akan mula bercakap kira-kira khusus perpustakaan.
JavaScript dan CSS perpustakaan untuk aplikasi web.
>> Jadi salah satu sebab cepat mengapa kita mempunyai perpustakaan adalah pengaturcaraan -
terdapat banyak masalah dalam pengaturcaraan, yang menyimpan muncul
sekali lagi, dan sekali lagi, dan lagi.
Anda mungkin perasan bahawa banyak laman web memerlukan keupayaan untuk mempunyai drop down
menu, sebagai contoh, atau butuh keupayaan mempunyai butang sangat piawai
gaya, yang mungkin tidak perkara yang paling mudah.
Sekarang anda mula mendapat ke dalam HTML, anda menyedari bahawa butang boleh sebenarnya
kelihatan benar-benar hodoh jika anda tidak melakukan apa-apa.
>> Jadi ramai orang telah menulis dipanggil perpustakaan.
Dan dalam konteks ini, mereka juga dikenali sebagai rangka kerja.
Kami akan menggunakan dua silih berganti.
Dan apa yang mereka adalah mereka pada dasarnya keping premade kod -
sama ada atau CSS JavaScript -
yang mengambil banyak daripada pasukan anda ada dalam pengkodan.
>> Jadi mereka pra-menentukan sekumpulan kelas atau pra-menentukan sekumpulan fungsi untuk
Kes JavaScript, yang anda boleh menghubungi di kemudian hari.
Dan kemudian anda boleh, jenis, dapatkan akses kepada kod ini tanpa
mempunyai kaitan apa-apa.
Contoh perpustakaan adalah CS50.H. Itu adalah satu perpustakaan kami berikan kepada kamu
pada minggu satu, yang membenarkan anda untuk melakukan perkara seperti itu GetInt dan GetString
tanpa perlu menulis apa-apa kod sendiri.
>> MIKE Rizzo: Baiklah.
Jadi di sini, seperti kami terpaksa termasuk dalam c kami fail yang berbeza
perpustakaan, kita juga harus termasuk dalam HTML kami fail perpustakaan yang berbeza.
Sebagai contoh, jika kita mahu termasuk perpustakaan JavaScript khusus di sini,
mungkin, salah satu yang kita telah menulis diri kita sendiri kerana ia menjadi tuan rumah dalam negara
dipanggil script.js, kita hanya menggunakan tatatanda ini.
>> Jadi kita perlu setaraf jenis skrip JavaScript sumber setaraf
JavaScript.js.
Dan jika anda berfikir kembali ke CS50 anda masalah kewangan yang ditetapkan, jika anda melihat di
header.php dalam folder template ini, anda seharusnya melihat
sesetengah dimasukkan.
Jadi satu ini pertama - skrip -
adalah termasuk perpustakaan JavaScript.
Termasuk perpustakaan CSS adalah yang sedikit berbeza.
>> Di sini, bukan skrip TAG anda perlu tag pautan.
Dan kemudian, jenis CSS teks adalah sedikit berbeza.
Anda tidak sentiasa perlu termasuk lembaran gaya rel.
Tetapi saya rasa ia, secara amnya, amalan yang baik.
>> Dan kemudian akhirnya, href, yang anda mungkin melihat di ATAGs anda untuk menghubungkan
dalam pautan yang berbeza hanya Menyatakan pautan di mana untuk mencari itu.
Sebagai contoh, jika kita mahu memautkan perpustakaan yang berbeza - mari kita hanya berkata -
yang tinggal di styles.css.
Dan kami mahu untuk menghubungkan bahawa dalam itu menjadi tuan rumah di web, kami akan menyalin itu.
Dan kemudian tampalkannya ke dalam apa sahaja kita ada di sini sebaliknya.
>> TOMAS REIMERS: OK, diharapkan anda lelaki sudah biasa
dengan bagaimana untuk menghubungkan CSS.
Anda terpaksa melakukannya pada set coklat terakhir anda.
JavaScript, sebahagian dari kamu mungkin mempunyai beberapa pengalaman dengan.
Sebahagian daripada anda mungkin tidak.
>> Jadi untuk sekarang, tahu bahawa fail JavaScript adalah seperti fail CSS dalam
erti kata bahawa anda boleh link ke atau bahawa anda boleh memasukkannya secara dalaman.
Dan ia membolehkan anda kepada perkara-perkara skrip.
Dan kita akan berjalan anda melalui sedikit sedikit JavaScript nanti.
>> Jadi menggunakan perpustakaan -
sebaik sahaja anda telah memasukkannya, ia sebagai semudah literal memanggil
fungsi atau menambah nama kelas dengannya.
Perkara terakhir yang kita mahu bercakap kira-kira dari segi perpustakaan -
dan ini adalah lebih daripada nota teknikal -
adalah pelesenan sumber terbuka.
Oleh itu, apabila anda mendapati ini perpustakaan sebenar, anda boleh berfikir
soalan suka ialah ia OK bahawa saya hanya menggunakan kod orang lain, terutamanya
kerana itulah sesuatu yang kita amat memberitahu anda untuk tidak dalam kursus ini.
>> Jadi dalam kes pelesenan sumber terbuka, banyak pemaju -
apabila mereka telah menulis perpustakaan yang mereka fikir boleh
membantu kepada orang lain -
akan menyiarkannya ke web dan memberikan lesen.
Dan suatu lesen yang pada dasarnya mengatakan saya dengan memberi kebenaran untuk lain
orang untuk menggunakan ini sekeping perisian dengan seperti berikut
ketentuan.
>> Kami menyertakan pautan ke laman web yang baik untuk membantu anda memahami lesen dalam
dalam hal keadaan kes anda menghadapi mereka.
Ketetapan umum adalah perkara-perkara seperti anda dialu-alukan untuk menggunakan perpustakaan saya supaya
selagi anda memberi saya kredit.
Anda dialu-alukan untuk menggunakan perpustakaan saya selagi apabila ia rosak
anda tidak menyalahkan saya.
Anda dialu-alukan untuk menggunakan perpustakaan saya begitu lama kerana anda tidak menggunakannya untuk membuat wang
untuk diri sendiri.
Ini adalah jenis yang sama ketentuan.
>> Untuk projek ini akhir CS50, mereka tidak harus super relevan kerana
projek-projek yang menggunakan anda semua mungkin agak, jenis, yang dikenali.
Tetapi apabila anda benar-benar pergi keluar ke dunia dan mula menggunakan perpustakaan, yang
boleh atau tidak boleh dan juga dilaksanakan sebagai beberapa yang lebih popular kami
akan pergi melalui.
Ia baik untuk dapat memahami ini lesen dan untuk
memahami apa yang mereka maksudkan.
Dan akan kembali.
>> MIKE Rizzo: OK.
Jadi sekarang bergerak ke contoh CSS sebenar.
Pada ketika ini setakat ini, anda mungkin tidak temui ini.
Tetapi anda mungkin telah dihadapi dalam kehidupan seharian anda di mana sesuatu
yang kelihatan satu cara pada satu pelayar tidak mungkin kelihatan sama
cara dalam pelayar web lain.
>> Ini dipanggil pelayar pelayar keserasian.
Dan semakin ia menjadi lebih dan lebih banyak masalah, terutama sebagai
pelayar mengambil lebih dan lebih kebebasan untuk melaksanakan perkara-perkara yang mereka mahu.
Jadi untuk mengatasi itu, terdapat sebenarnya perpustakaan yang besar dipanggil Normalize.CSS.
>> TOMAS REIMERS: Kami termasuk link.
Pada ketika ini, ia membantu jika anda mempunyai komputer riba anda di sana
mencari di tapak.
Dan kita memberikan ini kepada anda dengan kini hanya kerana akhir CS50 yang
projek sebenarnya akan meminta anda untuk melaksanakannya
sama dan melalui pelayar.
>> Jadi untuk menjaga di belakang anda kepala, ini adalah sebuah perpustakaan yang indah
kerana ia akan, jenis, menyeragamkan sesuatu.
Dalam Firefox, sesuatu yang mungkin menunjukkan sebagai satu piksel ke kiri.
Dan kemudian Chrome boleh memutuskan bahawa sebenarnya apa yang anda maksudkan ialah 10 piksel
ke kiri.
Dan anda mahu menyeragamkan ini.
Menormalkan sebenarnya akan melakukan yang benar-benar baik tugas memastikan bahawa laman anda
kelihatan sama di seluruh pelayar.
>> MIKE Rizzo: Jadi, jika kita mahu hanya klik link di benar-benar cepat dan menunjukkan
anda apa yang kelihatan seperti, anda boleh memuat turun menggunakan
butang Muat turun gergasi.
Atau saya menggalakkan anda untuk membaca lebih lanjut mengenai ia dengan klik link ini yang lebih rendah
sudut kanan.
>> TOMAS REIMERS: Dan jika anda benar-benar Penantian di sana -
klik sumber pada GitHub -
anda sebenarnya akan melihat sumber terbuka lesen di LICENSE.md di sana.
Dan anda akan lihat di sini adalah lesen MIT sangat popular.
Sekali lagi, jika anda membaca teks, anda akan dapat untuk mencari ia di laman web ini
kita dirujuk sebelum dan dapat memahaminya tanpa perlu membaca
melalui jargon undang-undang.
>> MIKE Rizzo: OK, hebat.
Jadi, itu Menormalkan.
Kami mahu memberi anda yang benar-benar cepat.
Oh, adakah anda mempunyai soalan?
>> PENONTON: Oleh itu, apabila anda memuat turun, anda hanya ikut kod yang bahawa mereka mempunyai
bawah butang Muat turun?
>> TOMAS REIMERS: Ya, jadi apabila anda memuat turun -
>> MIKE Rizzo: Oh, itu adalah satu titik besar.
Jadi persoalannya adalah bagaimana kita sebenarnya memuat turun?
Jadi, jika kita klik link, kita lihat bahawa ia sebenarnya muncul
pada kod sumber.
Jadi untuk melakukan ini, apa yang kita dapat lakukan adalah hanya klik Save As.
Save As dan yang perlu membawa fail.
Dan kemudian kita boleh memilih untuk menyimpannya sebagai normalize.CSS.
Dan kemudian anda akan perlu menghubungkannya dalam -
>> TOMAS REIMERS: Cara yang sama anda menghubungkan dalam mana-mana fail lain.
Dan apabila anda menghubungkannya dalam, apa yang besar mengenai Menormalkan ia akan benar-benar
menjaga semua keras bekerja dengan sendirinya.
Yang bererti bahawa anda tidak mempunyai untuk menambah apa-apa kelas.
>> Anda tidak perlu berbuat apa-apa yang pelik.
Ia akan menormalkan tanpa anda melakukan apa-apa lagi.
Ya, anda perlu dimasukkan.
Google Chrome tidak bertindak balas.
>> Hanya yang cepat mengetepikan -
Saya perhatikan kita melompat ke dalam ini.
Selebihnya persembahan ini adalah akan menjadi gambaran yang cepat.
Satu kajian perpustakaan.
>> Pada asasnya, apa yang mereka.
Apa yang mereka lakukan.
Bagaimana mereka berguna.
Bagaimana anda boleh melaksanakannya.
Jika anda ingin mula mencari mereka, berikut bersama-sama, dan membaca
mereka, saya sangat menggalakkan itu.
>> Sebagai alternatif, anda dialu-alukan juga untuk mula memuat turun mereka dan termasuk
mereka di sisi hanya untuk melihat apa yang mereka kelihatan seperti atau apa yang mereka lakukan jika anda mempunyai
komputer riba anda di hadapan anda.
Jika tidak, anda dialu-alukan untuk memastikan mendengar kita bercakap.
Kita akan terus bercakap.
Dan kita mempunyai masa pada akhirnya, mudah-mudahan kita benar-benar akan masuk ke dalam menunjukkan anda
apa yang beberapa perpustakaan ini kelihatan seperti.
>> MIKE Rizzo: Percuma.
Baiklah, jadi sekarang mari kita bercakap kira-kira Fon Awesome.
>> TOMAS REIMERS maka Font Awesome adalah tapak benar-benar kemas, terutamanya bagi mereka
daripada kita yang kurang artistik berbakat.
Mengabaikan Font nama Awesome, ia memberi anda sekumpulan ikon, yang
sangat berguna.
Jadi banyak kali anda akan melaksanakan ikon anda mungkin mahu seperti x bagus jadi
bahawa anda boleh menutup sesuatu.
>> Atau anda mungkin mahu beberapa jenis Edit butang dengan lukisan pensil seperti
orang lain mempunyai.
Dan itu apabila anda mengetahui bahawa melukis mereka ikon boleh
sangat membosankan dan sukar.
Fon Awesome - jika anda benar-benar pergi ke laman web ini -
memberikan anda banyak ikon di bawah ikon di bahagian atas.
Ya, hanya bahagian atas.
Ia akan memberi anda banyak ikon secara percuma.
>> Jadi di sini anda melihat kita mempunyai perkara-perkara seperti asterisk, bar, bolt kilat, yang
kalendar, pepijat, buku, dan sebagainya.
Ini boleh sangat berguna.
Cara anda termasuk ini adalah anda termasuk beribu-fail CSS.
Dan selepas anda termasuk fail CSS, apa yang anda boleh lakukan ialah anda membuat
tag dipanggil I. Ia satands untuk ikon dengan kelas FA
menawarkan diri untuk Font Awesome.
Dan kemudian, apa sahaja kelas yang anda mahu.
>> Jadi, jika saya mahu ikon ditambah ini persegi di sini, saya akan memberikan
ia kelas FA.
Dan kemudian sempang sempang FA ditambah persegi.
>> MIKE Rizzo: Percuma, OK.
>> TOMAS REIMERS: Dan kemudian, CSS lepas perpustakaan kita mahu untuk mendapatkan melalui kami
cuba untuk memastikan ia minimum kepada CSS perpustakaan kerana kita merealisasikan
tajuk persembahan ini adalah JavaScript Perpustakaan.
Tetapi kita berfikir bahawa kita boleh dan juga memperkenalkan anda kepada perpustakaan lain
ketika kami bercakap tentang perpustakaan.
>> Ia Google Web Font.
Dan apa yang Google Web Font membolehkan anda lakukan adalah menambah fon pada laman web anda,
yang merupakan cara yang benar-benar mudah untuk membuat ia cantik dan untuk membezakan set anda
dari orang lain adalah jika ia mempunyai font bagus atau jika ia mempunyai yang bagus yang
koleksi fon.
Google Web Font bagus tidak seperti perpustakaan dalam erti kata bahawa ia adalah satu
pemasangan benar-benar mendapat petunjuk.
>> Jadi, jika anda mengikuti pautan, ia google.com / fon, saya percaya.
Jika anda mengikuti bahawa, anda boleh memilih fon anda.
Anda boleh memilih di sebelah kiri dari ketebalan, condong, dan sebagainya.
Dan kemudian, apabila anda telah memilih satu, anda boleh klik penggunaan cepat.
Di sana.
Bawah kanan kotak.
>> Dan kemudian, tatal ke bawah.
Pertama sekali, mereka memberikan CSS yang anda perlu benar-benar menghubungkan kepadanya.
Ia di sana.
Anda hanya boleh copy dan paste yang masuk
Dan perkara yang baik tentang satu ini anda sebenarnya tidak perlu untuk
memuat turun fail.
>> Apa yang ia akan lakukan ialah ia akan untuk pautan ke versi Google daripadanya.
Jadi kembali kepada apa maksudnya.
Ini bermakna apabila pengguna downloads fail anda -
downloads halaman HTML anda - HTML anda halaman akan rujukan fail ini.
>> Demikian maka, anda komputer akan lihat, oh, ia menjadi tuan rumah di google.com dan bukan
dari pada theirsite.com.
Biar saya pergi meminta Google untuk fail itu.
Dan kemudian, ia akan termasuk ia seolah-olah ia suatu
sebahagian daripada laman anda sendiri.
>> TOMAS REIMERS: Percuma.
Dan apabila anda termasuk itu, maka untuk termasuk dalam CSS anda, ia memberi anda
garis sebenar.
Jadi, anda menetapkan font harta sama dengan nama fon anda.
>> MIKE Rizzo: OK.
Oleh itu, kita hanya selesai dengan CSS.
Dan sebahagian daripada anda mungkin berfikir, baik, kami mempunyai beberapa CSS pada CS50 Kewangan.
Tetapi perpustakaan CSS adalah Bootstrap.
Kami benar-benar termasuk Bootstrap sedikit kemudian di bawah JavaScript kerana dengan
perpustakaan Bootstrap CSS juga datang dengan banyak JavaScript yang
Bootstrap atau Twitter - yang membuat Bootstrap -
menggunakan untuk menguruskan semua CSS mereka.
>> TOMAS REIMERS: Adakah sesiapa yang mempunyai apa-apa soalan setakat ini kira-kira CSS secara umum?
Kami baik?
Awesome.
>> MIKE Rizzo: Awesome.
>> TOMAS REIMERS: Jadi bergerak ke JavaScript.
>> MIKE Rizzo: Oleh itu, kita mahu bercakap mengenai jQuery untuk memulakan.
Adakah sesiapa mendengar jQuery sebelum atau menggunakannya?
Ya, beberapa?
Jadi jika anda hanya bekerja dengan ibunda JavaScript, anda akan mendapati diri anda
menaip banyak selectors panjang banyak.
Jadi apa jQuery adalah ia menyediakan pembungkus bagus untuk JavaScript
bahasa yang membolehkan anda dengan mudah memilih dan memanipulasi elemen yang berbeza
dalam model objek dokumen yang Laman web atau DOM, yang saya fikir
anda semua pernah mendengar dalam syarahan pada ketika ini.
>> TOMAS REIMERS: Jika anda tidak pernah mendengar atau kuliah jika anda tidak melihat
lagi, Dokumen Objek Model adalah asasnya bagaimana perkara-perkara yang diwakili.
Jadi HTML jenis kelihatan seperti pokok apabila anda sebenarnya menarik keluar.
Anda mempunyai elemen HTML di atas.
Anda mempunyai kepala dan badan.
>> Dan kemudian, dalam masa yang anda mempunyai segala-galanya.
Yang dirujuk sebagai DOM yang -
Dokumen Objek Model.
Jadi model yang mewakili objek dalam dokumen itu adalah satu cara yang mudah untuk berfikir
tentang itu.
Dan salah satu perkara yang hebat tentang jQuery ia benar-benar membuat menyeberangi
itu dan memanipulasi elemen dalam yang amat mudah.
>> Jadi mudah, sebenarnya, bahawa majoriti JavaScript perpustakaan atau jika tidak
majoriti, majoriti besar daripada orang-orang yang anda akan melihat benar-benar memerlukan jQuery jadi
bahawa mereka boleh menjalankan diri mereka semata-mata kerana jika anda tidak mempunyai jQuery, anda
akan membazirkan banyak masa cuba untuk memikirkan bagaimana untuk memilih tertentu
unsur-unsur dan bagaimana untuk melakukan perkara-perkara lain.
Dan perkara yang lain yang menarik mengenai jQuery adalah bahawa ia adalah pelayar salib serasi.
>> Jadi ingat kembali apabila kita berkata tidak semua pelayar melaksanakan
sesuatu dengan cara yang sama?
Ini adalah benar walaupun dalam JavaScript.
Dan salah satu perkara yang menarik mengenai jQuery ialah ia akan mengesan
pelayar dan mengesan kaedah yang sesuai.
>> Jadi, jika anda perlu untuk memilih satu elemen, Internet Explorer mungkin mengatakan anda
sepatutnya dilakukan dengan cara ini.
Firefox mungkin berkata yang betul cara ialah dengan cara ini.
jQuery tidak peduli.
Apabila anda memberitahu jQuery untuk memilih elemen ia akan memikirkan bagaimana ia
sepatutnya melakukannya dalam pelayar yang pengguna kini dalam, dan kemudian lakukan
dengan cara itu.
>> MIKE Rizzo: Jadi jangan kita bercakap tentang penggunaan jQuery sedikit.
Sama seperti PHP, jQuery mempunyai tertentu kesukaan bagi tanda dolar.
Jadi, anda akan mendapati bahawa apa-apa jQuery -
juga, bukan semua.
Anda kadang-kadang boleh menggantikan dolar mendaftar dengan jQuery perkataan.
Tetapi secara amnya, hanya kerana ia lebih pendek, setiap kali anda melihat jQuery menjadi
digunakan ia akan dengan tanda dolar.
>> Jadi di sini kami hanya menunjukkan satu permulaan pemilih bagi satu elemen dalam DOM.
Di sini, kami mempunyai tanda dolar diikuti dengan kurungan terbuka dan sebut harga.
Dan dalam sebut harga pergi selectors kami untuk unsur-unsur yang berbeza.
Sama seperti dalam CSS, kita diperlukan untuk selectors dapat gaya elemen yang berbeza
dalam halaman.
Mereka selectors berbeza menterjemahkan betul-betul ke dalam jQuery dan JavaScript,
untuk sebahagian besar.
>> Jadi di sini kita mempunyai foo dot.
Jadi, jika anda ingat dari kuliah, titik hanya bermakna kelas.
Jadi kita memilih elemen dengan kelas foo.
Jadi jika saya pergi ke hadapan dan membuka kami JavaScript konsol sini benar-benar cepat
hanya menunjukkan ia, jika saya hanya menaip tanda dolar, kita lihat bahawa ia adalah beberapa
fungsi yang muncul.
Dan ia hanya ditakrifkan oleh jQuery.
>> TOMAS REIMERS: Bagi anda yang tidak dikenali, konsol adalah alat yang
dalam Chrome, yang membolehkan anda, pada dasarnya, menjalankan JavaScript pada
halaman semasa.
Ini anda akan mendapati amat berguna apabila anda sebenarnya sedang debugging dan anda
perlu menjadi seperti, apa yang semasa nilai beberapa pembolehubah global atau apa
adalah sesuatu yang lain?
Ia adalah jenis seperti GDB dengan pengecualian bahawa anda boleh sebenarnya
memanipulasi elemen-elemen pada halaman dengan ia dengan cara yang lebih mudah.
Dan juga ia tidak, pada dasarnya, daftar dalam dengan anda sebelum ia apa-apa.
>> Jadi manakala, GDB mungkin menjadi seperti, adakah anda pasti anda mahu menjalankan langkah seterusnya?
Konsol dalam sebenar.
Jadi sebagai laman web itu memberikan dan melakukan apa sahaja yang ia lakukan, yang
majlis itu juga berjalan di sampingnya.
Dan anda boleh meletakkan kod menyalahkan ke konsol itu, yang akan
dijalankan pada halaman.
>> MIKE Rizzo: Jadi untuk memasukkan konsol, Saya rasa saya perlu secara ringkas
menyebut bagaimana untuk melakukannya.
Dalam masalah terakhir yang anda mungkin mempunyai ini digunakan Chrome memeriksa elemen
fungsi atau pandangan sumber halaman -
dan mereka boleh diakses hanya dengan betul klik pada halaman atau tertentu yang
unsur dan melakukan sama ada memeriksa elemen atau pandangan sumber halaman.
Kita juga boleh mengakses JavaScript konsol secara langsung oleh
memilih memeriksa elemen.
Konsol demikian maka anda hanya melanda di jauh di sebelah kanan.
>> Sebagai alternatif, anda boleh juga pergi ke bahagian atas sebelah kanan,
yang terputus pada skrin ini di mana ia mempunyai tiga bar melintang.
Dan anda turun ke alat dan kemudian konsol JavaScript
di sini di mana boleh melihat -
sekurang-kurangnya pada Windows -
pintasan adalah Kawalan Shift J. Jadi maka jika kita mahu untuk memilih unsur
dalam laman ini, seperti saya menunjukkan sebelum ini, kami melakukan tanda dollar parens terbuka
dan kemudian memetik.
>> Satu perkara yang menarik ialah, secara amnya, petikan tunggal dan petikan berganda adalah
ditukar.
Jadi ramai orang hanya menggunakan single sebut harga kerana mereka lebih cepat untuk menaip
daripada petikan berganda kerana anda tidak perlu tahan Shift.
Jadi saya hanya akan berbuat demikian sekarang.
>> Jadi saya mahu untuk memilih sesuatu dengan kelas.
Bekas, hanya kerana saya tahu bahawa sesuatu yang pada kita
laman web sekarang.
Dan saya tekan Enter.
Dan kita boleh melihat bahawa ia dipilih itu.
Jadi ia menunjukkan bahawa ia kembali objek itu.
Jadi, itu pilihan asas.
Jika kita mahu untuk benar-benar memanipulasi ia, anda perlu untuk memanggil sesuatu
pada pemilihan itu, yang kita akan masuk ke dalam kemudian.
>> TOMAS REIMERS: Jadi hanya melihat bahawa lebih mendalam, ini tidak berbeza
daripada fungsi panggilan yang telah dibuat dalam C. Nama fungsi di sini adalah
sedikit pelik.
Ia tanda dolar.
Ia hanya satu nama bagi suatu fungsi.
Tiada apa-apa yang istimewa mengenainya.
>> Kami mempunyai kurungan terbuka.
Kemudian, kita mempunyai satu hujah kita, yang dalam kes ini berlaku kepada menjadi tali,
yang merupakan pemilih untuk itu.
Dan kemudian, kita ada kita kurungan tertutup.
Itu sahaja.
>> Ia bukan yang jauh berbeza.
Walaupun, ia kelihatan sangat pelik.
Dan yang boleh, jenis, lekatan yang titik untuk ramai orang.
>> MIKE Rizzo: Jadi begitu juga, jika kita mahu untuk memilih elemen yang mempunyai ID,
sekarang kita ingin memilih oleh ID dan bukannya kelas.
Ia akan menjadi perkara yang sama di mana kita hanya melakukan tanda tajam untuk ID.
Jadi kita memilih di sini semua elemen-elemen yang mempunyai bar ID.
>> TOMAS REIMERS: Dan ini diperluaskan.
CSS yang meluas.
Sama seperti dalam CSS, anda boleh memilih semua pautan, yang mempunyai foo kelas.
Di sini, ia adalah perkara yang sama.
>> Anda boleh melakukan a.foo, yang akan memilih semua pautan dengan foo kelas.
Anda boleh melakukan bar tajam, yang akan pilih pautan dengan bar ID dan sebagainya
dan sebagainya.
Sebarang pemilih CSS adalah yang sah pemilih jQuery.
>> MIKE Rizzo: Yeah.
OK, jadi sekarang mari kita masuk ke dalam sedikit manipulasi yang boleh kita lakukan dengan
kami jQuery.
Jadi jQuery mempunyai jenis tertentu notasi di mana kita hanya menggunakan
titik pada akhir.
Dan anda boleh memikirkan ini seperti dalam C bagaimana kita mempunyai structs berbeza.
Dan menceburi bidang structs, anda akan menggunakan dot untuk mendapatkan ke dalam mereka.
>> Ini, jenis, perkara yang sama.
Hanya kini kita mempunyai fungsi dalam ini pemilih yang kita boleh memanggil ia.
Jadi di sini, contoh pertama anda boleh lihat adalah pemilih CSS.
Dan pada dasarnya, apa yang adalah ia terpakai elemen CSS pertama ini
perkara yang anda pilih -
elemen ini yang anda pilih -
dengan nilai itu.
>> TOMAS REIMERS: Jadi terjemahan mudah yang akan menjadi jika jQuery, pada dasarnya,
hanya mengambil foo.
Dan kemudian dalam CSS berkata, warna merah dan dekat.
Ia adalah idea yang sama.
Apa yang dilakukan adalah ia dipilih semua elemen foo.
Dan kemudian ia digunakan.
Jenis, warna harta adalah sama dengan merah.
>> MIKE Rizzo: Begitu juga, kita juga boleh mengubah kandungan sebenar apa yang
menunjukkan kepada HTML halaman, yang adalah benar-benar sejuk kerana ia bermakna anda
laman web kini boleh benar-benar dinamik dan tidak perlu statik
bahawa anda mencetak menggunakan PHP pada awal-awal lagi
halaman yang dimuatkan.
Jadi di sini, jika kita mahu mengubah HTML ada di halaman tersebut, kami akan sekarang
memanggil fungsi HTML, yang kemudian hanya memasukkan apa sahaja yang kita nyatakan ke dalam
elemen yang kami dipilih.
Jadi di sini kita memilih elemen dengan foo kelas dan kemudian berkata ia HTML
kini ia hello dunia.
>> TOMAS REIMERS: Dan apabila anda berfikir tentang apakah aplikasi berguna
ini, seseorang CSS ini, perkara pertama yang anda boleh mula berfikir tentang adalah
dari segi walaupun jatuh bawah menu.
Anda boleh mula melakukan perkara-perkara seperti, apabila pengguna berlegar lebih bahagian atas
daripada ke bawah drop, anda ingin bahagian bawah kelihatan.
Betul?
>> Jadi dalam CSS, kita mempunyai ciri-ciri untuk membuat sesuatu yang boleh dilihat.
Perkara seperti tiada paparan kolon akan menjadikan ia tidak kelihatan.
Paparan blok akan membuat ia kelihatan.
Atau jika anda mahu pergi lebih mudah, anda ada perkara seperti setaraf penglihatan
dilihat, dan penglihatan sama tersembunyi.
>> Dan anda boleh mula melaksanakan perkara seperti jatuh bawah hak menu
selepas anda melalui idea bagaimana anda boleh memahami apabila ini dibuka,
yang kita akan melalui seketika sahaja.
Tetapi kita boleh mula melihat aplikasi ini.
Dalam erti kata yang sama, jika anda adalah untuk cuba dan melaksanakan, katakan, berbual
enjin dan anda ingin sedikit ucapan gelembung datang apabila anda telah
mendapat mesej baru, sebaik sahaja anda mendapatkan mesej baru, anda boleh membuat sedikit
ucapan gelembung datang dengan mengubah HTML halaman, betul?
Dengan menambah bahawa ucapan gelembung tambahan dengan teks tambahan di sana.
Yeah?
>> PENONTON: Jadi, anda akan membenamkan ini dalam kod HTML dalam jenis seperti
[Didengar]?
>> MIKE Rizzo: Betul.
Ya, kita akan mendapat yang dalam sedikit.
Ya, ia adalah sama sedikit kepada PHP.
Tidak betul-betul serupa.
>> Satu perbezaan yang baik untuk membuat adalah apa ini sebenarnya mengedit apabila kita mengedit
halaman kerana ia tidak akan menjadi mengedit fail sebenar yang sedang
disimpan pada pelayan kerana dunia tidak mempunyai kebenaran
untuk mengedit fail anda.
Ini hanya mengedit apa yang di muka dan apa yang dipaparkan dalam
pelayar.
Jadi jika anda adalah untuk memuat semula halaman selepas, berkata, memotong sesuatu yang kita
melihat kita boleh lakukan dengan panggilan keluarkan, perkara yang kemudian akan muncul semula.
>> TOMAS REIMERS: Jadi salah satu cara untuk berfikir tentang ini adalah jika saya komputer anda dan
Mike adalah, jenis, pelayan.
Apa yang akan berlaku adalah saya akan meminta Mike, hey, boleh saya mempunyai salinan
laman web ini?
Dan dia akan memberi saya satu salinan pernyataan itu.
>> Tidak, ia bukan perkara yang asal.
Ia hanya satu salinan.
Dan kemudian ia akan menjadi seperti, oh, ada JavaScript sini.
Jelas sekali, saya perlu mengedit halaman untuk menjadi seperti ini.
Dan saya mengedit salinan anda.
>> Tetapi itu tidak melaksanakan salinan sebenar.
Dan jika saya bertanya dia lagi muat semula halaman, -
hey, boleh saya mempunyai satu lagi salinan bersih -
dia akan memberi saya satu salinan lagi bersih.
Dan kemudian, saya akan melakukan perkara yang sama seperti, oh, ini JS sini yang mengatakan
untuk menyunting laman ini.
Dan saya akan terus melakukan itu.
>> MIKE Rizzo: Jadi satu perkara yang benar-benar sejuk yang anda boleh lakukan dengan jQuery adalah
sebenarnya menambah jenis animasi ke halaman anda.
Saya tidak tahu jika anda pernah dilihat di mana anda cuba untuk isi borang
dalam talian dan anda tidak mengisi perkara yang betul.
Jadi satu perkara yang kecil slaid ke bawah di bahagian atas dan mengatakan anda
tidak melakukan ini dengan betul.
Sila cuba sekali lagi.
Dan kemudian, ia mungkin walaupun hanya slaid ke atas.
>> Ternyata jQuery telah membina dalam fungsi yang membuat semua itu
animasi benar-benar, benar-benar mudah.
Jadi ada pertama yang pudar fungsi keluar, yang
anda boleh memanggil sesuatu.
Dan ia adalah satu cara untuk menukar CSS daripada elemen dengan cara yang animasi.
Jadi ia mengambil apa sahaja elemen anda memanggilnya melenyapkan pada.
Dan kemudian, perlahan-lahan perubahan kelegapan ia itu sehingga ia pergi sepenuhnya telus.
>> TOMAS REIMERS: Yang popular lain adalah slaid ke bawah, yang akan membuat
sesuatu yang muncul dengan gelongsor ke bawah.
Jadi dalam hal menu drop down, sekali lagi, apabila kita belajar bagaimana untuk mengesan
apabila ini telah berlegar lebih, anda hanya boleh memberitahu bawah ini
sebahagian slaid ke bawah sekarang.
Dan kemudian, ia akan muncul oleh tergelincir ke bawah.
>> MIKE Rizzo: Dan kemudian, jika anda hanya mempunyai beberapa jenis animasi diingat bahawa
jQuery tidak semestinya memberi.
Sebagai contoh, katakan jQuery tidak menyediakan anda dengan slaid
ke bawah dan slaid ke atas.
Nah, katakan anda mahu slaid sesuatu dari sebelah kiri atau dari
yang betul seperti CS50 halaman utama tidak setiap kali
anda pergi ke panel yang baru.
Anda akan maka mungkin perlu melaksanakan sendiri menggunakan
bernyawa fungsi dalam jQuery.
>> Jadi begitu juga, anda hanya bernyawa.
Dan kemudian, di dalamnya ia mengambil kamus nilai yang berbeza
yang anda sepatutnya untuk lulus.
Jadi di sini, jika kita mahu bernyawa elemen foo seperti yang lebarnya sama ada
mengembang atau kontrak kepada 80 piksel, bergantung kepada apa yang saat ini.
Kami hanya akan lulus bahawa sebagai hujah di dalamnya.
>> Bernyawa juga mempunyai beberapa hujah-hujah lain bahawa anda boleh lulus, misalnya,
kelajuan animasi yang anda mahu memberikannya.
Dan untuk itu, saya hanya akan mengatakan cepat Google jQuery bernyawa.
Dan kemudian, membesarkan halaman ini, anda boleh melihat ia mendapat sekumpulan berbeza
ciri-ciri yang anda boleh memindahkannya.
>> Dan saya menggalakkan anda - setiap kali anda datang mencari sesuatu yang anda tidak
tahu atau hanya ingin mengetahui lebih lanjut tentang kaedah tertentu yang anda boleh menghubungi
pada sesuatu -
hanya Google ia. jQuery amat didokumentasikan dengan baik.
Dan sering kali terdapat banyak contoh yang mereka berikan untuk anda.
Jika kita tatal ke bawah -
ke bawah -
yang boleh kita gunakan, juga.
>> Sekali lagi, apabila pemaju benar-benar pergi melalui masalah penulisan yang
perpustakaan, mereka biasanya ingin seseorang untuk menggunakannya.
Jadi bersama akan menjadi dokumentasi yang.
Dan dokumentasi yang biasanya boleh didapati di halaman projek itu, yang merupakan
mengapa kita memberi anda bahawa laman asal dalam awal, yang menghubungkan anda ke
laman projek supaya anda boleh lihat dokumentasi itu.
>> Biasanya, halaman projek dalam kes daripada [didengar], ia memberitahu anda yang
Nama-nama kelas.
Dalam kes JavaScript, ia memberi anda nama fungsi.
Dengan cara itu, jika kita tatal ke atas ke atas, nota sampingan yang cepat kepada fungsi adalah
setiap kali anda melihat fungsi dilaksanakan seperti ini dengan keras
kurungan di tengah-tengah, yang cara bahawa harta yang tidak diwajibkan.
Hanya ekor.
Saya lihat banyak soalan tentang itu.
>> Jadi di sini kita dapat melihat bahawa bernyawa mengambil harta
sebagai satu perdebatan yang perlu.
Dan segala-galanya adalah pilihan.
Nota sampingan -
anda boleh memikirkan ini, jenis daripada, seperti laman manusia.
Laman Man adalah dokumentasi untuk C dan untuk banyak perkara-perkara lain, juga.
>> MIKE Rizzo: Oleh itu, kita telah belajar bagaimana untuk menukar CSS berbeza pada halaman,
bernyawa, dan mengeluarkan menambah HTML.
Tetapi salah satu yang benar-benar yang paling berkuasa perkara mengenai JavaScript
dan terutamanya jQuery -
apa yang membolehkan anda lakukan adalah bertindak balas terhadap elemen yang berbeza yang berlaku.
Sebagai contoh, di sini kita mempunyai satu pengendali peristiwa.
Dan itu hanya bermakna bila-bila masa ini Sekiranya berlaku, kita mengendalikan ia dalam
cara tertentu.
>> Jadi di sini, acara jQuery generik pengendali adalah titik pada.
Dan kemudian, perkara pertama yang anda berikan adalah apa acara yang sepatutnya
akan mendengar untuk.
Jadi di sini, ia adalah klik yang kami menunggu.
>> TOMAS REIMERS: Sebagai alternatif, anda mempunyai pada hover, yang merupakan satu yang sangat popular.
Jadi kembali ke drop down menu saya idea.
Anda akan mempunyai satu atas pada hover.
Dan kemudian anda boleh mengubah itu.
>> MIKE Rizzo: Betul.
Dan kemudian, apabila ini berlaku, ia hanya melaksanakan fungsi ini yang kita berikan
sebagai hujah dan ia tanda hello atau hi.
>> TOMAS REIMERS: Jadi dalam kes JavaScript, ini adalah tempat yang kita perlu
menghindari diri sendiri daripada C. Kita boleh sebenarnya mengambil berfungsi sebagai hujah.
Dan terdapat banyak benar-benar cara yang rumit untuk melakukan ini.
Kami akan menggalakkan satu cara, yang anda boleh menentukan
berfungsi di sana.
>> Oleh itu, apabila anda meminta untuk berfungsi sebagai parameter, anda pada dasarnya hanya
akan menentukan fungsi di tempat kejadian.
Dan cara anda menentukan fungsi dalam JavaScript adalah anda
harfiah mengatakan fungsi.
Kemudian, biasanya, nama bagi fungsi tersebut.
Tetapi kita tidak akan untuk rujukan fungsi ini sekali lagi.
Oleh itu, kita serahkan bernama.
>> Kemudian kurungan, maka kerinting yang pendakap, dan kemudian kod dalam itu.
Oleh itu, kita memahami tin ini menjadi sedikit mengelirukan.
Oleh itu, kita memberi anda bentuk umum apa yang seorang pengendali peristiwa kelihatan seperti
di bawah, yang pada acara.
Dan kemudian, kod anda di dalam itu.
>> MIKE Rizzo: Adakah terdapat apa-apa soalan mengenai ini?
Ini boleh menjadi sedikit mengelirukan kali pertama anda melihatnya.
>> TOMAS REIMERS: Anda benar-benar ingin membuka fail dan menunjukkan kepada mereka beberapa
jQuery sekarang?
>> MIKE Rizzo: Ya, mari kita buat itu.
OK.
>> TOMAS REIMERS: Jadi sekarang kita di dalam perkakas.
Dan apa yang kita lakukan adalah kita telah mengambil kebebasan mewujudkan kedua-dua index.html
fail, yang menghubungkan ke fail JavaScript.
Dan kita boleh membuka -
yeah.
Nah, ia dua perkara.
>> Yang pertama ialah ia menghubungkan kepada fail JavaScript.
Dan kita akan melihat bahawa di sini.
Kita lihat bahawa dalam ketua Dokumen HTML, terutamanya.
Jadi, anda akan melihat bahawa terdapat kita, pada dasarnya, katakan MPP,
yang bermaksud sumber.
Dan itu URL.
>> Jadi di sini anda boleh mengatakan kita telah termasuk jQuery.
Dan kita juga telah menyertakan skrip.
Cara lain untuk memasukkan JavaScript bahawa anda boleh termasuk skrip sebaris
tag yang kita ada di bahagian bawah di mana ia kata jenis skrip adalah teks JavaScript.
>> Oleh itu, kita katakan, mendengar, kami kira-kira untuk memasukkan skrip.
Dan jenis skrip yang JavaScript, yang merupakan jenis teks.
Sangat mudah.
>> MIKE Rizzo: Jadi ini, jenis, mendapat untuk soalan anda tentang bagaimana kita termasuk
JavaScript dalam fail kami kerana apabila kita telah PHP, kita melakukan sesuatu seperti ini.
Dan kemudian, mempunyai fungsi PHP kami - katakan saham melakukan
sesuatu dengan yang -
pergi di sana.
Walau bagaimanapun, sekarang kita mempunyai tag skrip yang kita berikan, yang sebenarnya
sebahagian daripada HTML itu sendiri kerana ia tidak berpura-pura menjadi fail HTML seperti ia
adalah dalam PHP kerana jika anda benar-benar pergi dan melihat sumber halaman,
anda akan melihat tag script di sana dengan JavaScript yang berkaitan dengan
mereka dalam itu.
>> Demikian maka, jika kita mahu menulis beberapa JavaScript -
mari kita katakan kita mahu mengubah tubuh kerana sekarang saya tidak mempunyai
mana-mana tag lain yang saya boleh benar-benar mengedit selain badan.
Mari kita hanya mengatakan saya mahu menukar CSS itu.
Oleh itu, kita akan teruskan dan perubahan warna kepada merah.
>> Jadi saya menyimpan fail.
Mari kita kembali ke halaman web kami, menyegarkan, dan ia secara automatik
kerana ia tidak kelihatan seperti ia menunggu sama sekali kerana kami tidak mendengar
untuk sebuah acara atau apa-apa seperti itu.
>> TOMAS REIMERS: Jadi, jika kita kembali kepada yang memfailkan khususnya - HTML
memfailkan - apa yang anda akan lihat ialah kita perlu -
ingat bahawa ini dimuatkan, jenis, kronologi.
Jadi kita perlu pertama kepala. ia memuatkan kedua-dua fail.
Kemudian kita pergi kepada badan.
Dan kita melihat dunia hello.
Oleh itu, kita menjadikan dunia hello.
>> Dan kemudian sesuatu yang kita mempunyai adalah kita mempunyai tag skrip.
Jadi ia berjalan tag skrip kerana ia tidak memberitahu ia menunggu apa-apa.
Dan itulah yang paling asas cara untuk menjalankan JavaScript.
>> Dengan itu berkata, anda boleh meletakkan skrip tag dalam pengepala hanya
untuk menunjukkan ketika ini?
Dan menjalankan itu.
Kita akan melihat bahawa ia tidak berubah warna.
Dan ini adalah salah satu daripada masalah-masalah JavaScript adalah bahawa perkara-perkara yang dimuatkan
dalam susunan kronologi.
>> Jadi pada masa kod yang berjalan, kami dipilih -
kembali -
tag badan.
Tag badan tidak wujud lagi kerana JavaScript adalah selaras dengan HTML.
Jadi pelayar adalah seperti pilih badan.
Tidak ada benda itu lagi.
Oleh itu, kita boleh mengabaikan itu.
Dan kita terus.
>> Dan kemudian kita menentukan tag badan.
Tetapi itu tidak pernah mendapat dikemaskini.
Oleh itu, apabila anda melaksanakan skrip tag, pastikan anda meletakkan
selepas tag badan.
Slaid berikutnya.
>> MIKE Rizzo: OK.
Oleh itu, kita berubah sesuatu.
Tetapi ia tidak kelihatan seperti ia bertindak balas kepada kami di semua kerana ia hanya jenis
ia lakukan sebaik sahaja ia dimuatkan halaman.
Jadi sekarang, daripada melakukan ini, mengapa kita tidak menambah pengendali peristiwa.
>> Jadi mari kita buat sesuatu kepada badan lagi.
Dan mari kita mengatakan bahawa kita melakukannya -
klik.
Kami akan menambah fungsi.
>> TOMAS REIMERS: Mari perubahan ia menjadi warna merah lagi.
Mengapa tidak?
>> MIKE Rizzo: Ya, mari kita perubahan 'warna kepada merah lagi.
Baiklah.
Jadi mari kita memuat semula halaman.
OK, kita lihat -
seperti yang dijangkakan, ia tidak menjadi merah yet.
Tetapi kita boleh teruskan dan klik.
>> TOMAS REIMERS: Dan ia menjadi merah.
>> MIKE Rizzo: Dan ia menjadi merah seperti yang diharapkan.
>> TOMAS REIMERS: Dan kita boleh melihat bagaimana kita boleh mula membina asas
interaksi.
Perkara-perkara lain yang kita mungkin mahu lakukan ialah, jika kita tidak mahu membuat badan
warna merah, mari kita membuat HTML latar belakang warna merah.
Hanya supaya ia CSS yang sama.
>> Dan apabila kita mengubahnya, kita boleh melihat ini kesan yang sangat dramatik mengubah
seluruh halaman.
Jadi sekali lagi, jika anda melaksanakan sesuatu, anda boleh mempunyai satu komponen
yang bertujuan untuk diklik.
Katakan butang Keluar dan komponen keseluruhan yang lain,
yang bertujuan untuk bertindak balas.
Jadi, anda akan mengeluarkan tetingkap apabila itu berlaku.
>> MIKE Rizzo: OK.
Sama seperti contoh -
anda tidak dapat melihat ini lebih awal -
Saya hanya akan menunjukkan kepada anda apa yang kelihatan suka apabila kita menyembunyikan sesuatu.
Jadi saya akan teruskan dan jangan slaid ke atas.
>> TOMAS REIMERS: Ingin mengakhiri bahawa dalam Jenis perenggan sebelum kita berbuat demikian?
>> MIKE Rizzo: OK.
Ya, mengapa tidak kita lakukan yang hanya begitu kita boleh memilih ia lebih sedikit.
>> TOMAS REIMERS: Dan mari kita memberikan kelas.
>> MIKE Rizzo: Yeah.
OK, jadi mari kita lihat.
Sebaliknya memilih badan sebenar sekarang, saya hanya akan memilih segala-galanya dengan
kelas hello, yang di sini kita hanya mempunyai satu.
Oleh itu, kita tidak perlu bimbang tentang itu.
>> Jadi saya akan menyegarkan ia.
Saya akan teruskan dan klik.
Dan ia, jenis, melakukan satu slaid pelik sehingga perkara, yang tidak kelihatan yang
menarik.
Secara amnya, mereka kelihatan cukup bagus.
Saya rasa, ini - untuk beberapa sebab - tidak.
Saya hanya akan melakukan pudar keluar jadi anda boleh melihat bahawa juga.
Jauh lebih bagus.
>> Dan kemudian, jika saya membuka JavaScript memujuk lagi dan kita mahu melihat apa yang
ia kelihatan seperti apabila kita pudar ia masuk
Sekarang, saya hanya memanggil pudar dalam padanya.
Dan ia pudar kembali masuk
>> Begitu juga, kita boleh sebenarnya juga lulus hujah untuk pudar dalam atau melenyapkan,
yang, jenis, kelajuan itu.
Jadi mari kita pergi ke hadapan dan mengatakan kita mahu ia pergi perlahan-lahan pudar masuk
Jadi saya rasa ia masih seolah-olah pantas.
Tetapi ia adalah lebih perlahan daripada sebelumnya.
>> TOMAS REIMERS: Dan jika anda ingin mencari maklumat lanjut mengenai perkara-perkara ini, sekali lagi,
hanya pergi ke dokumentasi jQuery itu, yang kami telah memberikan kamu, dan membaca
melalui ini.
Mereka mendokumenkan fungsi mereka sangat baik.
>> MIKE Rizzo: OK.
Jadi saya rasa mari kita kembali kepada ini.
Dan kita boleh bercakap tentang halaman terakhir kami.
Nah, kita boleh selesai dengan Bootstrap.
Dan kemudian kita akan membukanya untuk beberapa soalan.
Dan jika anda mempunyai sebarang idea-idea yang anda ingin mencuba untuk membuang dan melihat
jika kita boleh melaksanakannya dengan JavaScript cepat.
>> Jadi benar-benar cepat tentang Bootstrap, yang telah secara automatik termasuk dalam
masalah terakhir anda ditetapkan dalam folder CSS dan benar-benar dikaitkan dengan dalam anda
header.PHP.
Jadi anda boleh menambah kelas yang ditakrif dalam Bootstrap kepadanya.
Dan ia akan digelar secara automatik perkara-perkara yang sewajarnya.
>> TOMAS REIMERS: Jadi Bootstrap adalah sangat perkara ajaib yang dibangunkan oleh orang
di Twitter.
Dan apa yang ia bertujuan untuk lakukan ialah -
sebelum laman web benar-benar sukar untuk membuat kelihatan bagus, terutamanya apabila kita mempunyai
banyak komponen yang sama.
Jadi banyak butang pada web kelihatan sama.
>> Banyak medan teks boleh dibuat kepada kelihatan lebih baik daripada teks standard
bidang yang anda mungkin tahu dari benar-benar laman web lama atau benar-benar kurang dibuat
laman web, yang hanya kelihatan seperti literal kotak teks-apa bentuk teks
bayangan atau apa-apa jenis bagus garis.
Jadi apa Bootstrap lakukan ialah ia berkata, baik, kami mempunyai banyak gaya yang sama.
Mengapa kita tidak membuat satu set umum CSS dan satu set biasa JavaScript sebagai
juga, yang boleh mendandan sebagai adalah dan yang boleh memberi orang perkara seperti penurunan
down, yang boleh memberi orang perkara seperti modals.
>> Modal adalah apa yang muncul di atas halaman bila-bila masa ia tegas bercakap
sesuatu yang menghalang lanjut interaksi sehingga anda
berinteraksi dengannya.
Sesuatu seperti ini, adakah anda pasti anda mahu memadam perkara ini?
Anda tidak boleh benar-benar apa-apa lagi sehingga anda mengatakan ya atau tidak.
>> Ia mengambil semua ini dan ia dibungkus ia bersama-sama dan berkata, di sini kita pergi.
Orang ramai kini boleh menggunakan ini.
Dan anda boleh merasa lebih di getbootstrap.com.
Ia secara automatik termasuk dalam masalah terakhir anda ditetapkan.
Dan anda lebih daripada dialu-alukan untuk menggunakannya pada projek akhir anda.
Dan jika anda mahu mengikut yang pautan ke mendapatkan Bootstrap.
>> Anda akan melihat di sini ialah Bootstrap tapak CSS.
Anda akan melihat Bootstrap.
Dan jika anda tatal ke bawah, anda akan melihat bagaimana untuk memuat turun, bagaimana untuk
memasang, dan sebagainya.
>> MIKE Rizzo: Dan anda juga boleh, cukup menarik, menyesuaikannya untuk
berbuat apa sahaja tema yang anda mahu.
Saya tahu bahawa sesuatu yang saya lakukan untuk saya projek akhir apabila saya mengambil kelas
telah menyesuaikannya.
Versi yang berbeza Bootstrap yang mempunyai skim warna yang berbeza dan
bentuk yang berbeza daripada beberapa perkara yang berbeza.
Jadi saya menggalakkan anda untuk bermain dengan itu.
Ia adalah jenis yang menyeronokkan untuk dilakukan.
>> TOMAS REIMERS: Mencari di bahagian atas sekali lagi, ia adalah hampir sama dengan Fon
Tapak Awesome.
Banyak dokumentasi akan mula kelihatan sama apabila anda telah
dilihat cukup ia.
Jadi di sini kita mempunyai CSS komponen ini.
Dan anda akan melihat bagaimana ia boleh mendandan sesuatu.
Jadi, jika anda klik pada meja, sebagai contoh, anda boleh terus membuat
jadual cukup hanya dengan menambah jadual kelas dengannya.
>> Perkara yang sama untuk butang.
Jika anda hanya menambah BTN kelas dan BTN lalai atau BTN utama, anda boleh
mendapat apa-apa salah satu daripada butang ini dengan gaya pra-dibuat.
Dan kemudian, jika anda sedang mencari untuk sesuatu yang lebih kompleks daripada sekadar
restyling apa w sudah mempunyai, lebih pada tekan JavaScript merentasi kita atas
mempunyai banyak komponen.
>> Jadi di sini kita mempunyai peralihan, modals, dropdowns, tab, dan petua.
Tooltip A adalah apa yang muncul di bawah anda tetikus apabila anda membawa sesuatu.
Popovers, amaran, butang, lipat Accordions adalah apa yang
sedang mereka biasanya dipanggil.
Karusel, yang flip melalui imej seperti.
>> Jadi mereka adalah komponen daripada Bootstrap.
Saya akan menggalakkan anda untuk sangat pergi melihat mereka.
Ada satu komponen JavaScript dan komponen CSS.
Jangan ragu untuk menggunakan mereka seperti yang anda akan.
Kami tidak akan pergi terlalu jauh ke dalam mereka kerana kita rasa dokumentasi
adalah benar-benar dilakukan dengan baik.
Dan yeah.
Adakah anda mempunyai sebarang soalan mengenai itu?
>> MIKE Rizzo: Jadi sebagai benar-benar cepat sampingan, reka bentuk laman web ini yang
kita cepat meletakkan bersama-sama untuk persembahan ini adalah
sebenarnya dilakukan dengan menggunakan Bootstrap.
Seperti yang anda lihat, apabila kita klik pada ini tab yang berbeza, kami tidak pernah benar-benar
meninggalkan laman index.html ini semasa.
Jadi apa yang kita ada adalah divs berbeza dalam index.html ini.
Dan kemudian, apabila kita klik yang berbeza tab, ia hanya berubah
yang menunjukkan seseorang.
>> Jadi sewajarnya kedudukan mereka, menukar HTML halaman supaya
tab semasa ditandakan sebagai aktif supaya ternyata berbeza dan kelihatan
benar-benar baik.
>> TOMAS REIMERS: Jadi yang semua dilakukan tanpa kita menulis hampir apa-apa CSS.
Kita juga melihat tandukan di bahagian atas, yang warna-warna yang oleh kami.
Tetapi sebenar meletakkannya di bahagian atas halaman dan membuat
ia adalah tatal Bootstrap.
Dan kemudian walaupun untuk perpustakaan lain - ini bukan salah kita bercakap tentang tetapi satu
anda boleh Google jika anda mahu.
Ini dipanggil prettify.js.
Dan ia akan menyerlahkan sintaks kod anda untuk anda menggunakan kedua-dua CSS dan JavaScript.
>> Perkara terakhir yang kita mahu bercakap tentang sebelum kita melepaskan anda keluar ke
dunia untuk melihat perpustakaan untuk memikirkan bagaimana untuk menggunakan mereka dan, diharapkan,
baca dokumentasi dan mencari apa yang anda keperluan ialah bagaimana untuk mencari perpustakaan.
Jadi yang pertama adalah kami hanya akan menolak Google.
Pergi Google.
>> Itu betul-betul apa yang kita lakukan apabila kita perlu melakukan sesuatu ialah kita Google.
Adakah terdapat perpustakaan JavaScript yang membolehkan saya untuk memanipulasi masa di
cara yang berguna?
Jadi, jika saya tahu bahawa sesetengah pengguna mewujudkan akaun di sini, dan ini adalah
masa semasa, bagaimana saya boleh mengira perbezaan dengan yang tanpa perlu
mengira sendiri?
Jadi ini sebenarnya adalah perkara biasa, JavaScript perpustakaan masa.
Dan di sini kita Moment.js-- satu yang paling popular.
>> Jika kita memerlukan perpustakaan untuk memanipulasi sesuatu seperti warna dapat
menjana sekumpulan warna rawak -
mungkin, untuk menjana gaya atau sesuatu -
kita boleh Google sesuatu seperti JavaScript perpustakaan warna.
Dan saya pasti kita akan muncul dengan seribu dan salah seorang daripada mereka.
Anda dialu-alukan untuk membaca melalui mereka.
>> Jadi kebanyakan perkara - apabila anda mencari mereka - akan di-host di salah satu daripada
laman web yang kod tuan rumah.
Mereka adalah beberapa orang popular.
Yang paling popular, dengan ini, adalah github.com.
Dan jika anda pergi ke GitHub ia sebenarnya mana Menormalkan dihoskan.
Jadi, jika anda ingin kembali kepada yang.
Menunjukkan kepada mereka itu.
>> MIKE Rizzo: Dan itulah sebenarnya di mana ini dihoskan juga, jika anda perasan.
>> TOMAS REIMERS: Yeah.
Jadi, jika anda pergi ke Menormalkan dan pergi ke GitHub.
Adakah itu?
>> MIKE Rizzo: perkara kucing Itulah sedikit adalah simbol GitHub itu.
>> TOMAS REIMERS: Oh.
Jadi GitHub menggunakan kaedah yang dipanggil Git kod kedai.
Adakah anda tidak tahu apa yang sedang atau ia menakutkan anda, itu denda.
Anda tidak perlu tahu apa yang Git adalah kerana GitHub mempunyai butang Muat turun
di sebelah kanan bawah.
>> Perkara lain yang berguna untuk mengetahui mengenai GitHub adalah kebanyakan produk
akan mempunyai membaca saya.
Dan jika mereka tidak mempunyai laman web, yang membaca saya akan bercakap tentang bagaimana anda
install, bagaimana anda menggunakannya, apa yang tidak, dan sebagainya, dan sebagainya, dan sebagainya.
Apa yang kami pada dasarnya menjadi berjalan anda melalui.
>> MIKE Rizzo: berhenti Internet.
>> TOMAS REIMERS: Itu denda.
Terakhir dua perkara yang kita mahu untuk bercakap tentang -
kita telah berbincang mengenai Git -
adalah penyelesaian masalah.
Dan yang ini tidak begitu relevan untuk produk akhir kerana ia adalah
apabila anda meninggalkan 50.
Dan apabila anda menghadapi produk melaksanakan perpustakaan atau melaksanakan
projek anda sendiri, anda akan mempunyai soalan atau anda
akan mencari soalan.
>> Sekali lagi, Google ia.
Itu betul-betul apa yang kita lakukan.
Ini akan bunyi bodoh.
Tetapi betul-betul, kita Google ia.
Dan sekali lagi, salah satu perkara yang pertama anda biasanya akan menghadapi adalah
stackoverflow.com, yang merupakan indah soalan dan penglihatan jawapan.
>> Ia indah kedua-dua kerana anda boleh pos soalan-soalan dan mencari
jawapan tetapi juga kerana ia telah mempunyai banyak
pra-penduduk kandungan di sana.
Jadi biasanya apabila anda Google pengaturcaraan soalan dalam pertama
pasangan mencecah anda mungkin telah menjalankan ke dalamnya semasa set masalah anda.
>> Dan kemudian, perkara terakhir yang benar-benar ringkas adalah JSFIDDLE, yang - hari ini kita telah
telah melakukan banyak kerja dengan JavaScript HTML CSS.
JSFIDDLE adalah aplikasi web, yang pada asasnya membolehkan anda untuk mengambil HTML anda, ANDA
JavaScript bawah kiri, dan kanan atas CSS anda.
Dan kemudian ia boleh membuat cepat menyebabkan IT dan melihat bagaimana ia berinteraksi.
Ia amat berguna apabila orang cuba untuk melakukan bukti konsep seperti
ini adalah bagaimana anda akan melakukan drop down menu.
Mungkin mendedahkan cepat atau apa sahaja.
>> MIKE Rizzo: Jadi mari kita pergi Teruskan dan klik ini.
Nota ringkas -
manakala, sebelum kami lakukan di klik.
Ternyata JCorey Korea juga telah terbina di klik acara pengendali bahawa ia
menggunakan hanya kerana ia angka anda akan mahu melakukan banyak perkara
apabila anda mahu klik sesuatu.
>> Begitu juga, ia juga mempunyai hover a.
Tetapi untuk mendapatkan skop penuh mereka, melihat jQuery
dokumentasi dan melakukannya.
Saya lakukan sesuatu yang bodoh di sini.
>> TOMAS REIMERS: Saya mempunyai benar-benar cepat program di sini, yang mengatakan
butang di klik.
Maka kita mempunyai untuk gelung.
Untuk i adalah kurang daripada 404.
Ia hanya akan muncul mesej amaran.
>> MIKE Rizzo: Dan apa yang yang kod 404 berdiri dalam HTML?
Adakah sesiapa yang ingat?
Tidak dijumpai, betul.
Chrome juga menambah ini kemas perkara di mana anda boleh -
>> TOMAS REIMERS: Kerana orang seperti Mike mula melakukan ini banyak dan
pengguna menjengkelkan, yang membolehkan anda untuk melihat info.
>> MIKE Rizzo: Yeah.
>> TOMAS REIMERS: Adakah kita mempunyai apa-apa soalan kira-kira ini, kira-kira JavaScript
perpustakaan, mencari perpustakaan, atau kelihatan apa pembangunan web
seperti di dunia sebenar?
Kami menjalankan menentang masa.
Jadi saya tidak pasti kita akan mempunyai masa untuk melaksanakan
melainkan jika ia benar-benar cepat.
Adakah kita yang baik?
>> MIKE Rizzo: Apa sahaja yang anda lelaki ingin untuk melihat benar-benar cepat dalam, seperti, dua
minit atau kurang?
>> TOMAS REIMERS: Apa-apa kita boleh menjelaskan?
Bagaimana untuk menulis dalam -
>> PENONTON: [didengar]?
>> MIKE Rizzo: Ya, jadi that's -
>> TOMAS REIMERS: Anda hanya boleh memukul Kawalan-U di laman web.
>> MIKE Rizzo: Oh, saya tidak tahu bahawa.
>> TOMAS REIMERS: Saya fikir, ya.
Kawalan-U. Yeah.
>> MIKE Rizzo: Oh, jadi itulah kod untuk laman web.
Tetapi jika anda benar-benar mahu muat turun kami fail dan segala-galanya, ia menjadi tuan rumah
pada github.com
>> TOMAS REIMERS: slash nama saya -
Tomas Reimers - slash Seminar CS50 sempang.
>> MIKE Rizzo: Dan anda boleh mencari semua di sana.
>> TOMAS REIMERS: Inilah yang GitHub kelihatan seperti, dengan cara itu.
Jadi sekali lagi, apabila anda melihat sumber terbuka projek, biasanya, mereka akan membaca
saya sana yang anda boleh membaca.
Dan jika anda kembali, anda akan melihat bahawa anda mempunyai zip muat turun, yang akan
membenarkan anda untuk memuat turun sumber kod untuk memasukkan
produk dalam perkara yang anda sendiri.
>> MIKE Rizzo: Ya, dan jika kita hanya klik pada index.html benar-benar cepat -
>> TOMAS REIMERS: Anda akan melihat inilah Kod sumber untuk laman web kami.
>> MIKE Rizzo: Juga, saya terlupa untuk menolak hak sebelum dengan meja besar ia
termasuk, tetapi ada juga meja daripada chmods bahawa kita termasuk
hanya untuk kejelasan anda.
Tetapi jika kita tatal sepanjang jalan turun ke bawah, kita tidak benar-benar melakukan yang
banyak dengan JavaScript barangan di semua dengan ini.
Ia semata-mata dari segala-galanya lain yang kita ada.
>> Jadi terima kasih kepada anda semua untuk datang dan mendengar.
Kami berharap ini adalah benar-benar membantu.
Jika anda mempunyai sebarang JavaScript berkaitan soalan atau hanya mahu bercakap tentang
apa lagi seperti apa yang lain perkara yang sejuk anda boleh lakukan dengan JavaScript, kita akan suka
untuk bercakap dengan anda.
>> TOMAS REIMERS: Jika anda mempunyai soalan tentang projek anda atau jika ini boleh menjadi
relevan, kami mungkin akan melekat di sekeliling sedikit selepas ini.
Tetapi selain daripada itu, mempunyai hujung minggu yang baik.
>> MIKE Rizzo: Ya, menikmati.
Lihat anda semua.
>> TOMAS REIMERS: Lihat ya.