>> TOMAS Reimers: Hi, semua orang.
Namaku Tomas Reimers.
>> MIKE Rizzo: Dan aku Mike Rizzo.
>> TOMAS Reimers: Kami adalah dua CS50s TS.
Dan hari ini kita memimpin seminar tentang JavaScript dan CSS untuk aplikasi web.
Jika Anda ingin mengikuti bersama, yang link di sebelah sana.
Dan apakah Anda ingin memasangnya pada komputer sebentar?
>> Ada link.
Ini adalah situs kecil, yang memiliki link ke semua sumber daya kita akan menjadi
menunjuk Anda hari ini dan juga memiliki banyak dari informasi yang berguna yang ditulis oleh kami untuk
baca lebih mendalam ketika Anda kembali, dan Anda mencoba untuk mengingat apa
tepatnya kita katakan, apa yang Anda berbicara tentang, dan sebagainya.
>> MIKE Rizzo: Baiklah.
Jadi mari kita mulai.
>> TOMAS Reimers: Jadi Anda ingin memulai?
OK.
>> MIKE Rizzo: Ya.
Jadi pertama-tama kita ingin memulai dengan luas gambaran tentang internet dan
mengajukan jenis ketika merancang situs web.
Sementara presentasi ini kami ingin masuk ke dalam JavaScript banyak banyak
nanti, kami ingin memulai dengan hanya, jenis, seperti pandangan mata burung
apa sebuah situs web dan bagaimana untuk berpikir tentang merancang sebuah
website untuk awal.
>> Jadi kalian, pada saat ini - dengan itu menjadi Jumat malam - harus memiliki
disampaikan keuangan CS50 Anda masalah set.
Mudah-mudahan, itu adalah selera yang baik apa pemrograman web dapat.
Tapi di sini kita ingin, jenis, berikan Anda rasa lain, juga.
>> TOMAS Reimers: Jadi hanya untuk rekap apa terjadi, ketika anda mengetik di URL Anda ke
web browser Anda, URL yang mendapat mendongak di komputer.
Dan komputer Anda terhubung ke komputer lain,
yang host situs web tersebut.
OK, jadi ketika Anda pergi ke google.com, Anda terhubung ke salah satu Google
komputer, yang memiliki file untuk google.com.
>> Ini kemudian meminta file tertentu.
Jadi, jika Anda pergi ke -
Saya tidak tahu -
example.com / index.html atau / test.html, Anda akan meminta
bahwa file tertentu.
Dan web server akan untuk kembali kepada Anda.
>> Kemudian, setelah Anda pergi melalui file itu -
setelah Anda mendapatkan komputer yang File - itu akan mulai
untuk membangun sebuah halaman web.
Jadi sekarang memiliki file HTML, yang semacam seperti
struktur dari halaman web.
File HTML juga bisa referensi File CSS, yang menentukan
gaya halaman web.
>> File JavaScript, yang mendefinisikan interaksi dengan halaman web.
File gambar, yang hanya gambar.
Dan mungkin link ke file HTML lainnya, yang kemudian dapat mengunjungi.
>> MIKE Rizzo: OK, bagus.
Jadi kalian memiliki semua, mungkin, susah payah mengatur host lokal Anda
pada mesin virtual Anda.
Dan itu, jenis, adalah lokal domain bahwa komputer Anda hanya host
untuk Anda di alamat IP Anda sendiri.
>> Jadi dalam hal itu, maka Anda dapat menambahkan untuk itu halaman web Anda sendiri.
Maksudku, di CS50 Finance, Anda harus memiliki menambahkan beberapa halaman HTML, yaitu,
semacam, dibungkus dalam bungkus PHP.
Tetapi pada akhirnya, apa halaman PHP Anda yang keluaran adalah HTML.
>> Tapi berpikir kembali ke awal dari PSET, kita harus mengatur
izin untuk segalanya, kan?
Jadi ini hanya pada dasarnya memungkinkan kita tahu yang dapat membaca, menulis, dan mungkin
mengeksekusi setiap file.
Jadi kita akan melakukan cepat - hm?
>> TOMAS Reimers: Jadi kita akan untuk melakukan demo cepat.
Jadi hanya untuk mengingatkan Anda, ketika Anda terhubung ke komputer Google -
siapa pun -
dan meminta sebuah file, komputer pertama perlu memastikan Anda berwenang
untuk benar-benar melihat berkas itu atau membaca bahwa mengajukan karena Anda tidak bisa hanya meminta
untuk setiap file di komputer itu, kan?
Itu akan menjadi bahaya keamanan.
>> Jadi file pada sistem yang kita gunakan, seperti alat CS50 ini, memiliki tiga
orang umum yang dapat memiliki izin untuk sesuatu.
Yang pertama adalah yang sebenarnya pemilik file tersebut.
Yang kedua adalah kelompok yang file milik.
Kami tidak akan fokus terlalu banyak tentang itu.
Dan hal terakhir adalah, semacam, seperti dunia atau seperti orang lain siapa
tidak spesifik untuk file itu dan tidak memiliki hak kepemilikan atasnya.
>> Jadi jika kita memiliki pemilik, grup, dan kemudian dunia.
Dan kemudian, untuk masing-masing kelompok ini, Anda dapat memiliki salah satu dari tiga izin,
OK, atau beberapa dari mereka.
Anda dapat memiliki hak akses baca.
Anda dapat memiliki hak akses yang benar.
Dan Anda dapat memiliki hak akses mengeksekusi.
>> Jadi dalam hal jenis file yang sebenarnya, baca izin seperti benar-benar membaca
isi file.
Sebuah izin yang tepat adalah menulis untuk mengatakan berkas.
Mengeksekusi izin menjalankan file seperti yang Anda lakukan ketika Anda menjalankan salah satu
proyek CS50 Anda.
>> Jadi, ketika kita berpikir tentang file seperti ketika kita perlu membaca HTML
File, yang perlu dunia dibaca, kan?
Agaknya, juga pemilik ingin untuk dapat mengedit file tersebut.
Jadi pemilik akan membutuhkan membaca dan menulis perizinan.
Mereka tidak benar-benar perlu mengeksekusi.
>> Group, kita akan memperlakukan sama dengan dunia untuk saat ini.
Jadi mereka perlu izin membaca.
Tapi mereka tidak perlu menulis atau mengeksekusi perizinan.
Dan sekarang, jika kita berpikir kembali ke mantan PSETs, apa yang kita sadari adalah semacam ini
dari tampak seperti biner, kan?
1 singkatan ya.
0 untuk tidak.
Dan kita benar-benar dapat menerjemahkan ini ke biner.
>> Jadi 110 dalam biner akan menjadi 6.
100 akan menjadi 4.
Sama dengan dunia.
Jadi nomor yang akan Anda dapatkan untuk izin untuk ini akan menjadi 644.
>> MIKE Rizzo: Dan jika Anda berpikir kembali ke ketika Anda chmod sesuatu, saya percaya
mereka menyerah masalah mengatur contoh di mana Anda bisa melakukan
sesuatu seperti chmod 644 dan kemudian nama file.
The 644 kemudian, Anda sekarang dapat melihat secara langsung mana yang berasal dari.
Jadi mudah-mudahan yang membuat bahwa sedikit lebih jelas.
>> Dan kemudian untuk kejelasan Anda pria -
oh yeah, di sini ini lagi.
Jadi 600 maka hanya akan menjadi contoh kita menyerah di sini di mana pemilik memiliki
hak akses baca dan kanan sedangkan kelompok dan dunia tidak memiliki izin
untuk mengakses file tersebut.
>> TOMAS Reimers: Dan kemudian kita harus cepat daftar izin umum.
Jadi direktori, Anda ingin untuk benar-benar chmod 711.
Cepat samping - untuk direktori untuk memiliki izin executable berarti dapat
untuk membuka direktori.
Images, CSS, JavaScript, HTML kebutuhan 644 karena, dasarnya, dunia
kebutuhan membaca perizinan.
>> Dan PHP, yang kalian telah melihat meskipun kami tidak akan berbicara tentang hal itu
ketat biasanya chmod dengan izin 600 karena itu dijalankan dengan
izin dari pemilik.
Setidaknya pada alat.
>> MIKE Rizzo: Jadi, jika Anda tidak secara khusus menentukan apa jenis file
Anda ingin benar-benar dalam pengaturan up presentasi ini -
kita punya masalah dengan hal ini karena semuanya tidak benar chmod -
Anda akan mendapatkan, jenis, a error terlarang bahwa situs web
tidak benar-benar memiliki izin untuk mengakses file apapun
Anda ingin mengakses.
Dan tentu saja, yang bisa diperbaiki - seperti dalam masalah set - dengan mengubah
perizinan tepat.
>> TOMAS Reimers: Dan komentar terakhir untuk pengembangan cepat lokal - kami
dibesarkan ini, tetapi kami hanya ingin untuk membawanya lagi -
jika Anda meminta server - host sehingga lokal, misalnya, com atau apa pun. -
dan Anda tidak menentukan file tertentu, file yang komputer Anda akan
untuk meminta disebut index.html.
Atau jika yang tidak ada, index.php.
>> Keren.
Jadi itu hanya rekap dari segala sesuatu, mudah-mudahan, yang telah kita pelajari di
bagian, dan kuliah, dan sejauh ini dalam CS50.
Dan sekarang kita akan mulai berbicara tentang perpustakaan khusus.
JavaScript dan CSS perpustakaan untuk aplikasi web.
>> Jadi salah satu alasan mengapa kita memiliki cepat perpustakaan adalah pemrograman -
ada banyak masalah dalam pemrograman, yang terus bermunculan
lagi, dan lagi, dan lagi.
Anda mungkin memperhatikan bahwa banyak situs web perlu kemampuan untuk memiliki drop down
menu, misalnya, atau butuh kemampuan memiliki tombol yang sangat standar
gaya, yang mungkin tidak hal yang termudah.
Sekarang bahwa Anda mulai masuk ke HTML, Anda menyadari bahwa tombol benar-benar dapat
terlihat sangat jelek jika Anda tidak melakukan apa-apa.
>> Jadi banyak orang telah menulis disebut perpustakaan.
Dan dalam konteks ini, mereka juga disebut kerangka.
Kita akan menggunakan dua bergantian.
Dan apa yang mereka adalah mereka pada dasarnya potongan premade kode -
baik CSS atau JavaScript -
yang mengambil banyak tim yang Anda miliki dalam coding.
>> Jadi mereka pra-menentukan sekelompok kelas atau pra-mendefinisikan banyak fungsi untuk
Kasus JavaScript, yang Anda dapat memanggil nanti.
Dan kemudian Anda dapat, semacam, dapatkan akses ke kode ini tanpa
harus melakukan apa pun.
Sebuah contoh dari perpustakaan adalah CS50.H. Itu perpustakaan kami berikan kepada Anda kembali
dalam satu minggu, yang memungkinkan Anda untuk melakukan hal-hal seperti itu getInt dan GetString
tanpa harus menulis kode apapun sendiri.
>> MIKE Rizzo: Baiklah.
Jadi di sini, seperti kita harus menyertakan di c kami file yang berbeda
perpustakaan, kita juga harus disertakan dalam HTML kita file perpustakaan yang berbeda.
Sebagai contoh, jika kita ingin menyertakan perpustakaan JavaScript spesifik di sini,
mungkin, salah satu yang kita telah menulis diri sebagai itu lokal host
disebut script.js, kami hanya menggunakan notasi ini.
>> Jadi kita memiliki jenis naskah equals JavaScript sumber equals
JavaScript.js.
Dan jika Anda berpikir kembali ke CS50 Anda masalah keuangan yang ditetapkan, jika Anda melihat ke dalam
header.php di folder template, Anda seharusnya melihat
beberapa di antaranya termasuk.
Jadi ini pertama - script -
adalah termasuk perpustakaan JavaScript.
Termasuk perpustakaan CSS sedikit berbeda.
>> Di sini, bukan script tag Anda memerlukan tag link.
Dan kemudian, jenis teks CSS sedikit berbeda.
Anda tidak selalu harus menyertakan style sheet rel.
Tapi saya pikir itu, secara umum, praktek yang baik.
>> Dan kemudian akhirnya, HREF, yang Anda mungkin melihat di ATAGs Anda untuk menghubungkan
di link yang berbeda hanya menspesifikasikan link dari mana untuk menemukan bahwa.
Sebagai contoh, jika kita ingin menghubungkan perpustakaan yang berbeda - katakan saja -
yang tinggal di styles.css.
Dan kami ingin menghubungkan bahwa dalam itu host di web, kita akan menyalin itu.
Dan kemudian tempel ke apapun kita miliki di sini sebagai gantinya.
>> TOMAS Reimers: OK, mudah-mudahan Anda Orang-orang sudah akrab
dengan cara menghubungkan CSS.
Anda harus melakukan itu pada set brown terakhir Anda.
JavaScript, beberapa dari Anda mungkin memiliki beberapa pengalaman dengan.
Beberapa dari Anda mungkin tidak.
>> Jadi untuk saat ini, tahu bahwa sebuah file JavaScript sangat banyak seperti file CSS di
arti yang dapat Anda link ke atau Anda dapat memasukkannya secara internal.
Dan itu memungkinkan Anda untuk hal-hal skrip.
Dan kami akan memandu Anda melalui sedikit dari JavaScript nanti.
>> Jadi menggunakan perpustakaan -
setelah Anda memasukkannya, seolah- sederhana seperti benar-benar memanggil
fungsi atau menambahkan nama kelas untuk itu.
Hal terakhir yang kita ingin berbicara tentang dalam hal perpustakaan -
dan ini lebih merupakan catatan teknis -
adalah lisensi open source.
Jadi, ketika Anda menemukan ini perpustakaan yang sebenarnya, Anda mungkin berpikir
pertanyaan seperti itu OK bahwa aku hanya menggunakan kode orang lain, terutama
karena itulah sesuatu yang kita sangat banyak bilang untuk tidak dilakukan di kursus ini.
>> Jadi dalam kasus lisensi open source, banyak pengembang -
setelah mereka telah menulis perpustakaan, yang mereka pikir bisa
membantu orang lain -
akan mempublikasikannya ke web dan memberikan lisensi.
Dan lisensi pada dasarnya mengatakan saya dengan ini pemberian izin untuk lainnya
orang untuk menggunakan software ini dengan jenis berikut
ketentuan.
>> Kami telah menyertakan link ke sebuah situs yang baik untuk membantu Anda memahami lisensi di
huruf Anda mengalami mereka.
Ketentuan umum adalah hal-hal seperti Anda dipersilakan untuk menggunakan perpustakaan saya jadi
Selama Anda memberi saya kredit.
Anda bebas untuk menggunakan perpustakaan saya asalkan jika rusak
Anda jangan salahkan saya.
Anda bebas untuk menggunakan perpustakaan saya begitu lama Anda tidak menggunakannya untuk membuat uang
untuk diri sendiri.
Ini adalah jenis umum ketentuan.
>> Untuk tugas akhir CS50 ini, mereka tidak harus menjadi super relevan karena
proyek yang menggunakan kalian mungkin lebih tepatnya, semacam, yang dikenal.
Tetapi ketika Anda benar-benar pergi keluar ke dunia dan mulai menggunakan perpustakaan, yang
mungkin atau mungkin tidak juga diimplementasikan sebagai beberapa yang lebih populer kita
akan akan melalui.
Ada baiknya untuk dapat memahami lisensi ini dan untuk
mengerti apa yang mereka maksud.
Dan akan kembali.
>> MIKE Rizzo: OK.
Jadi sekarang bergerak ke contoh CSS sebenarnya.
Pada titik ini sejauh ini, Anda mungkin tidak akan mengalami ini.
Tapi Anda mungkin telah menemui itu di kehidupan sehari-hari Anda di mana sesuatu
yang terlihat salah satu cara di satu browser mungkin tidak terlihat sama
cara browser lain.
>> Ini disebut browser browser kompatibilitas.
Dan itu semakin menjadi lebih dan lebih dari masalah, terutama karena
browser mengambil lebih dan lebih kebebasan untuk melaksanakan hal-hal yang mereka inginkan.
Jadi untuk mengatasi itu, ada sebenarnya perpustakaan besar yang disebut Normalize.CSS.
>> TOMAS Reimers: Kami termasuk link.
Pada titik ini, sangat membantu jika Anda memiliki laptop Anda di sana
melihat situs.
Dan kami memberikan ini kepada Anda tepat sekarang hanya karena final CS50
proyek benar-benar akan meminta Anda untuk menerapkannya
sama dan melalui browser.
>> Jadi hanya untuk menjaga di belakang Anda kepala, ini adalah perpustakaan yang indah
karena akan, semacam, standarisasi hal.
Di Firefox, sesuatu yang mungkin menunjukkan sebagai salah satu pixel ke kiri.
Dan kemudian Chrome dapat memutuskan yang benar-benar apa yang Anda maksudkan adalah 10 pixel
ke kiri.
Dan Anda ingin standarisasi ini.
Normalisasi benar-benar akan melakukan benar-benar baik pekerjaan untuk memastikan bahwa situs Anda
tampak sama di browser.
>> MIKE Rizzo: Jadi jika kita ingin hanya klik link benar-benar cepat dan menunjukkan
Anda apa yang terlihat seperti, Anda dapat men-download menggunakan
tombol Download raksasa.
Atau saya mendorong Anda untuk membaca lebih lanjut dengan mengklik link ini di bawah
sudut kanan.
>> TOMAS Reimers: Dan jika Anda benar-benar klik Read More di sana -
klik sumber di GitHub -
Anda benar-benar akan melihat open source lisensi pada LICENSE.md di sana.
Dan Anda akan melihat di sini adalah lisensi MIT sangat populer.
Sekali lagi, jika Anda membaca melalui teks, Anda akan dapat menemukannya di situs
kami direferensikan sebelum dan dapat memahaminya tanpa harus membaca
melalui jargon hukum.
>> MIKE Rizzo: OK, bagus.
Jadi itulah Normalisasi.
Kami ingin memberikan Anda yang benar-benar cepat.
Oh, apakah Anda memiliki pertanyaan?
>> AUDIENCE: Jadi, ketika Anda men-download, Anda hanya mengikuti kode yang mereka miliki
di bawah tombol Download?
>> TOMAS Reimers: Ya, jadi ketika Anda men-download -
>> MIKE Rizzo: Oh, itu adalah titik besar.
Jadi pertanyaannya adalah bagaimana kita benar-benar men-download itu?
Jadi, jika kita klik link tersebut, kita melihat bahwa itu benar-benar muncul
kode sumber.
Jadi untuk melakukan hal ini, apa yang kita bisa lakukan adalah klik Save As.
Save As dan yang seharusnya membuka file.
Dan kemudian kita bisa memilih untuk menyimpan sebagai normalize.CSS.
Dan kemudian Anda harus menghubungkannya dalam -
>> TOMAS Reimers: Cara yang sama Anda link dalam file lain.
Dan sekali Anda link dalam, apa yang baik tentang Normalisasi itu akan benar-benar
mengurus semua hard bekerja dengan sendirinya.
Yang berarti bahwa Anda tidak memiliki untuk menambahkan kelas.
>> Anda tidak perlu melakukan apa pun yang aneh.
Ini akan menormalkan tanpa Anda melakukan apa-apa lagi.
Ya, Anda harus memasukkannya.
Google Chrome tidak merespons.
>> Hanya cepat samping -
Saya melihat kita melompat ke dalam ini.
Sisa dari presentasi ini adalah akan menjadi sebuah gambaran singkat.
Sebuah survei dari perpustakaan.
>> Pada dasarnya, apa yang mereka.
Apa yang mereka lakukan.
Bagaimana mereka berguna.
Bagaimana Anda mungkin menerapkannya.
Jika Anda ingin memulai melihat mereka, mengikuti dari awal, dan membaca
mereka, saya akan sangat mendorong itu.
>> Atau, Anda dipersilakan juga untuk mulai men-download mereka dan termasuk
mereka terlihat hanya untuk melihat apa yang mereka terlihat seperti atau apa yang mereka lakukan jika Anda memiliki
laptop Anda di depan Anda.
Jika tidak, Anda dipersilakan untuk menjaga mendengarkan kita bicara.
Kita akan terus berbicara.
Dan kami punya waktu di akhir, mudah-mudahan kita akan benar-benar masuk ke dalam menunjukkan Anda
apa beberapa perpustakaan ini terlihat seperti.
>> MIKE Rizzo: Cool.
Baiklah, jadi sekarang mari kita bicara tentang Font Keren.
>> TOMAS Reimers: begitu Font mengagumkan adalah situs benar-benar rapi, terutama bagi mereka
dari kita yang kurang artistik berbakat.
Mengabaikan nama Font Awesome, memberikan Anda sekelompok ikon, yang
sangat berguna.
Jadi banyak kali Anda akan menerapkan icon Anda mungkin ingin seperti x bagus sehingga
Anda dapat menutup sesuatu.
>> Atau Anda mungkin ingin beberapa jenis tombol Edit dengan gambar pensil seperti
dimiliki orang lain.
Dan saat itulah Anda belajar bahwa menggambar ikon tersebut dapat
sangat membosankan dan sulit.
Font Awesome - jika Anda benar-benar pergi ke situs -
memberi Anda banyak ikon di bawah ikon di bagian atas.
Ya, hanya bagian atas.
Ini akan memberi Anda banyak ikon gratis.
>> Jadi di sini Anda melihat kita memiliki hal-hal seperti asterisk, bar, petir, sebuah
kalender, bug, buku, dan lain-lain.
Hal ini dapat sangat berguna.
Cara Anda termasuk ini adalah Anda menyertakan harfiah file CSS.
Dan setelah Anda telah menyertakan file CSS, apa yang dapat Anda lakukan adalah Anda membuat
tag disebut I. Ini satands untuk icon dengan kelas FA
berdiri untuk Font Keren.
Dan kemudian, kelas apa pun yang Anda inginkan.
>> Jadi jika saya ingin icon plus ini persegi di sini, saya akan memberikan
itu kelas FA.
Dan kemudian tanda hubung FA ditambah tanda hubung persegi.
>> MIKE Rizzo: Cool, OK.
>> TOMAS Reimers: Dan kemudian, CSS terakhir perpustakaan kita ingin mendapatkan melalui kita
mencoba untuk tetap minimal pada CSS perpustakaan karena kita menyadari
judul presentasi ini adalah JavaScript Libraries.
Tapi kami pikir bahwa kita mungkin juga memperkenalkan Anda ke perpustakaan lain
sementara kita sedang berbicara tentang perpustakaan.
>> Ini Google Web Font.
Dan apa yang Google Web Font memungkinkan Anda lakukan adalah menambahkan font ke website Anda,
yang merupakan cara yang sangat mudah untuk membuatnya cantik dan untuk membedakan set Anda
dari orang lain adalah jika memiliki font yang bagus atau jika memiliki bagus
koleksi font.
Google Web Font bagus tidak seperti lainnya perpustakaan dalam arti bahwa itu adalah
benar-benar dipandu instalasi.
>> Jadi, jika Anda mengikuti link, itu google.com / font, saya percaya.
Jika Anda mengikuti itu, Anda dapat memilih font.
Anda dapat memilih di sebelah kiri dari ketebalan, kemiringan, dan sebagainya.
Dan kemudian, setelah Anda memilih salah satu, Anda dapat mengklik penggunaan cepat.
Tepat di sana.
Kanan bawah kotak.
>> Dan kemudian, gulir ke bawah.
Pertama-tama, mereka memberikan CSS yang Anda harus benar-benar link ke sana.
Itu ada di sana.
Anda hanya bisa copy dan paste masuk
Dan hal yang menyenangkan tentang yang satu ini Anda tidak benar-benar bahkan perlu
men-download file tersebut.
>> Apa itu akan lakukan adalah itu akan untuk link ke versi Google itu.
Jadi kembali ke apa artinya.
Itu berarti ketika pengguna mendownload file Anda -
download halaman HTML Anda - HTML Anda Halaman akan referensi file ini.
>> Jadi, komputer Anda akan melihat, oh, itu host di google.com agak
dari pada theirsite.com.
Biarkan aku pergi meminta Google untuk file itu.
Dan kemudian, itu akan mencakup hampir seolah-olah itu adalah
bagian dari situs Anda sendiri.
>> TOMAS Reimers: Cool.
Dan sekali Anda termasuk itu, maka untuk memasukkannya ke dalam CSS Anda, memberikan Anda
garis yang sebenarnya.
Jadi Anda mengatur keluarga font properti sama dengan nama font Anda.
>> MIKE Rizzo: OK.
Jadi kita hanya selesai dengan CSS.
Dan beberapa dari Anda mungkin berpikir, baik, kami memiliki beberapa CSS pada CS50 Keuangan.
Tapi perpustakaan CSS adalah bootstrap.
Kami benar-benar termasuk Bootstrap sedikit nanti di bawah JavaScript karena dengan
perpustakaan Bootstrap CSS juga dilengkapi dengan banyak JavaScript yang
Bootstrap atau Twitter - yang membuat Bootstrap -
digunakan untuk mengelola semua CSS mereka.
>> TOMAS Reimers: Apakah ada yang punya pertanyaan sejauh ini tentang CSS pada umumnya?
Kita baik?
Mengagumkan.
>> MIKE Rizzo: Awesome.
>> TOMAS Reimers: Jadi bergerak pada JavaScript.
>> MIKE Rizzo: Jadi kami ingin berbicara tentang jQuery untuk memulai dengan.
Ada yang sudah mendengar tentang jQuery sebelum atau menggunakannya?
Ya, beberapa?
Jadi jika Anda hanya bekerja dengan asli JavaScript, Anda akan menemukan diri
mengetik banyak penyeleksi panjang banyak.
Jadi apa jQuery dilakukan adalah menyediakan pembungkus yang bagus untuk JavaScript
bahasa yang memungkinkan Anda dengan mudah memilih dan memanipulasi unsur-unsur yang berbeda
dalam model objek dokumen dari Halaman web atau DOM, yang saya pikir
kalian telah mendengar dari dalam kuliah pada saat ini.
>> TOMAS Reimers: Jika Anda belum pernah mendengar tentang atau kuliah jika Anda belum menyaksikan
Namun, Document Object Model adalah pada dasarnya bagaimana hal-hal yang diwakili.
Jadi HTML semacam terlihat seperti pohon ketika Anda benar-benar menariknya keluar.
Anda memiliki elemen HTML di atas.
Anda memiliki kepala dan tubuh.
>> Dan kemudian, dalam bahwa Anda memiliki segala sesuatu yang lain.
Itu disebut sebagai DOM -
Document Object Model.
Jadi model yang mewakili objek dalam dokumen adalah cara mudah untuk berpikir
tentang itu.
Dan salah satu hal yang besar tentang jQuery itu benar-benar membuat traversing
itu dan memanipulasi unsur-unsur dalam itu sangat sederhana.
>> Begitu sederhana, pada kenyataannya, bahwa mayoritas JavaScript perpustakaan atau jika tidak
mayoritas, sebagian besar dari orang-orang Anda akan melihat benar-benar membutuhkan jQuery sehingga
bahwa mereka bisa berjalan sendiri hanya karena jika Anda tidak memiliki jQuery, Anda
akan membuang banyak waktu untuk mencari cara untuk memilih tertentu
elemen dan bagaimana melakukan hal-hal lain.
Dan hal besar lainnya tentang jQuery adalah bahwa hal itu browser yang kompatibel lintas.
>> Jadi ingat kembali ketika kita mengatakan bahwa tidak semua browser mengimplementasikan
hal-hal dengan cara yang sama?
Hal ini berlaku bahkan dalam JavaScript.
Dan salah satu hal besar mengenai jQuery adalah bahwa hal itu akan mendeteksi
Browser dan mendeteksi metode yang sesuai.
>> Jadi jika Anda perlu untuk memilih elemen, Internet Explorer mungkin mengatakan Anda
seharusnya dilakukan dengan cara ini.
Firefox mungkin mengatakan yang benar caranya adalah dengan cara ini.
jQuery tidak peduli.
Ketika Anda memberitahu jQuery untuk memilih elemen itu akan mencari tahu bagaimana hal itu
seharusnya melakukannya dalam browser yang pengguna saat ini dalam, dan kemudian melakukan
seperti itu.
>> MIKE Rizzo: Jadi mari kita tidak membicarakan tentang penggunaan jQuery sedikit.
Sama seperti PHP, jQuery memiliki tertentu kesukaan untuk tanda dolar.
Jadi, Anda akan menemukan bahwa setiap jQuery -
baik, tidak semua.
Anda kadang-kadang dapat menggantikan dolar menandatangani dengan kata jQuery.
Tapi pada umumnya, hanya karena itu pendek, setiap kali Anda melihat jQuery menjadi
menggunakannya akan dengan tanda dolar.
>> Jadi di sini kita hanya menunjukkan awal pemilih untuk sebuah elemen di DOM.
Di sini, kita memiliki tanda dolar diikuti dengan tanda kurung terbuka dan kemudian tanda kutip.
Dan dalam tanda kutip pergi penyeleksi kami untuk elemen yang berbeda.
Sama seperti dalam CSS, kita perlu penyeleksi untuk bisa gaya elemen yang berbeda
dalam halaman.
Mereka selektor yang berbeda menerjemahkan tepatnya ke jQuery dan JavaScript,
untuk sebagian besar.
>> Jadi di sini kita memiliki titik foo.
Jadi, jika Anda ingat dari kuliah, dot hanya berarti kelas.
Jadi kita memilih elemen dengan kelas foo.
Jadi jika saya pergi ke depan dan membuka kami JavaScript konsol sini benar-benar cepat
hanya menunjukkan itu, jika saya hanya ketik tanda dolar, kita melihat bahwa itu adalah beberapa
fungsi yang muncul.
Dan itu hanya ditentukan oleh jQuery.
>> TOMAS Reimers: Bagi Anda asing, konsol adalah alat
dalam Chrome, yang memungkinkan Anda untuk, pada dasarnya, menjalankan JavaScript pada
halaman ini.
Ini Anda akan menemukan sangat berguna ketika Anda benar-benar debugging dan Anda
perlu menjadi seperti, apa yang saat ini nilai dari beberapa variabel global atau apa yang
adalah sesuatu yang lain?
Ini semacam seperti GDB dengan pengecualian bahwa Anda benar-benar dapat
memanipulasi elemen pada halaman dengan dalam mode jauh lebih mudah.
Dan juga tidak, pada dasarnya, periksa dengan Anda sebelum melakukan sesuatu.
>> Jadi sementara, GDB mungkin seperti, apakah Anda yakin ingin menjalankan langkah berikutnya?
Konsol ini secara real.
Jadi sebagai halaman web rendering dan melakukan apa pun yang dilakukannya, yang
Dewan juga berjalan di samping itu.
Dan Anda dapat menempatkan kode ke dalam menyalahkan konsol tersebut, yang akan
dijalankan pada halaman.
>> MIKE Rizzo: Jadi untuk masuk ke konsol, Saya kira saya harus singkat
menyebutkan bagaimana melakukan hal itu.
Dalam masalah terakhir yang mungkin Anda miliki digunakan Chrome memeriksa elemen
fungsi atau view source halaman -
dan mereka dapat diakses hanya dengan tepat mengklik halaman atau spesifik
elemen dan melakukan baik memeriksa unsur atau view source halaman.
Kami juga dapat mengakses JavaScript konsol langsung oleh
memilih memeriksa elemen.
Jadi Anda hanya menekan konsol di sisi paling kanan.
>> Atau, Anda bisa juga pergi ke sudut kanan atas,
yang dipotong di layar ini di mana ia memiliki tiga bar horisontal.
Dan Anda pergi ke alat-alat dan maka JavaScript konsol
di sini di mana bisa melihat -
setidaknya pada Windows -
shortcut adalah Kontrol Pergeseran J. Jadi jika kita ingin memilih elemen
dalam halaman ini, sama seperti aku menunjukkan sebelumnya, kami melakukan tanda dolar parens terbuka
dan kemudian mengutip.
>> Suatu hal yang menarik adalah, pada umumnya, tanda kutip tunggal dan tanda kutip ganda
ditukarkan.
Jadi banyak orang hanya menggunakan satu tanda kutip karena mereka lebih cepat untuk mengetik
dari tanda kutip ganda karena Anda tidak harus tahan tombol Shift.
Jadi aku hanya akan melakukannya sekarang.
>> Jadi saya ingin memilih sesuatu dengan kelas.
Container, hanya karena aku tahu itu sesuatu yang ada di kami
Halaman web sekarang.
Dan saya tekan Enter.
Dan kita dapat melihat bahwa memilih itu.
Jadi itu muncul bahwa kembali objek tersebut.
Jadi itulah pilihan dasar.
Jika kita ingin benar-benar memanipulasi itu, Anda harus menyebut sesuatu
pada seleksi itu, yang kita akan masuk ke kemudian.
>> TOMAS Reimers: Jadi hanya untuk melihat bahwa lebih mendalam, hal ini tidak berbeda
daripada fungsi panggilan yang kami buat di C. Nama fungsi di sini adalah
sedikit aneh.
Ini tanda dolar.
Ini hanya nama fungsi.
Tidak ada yang khusus tentang hal itu.
>> Kami memiliki tanda kurung terbuka.
Kemudian, kita memiliki satu argumen kami, yang dalam hal ini terjadi menjadi string,
yang merupakan pemilih untuk itu.
Dan kemudian, kami telah kami kurung tertutup.
Itu saja.
>> Ini bukan yang sangat berbeda.
Meskipun, itu memang terlihat sangat aneh.
Dan itu bisa, semacam, mencuat sebuah titik untuk banyak orang.
>> MIKE Rizzo: Jadi sama, jika kita ingin untuk memilih elemen yang memiliki ID,
sekarang kita ingin memilih oleh ID bukan kelas.
Ini akan menjadi hal yang sama di mana kita hanya melakukan tanda yang tajam untuk ID.
Jadi kita memilih di sini semua elemen yang memiliki ID bar.
>> TOMAS Reimers: Dan ini meluas.
CSS yang memanjang.
Sama seperti di CSS, Anda dapat memilih semua Link, yang memiliki foo kelas.
Di sini, itu adalah hal yang sama.
>> Anda bisa melakukan a.foo, yang akan memilih semua link dengan foo kelas.
Anda bisa melakukan sebuah bar yang tajam, yang akan pilih link dengan ID bar dan sebagainya
dan sebagainya.
Setiap pemilih CSS adalah valid jQuery pemilih.
>> MIKE Rizzo: Ya.
OK, jadi sekarang mari kita masuk ke sedikit manipulasi yang bisa kita lakukan dengan
kami jQuery.
Jadi jQuery memiliki jenis tertentu notasi di mana kita hanya menggunakan
sebuah titik di akhir.
Dan Anda dapat menganggap ini seperti di C bagaimana kita memiliki structs berbeda.
Dan untuk masuk ke mereka structs, Anda akan menggunakan dot untuk masuk ke mereka.
>> Hal ini, jenis, hal yang sama.
Hanya sekarang kita memiliki fungsi dalam hal ini pemilih bahwa kita bisa memanggil itu.
Jadi di sini, contoh pertama Anda dapat melihat adalah selector CSS.
Dan pada dasarnya, apa yang dilakukannya itu menerapkan CSS elemen pertama ini
hal yang Anda pilih -
Unsur ini yang Anda pilih -
dengan nilai itu.
>> TOMAS Reimers: Jadi mudah terjemahan yang akan jika jQuery, pada dasarnya,
hanya mengambil foo.
Dan kemudian di CSS mengatakan, warna merah dan dekat.
Ini ide yang sama.
Apa itu dilakukan adalah itu dipilih semua elemen foo.
Dan kemudian itu diterapkan.
Semacam, warna properti adalah sama dengan merah.
>> MIKE Rizzo: Demikian pula, kita juga bisa mengubah isi sebenarnya dari apa yang
menunjukkan pada HTML halaman, yang benar-benar keren karena itu berarti Anda
halaman web sekarang dapat benar-benar dinamis dan tidak harus statis
bahwa Anda mencetak menggunakan PHP pada awal
halaman sedang dimuat.
Jadi di sini, jika kita ingin mengubah HTML sebenarnya halaman, sekarang kita akan
memanggil fungsi HTML, yang kemudian hanya sisipan apapun yang kita tentukan ke
bahwa elemen yang kita pilih.
Jadi di sini kita memilih elemen dengan kelas foo dan kemudian mengatakan itu HTML
itu sekarang hello world.
>> TOMAS Reimers: Dan ketika Anda berpikir tentang apa aplikasi yang berguna
ini, CSS yang satu ini, hal pertama yang Anda dapat mulai berpikir tentang adalah
dalam hal bahkan drop down menu.
Anda bisa mulai melakukan hal-hal seperti, ketika pengguna melayang di atas bagian atas
dari bawah drop, Anda ingin membuat bagian bawah terlihat.
Benar?
>> Jadi dalam CSS, kita memiliki sifat untuk membuat sesuatu yang terlihat.
Hal-hal seperti tidak ada display usus akan membuatnya tidak terlihat.
Tampilan blok akan membuatnya terlihat.
Atau bahkan jika Anda ingin pergi lebih sederhana, Anda memiliki hal-hal seperti equals visibilitas
terlihat, dan visibilitas sama tersembunyi.
>> Dan Anda bisa mulai menerapkan hal-hal seperti drop down menu kanan
setelah Anda mendapatkan melalui ide tentang bagaimana Anda dapat mengetahui kapan ini membuka,
yang akan kita melewati sangat singkat.
Tapi kita bisa mulai melihat aplikasi ini.
Dalam arti yang sama, jika Anda adalah untuk mencoba dan melaksanakan, katakanlah, chatting
mesin dan Anda ingin membuat sedikit pidato gelembung muncul setiap kali Anda sudah
mendapat pesan baru, setelah Anda mendapatkan pesan baru, Anda dapat membuat sedikit
balon bicara datang dengan mengubah HTML halaman, kan?
Dengan menambahkan bahwa gelembung pidato ekstra dengan teks ekstra di sana.
Ya?
>> AUDIENCE: Jadi, Anda akan menanamkan ini dalam kode HTML di semacam seperti
[Tak terdengar]?
>> MIKE Rizzo: Benar.
Ya, kita akan mendapatkan bahwa dalam sedikit.
Ya, itu adalah serupa sedikit ke PHP.
Tidak persis sama.
>> Perbedaan yang baik untuk membuat apa ini sebenarnya mengedit ketika kita mengedit
halaman karena itu tidak akan menjadi mengedit file yang sebenarnya yang sedang
disimpan di server karena dunia seharusnya tidak memiliki izin
untuk mengedit file Anda.
Ini hanya mengedit apa yang ada di halaman dan apa yang sedang ditampilkan dalam
browser.
Jadi jika Anda adalah untuk me-reload halaman setelah, mengatakan, menghapus sesuatu seperti yang kita
lihat yang bisa kita lakukan dengan panggilan remove, hal yang kemudian akan muncul kembali.
>> TOMAS Reimers: Jadi salah satu cara untuk berpikir tentang ini adalah jika aku komputer Anda dan
Mike, semacam, server.
Apa yang akan terjadi adalah aku akan tanya Mike, hei, saya bisa memiliki salinan
Halaman web ini?
Dan dia akan memberikan saya salinan itu.
>> Tidak, itu bukan hal yang asli.
Ini hanya salinan.
Dan kemudian itu akan menjadi seperti, oh, ada JavaScript di sini.
Jelas, saya harus mengedit Halaman menjadi seperti ini.
Dan aku mengedit salinan Anda.
>> Tapi itu tidak mempengaruhi salinan yang sebenarnya.
Dan jika saya harus bertanya lagi refresh halaman, -
hey, aku bisa salinan lain bersih -
dia akan memberi saya copy masih bersih.
Dan kemudian, aku akan melakukan hal yang sama seperti, oh, ini JS di sini yang mengatakan
untuk mengedit ini.
Dan aku akan terus melakukan itu.
>> MIKE Rizzo: Jadi hal yang benar-benar keren yang dapat Anda lakukan dengan jQuery adalah
benar-benar menambahkan berbagai jenis animasi ke halaman Anda.
Saya tidak tahu apakah Anda pernah melihat di mana Anda mencoba untuk mengisi sebuah formulir
online dan Anda tidak mengisi hal-hal yang benar.
Jadi hal kecil meluncur turun di bagian atas dan mengatakan Anda
tidak melakukan ini dengan benar.
Silakan coba lagi.
Dan kemudian, mungkin bahkan hanya slide ke atas.
>> Ternyata jQuery telah dibangun di fungsi yang membuat semua itu
animasi benar-benar, benar-benar mudah.
Jadi ada pertama memudar fungsinya, yang
Anda dapat memanggil sesuatu.
Dan ini adalah cara untuk mengubah CSS unsur dengan cara animasi.
Jadi dibutuhkan elemen apapun Anda menyebutnya pingsan di.
Dan kemudian, perlahan-lahan perubahan itu opacity sampai ia pergi benar-benar transparan.
>> TOMAS Reimers: Yang populer lainnya adalah geser ke bawah, yang akan membuat
sesuatu yang muncul dengan menggesernya ke bawah.
Jadi dalam kasus menu drop-down, lagi, ketika kita belajar bagaimana mendeteksi
saat ini sudah melayang di atas, Anda hanya bisa mengatakan bawah ini
bagian geser ke bawah sekarang.
Dan kemudian, akan muncul dengan meluncur ke bawah.
>> MIKE Rizzo: Dan kemudian, jika Anda hanya memiliki beberapa jenis animasi diingat bahwa
jQuery tidak selalu memberikan.
Sebagai contoh, katakanlah jQuery tidak menyediakan Anda dengan slide
bawah dan slide up.
Nah, katakanlah Anda ingin geser sesuatu dari kiri atau dari
yang tepat seperti CS50 halaman utama setiap kali melakukan
Anda pergi ke sebuah panel baru.
Anda kemudian akan mungkin harus menerapkan sendiri menggunakan
menghidupkan fungsi dalam jQuery.
>> Jadi sama, Anda hanya bernyawa.
Dan kemudian, di dalamnya dibutuhkan kamus dari nilai-nilai yang berbeda
bahwa Anda seharusnya untuk lulus.
Jadi di sini, jika kita ingin menghidupkan Elemen foo sehingga lebarnya baik
mengembang atau kontrak sampai 80 piksel, tergantung pada apa yang saat ini.
Kami hanya akan lulus bahwa sebagai argumen di dalamnya.
>> Animate juga memiliki beberapa argumen lain bahwa Anda bisa melewatinya, misalnya,
kecepatan animasi bahwa Anda ingin memberikannya.
Dan untuk melakukan itu, saya hanya akan mengatakan cepat Google jQuery bernyawa.
Dan kemudian, membesarkan halaman ini, Anda bisa melihat itu punya banyak berbeda
sifat yang dapat Anda lulus.
>> Dan saya mendorong Anda - setiap kali Anda datang menemukan sesuatu yang tidak Anda lakukan
tahu atau hanya ingin mempelajari lebih lanjut tentang metode tertentu yang dapat Anda hubungi
pada sesuatu -
hanya Google itu. jQuery sangat didokumentasikan dengan baik.
Dan sering kali ada banyak contoh yang mereka berikan untuk Anda.
Jika kita gulir ke bawah -
jalan ke bawah -
yang bisa kita gunakan, juga.
>> Sekali lagi, ketika pengembang benar-benar pergi melalui kesulitan menulis sebuah
perpustakaan, mereka biasanya ingin seseorang untuk menggunakannya.
Jadi, seiring dengan akan menjadi dokumentasi.
Dan dokumentasi yang biasanya dapat ditemukan di halaman proyek, yang
mengapa kita memberikan bahwa situs asli Anda awal, yang menghubungkan Anda ke
halaman proyek sehingga Anda dapat lihat dokumentasi yang.
>> Biasanya, halaman proyek dalam kasus ini dari [Tak terdengar], itu mengatakan kepada Anda
nama-nama kelas.
Dalam kasus JavaScript, memberikan Anda nama fungsi.
By the way, jika kita gulir ke atas, samping catatan cepat pada fungsi adalah
setiap kali Anda melihat fungsi yang diimplementasikan seperti ini dengan keras
kurung di tengah, artinya bahwa properti yang opsional.
Hanya kepala sampai.
Saya telah melihat banyak pertanyaan tentang itu.
>> Jadi di sini kita dapat melihat bahwa bernyawa mengambil properti
sebagai argumen yang diperlukan.
Dan segala sesuatu yang lain adalah opsional.
Side note -
Anda dapat menganggap ini, semacam dari, seperti man.
Halaman manual adalah dokumentasi untuk C dan untuk banyak hal-hal lain, juga.
>> MIKE Rizzo: Jadi kita telah belajar bagaimana mengubah CSS yang berbeda pada halaman,
bernyawa itu, dan menghapus add HTML.
Tapi salah satu yang benar-benar paling kuat hal tentang JavaScript
dan terutama jQuery -
apa yang memungkinkan Anda lakukan adalah menanggapi elemen yang berbeda yang terjadi.
Sebagai contoh, di sini kita memiliki event handler.
Dan itu hanya berarti setiap kali ini peristiwa terjadi, kami menanganinya dengan
cara tertentu.
>> Jadi di sini, acara jQuery generik handler adalah titik di.
Dan kemudian, hal pertama yang Anda berikan adalah apa acara seharusnya
akan mendengarkan.
Jadi di sini, itu klik yang kami menunggu.
>> TOMAS Reimers: Atau, Anda memiliki di hover, yang merupakan salah satu yang sangat populer.
Jadi kembali ke saya drop turun ide menu.
Anda akan memiliki satu top di hover.
Dan kemudian Anda bisa mengubah itu.
>> MIKE Rizzo: Benar.
Dan kemudian, ketika itu terjadi, itu hanya mengeksekusi fungsi ini yang kita berikan
sebagai argumen dan ia mengingatkan Halo atau hi.
>> TOMAS Reimers: Jadi dalam kasus JavaScript, ini adalah tempat yang kita perlu
menghapus diri dari C. Kita bisa benar-benar mengambil fungsi sebagai argumen.
Dan ada banyak yang benar-benar cara yang rumit untuk melakukan hal ini.
Kita akan mempromosikan salah satu cara, yang Anda dapat menentukan
berfungsi di sana.
>> Jadi, ketika Anda meminta fungsi sebagai parameter, Anda pada dasarnya hanya
akan mendefinisikan fungsi di tempat.
Dan cara Anda mendefinisikan fungsi dalam JavaScript adalah Anda
harfiah mengatakan fungsi.
Kemudian, biasanya, nama fungsi.
Tapi kita tidak akan pernah referensi Fungsi ini lagi.
Jadi kita biarkan tanpa nama.
>> Kemudian kurung, maka keriting ini kawat gigi, dan kemudian kode di dalam itu.
Jadi kita memahami hal ini dapat sedikit membingungkan.
Jadi kami memberikan bentuk umum dari apa sebuah event handler seperti
di bawah ini, yang pada peristiwa.
Dan kemudian, kode Anda di dalam itu.
>> MIKE Rizzo: Apakah ada pertanyaan tentang hal ini?
Hal ini dapat sedikit membingungkan pertama kali Anda melihatnya.
>> TOMAS Reimers: Anda benar-benar ingin membuka file dan menunjukkan kepada mereka beberapa
jQuery sekarang?
>> MIKE Rizzo: Yeah, mari kita lakukan itu.
OK.
>> TOMAS Reimers: Jadi sekarang kita dalam alat.
Dan apa yang kami lakukan adalah kami telah mengambil kebebasan menciptakan baik sebuah index.html
File, yang terhubung dengan file JavaScript.
Dan dapat kita membuka -
ya.
Yah, itu melakukan dua hal.
>> Yang pertama adalah link ke file JavaScript.
Dan kita akan melihat bahwa di sini.
Kita melihat bahwa di kepala Dokumen HTML, khususnya.
Jadi, Anda akan melihat ada bahwa kita, pada dasarnya, mengatakan SRC,
yang merupakan singkatan dari sumber.
Dan itulah URL.
>> Jadi di sini Anda bisa mengatakan kami sudah termasuk jQuery.
Dan kami juga telah menyertakan script.
Cara lain untuk memasukkan JavaScript adalah bahwa Anda dapat memasukkan script inline
tag seperti yang kita miliki di bagian bawah di mana ia mengatakan jenis script text JavaScript.
>> Jadi kita katakan, mendengarkan, kita akan menyertakan naskah.
Dan jenis naskah yang JavaScript, yang merupakan jenis teks.
Sangat sederhana.
>> MIKE Rizzo: Jadi ini, jenis, sampai ke pertanyaan Anda tentang bagaimana kita termasuk
JavaScript dalam file kita karena ketika kita telah PHP, kita melakukan sesuatu seperti ini.
Dan kemudian, memiliki fungsi PHP kami - katakanlah saham melakukan
sesuatu dengan itu -
terjadi di sana.
Namun, sekarang kita memiliki tag script yang kita berikan itu, yang sebenarnya
bagian dari HTML itu sendiri karena tidak berpura-pura menjadi sebuah file HTML seperti itu
di PHP karena jika Anda benar-benar pergi di dan melihat sumber halaman,
Anda akan melihat tag script ini di sana dengan JavaScript yang terkait dengan
mereka dalam hal itu.
>> Jadi, jika kita ingin menulis beberapa JavaScript -
mari kita katakan kita ingin mengubah tubuh karena sekarang saya tidak memiliki
tag lain yang benar-benar saya bisa mengedit selain tubuh.
Mari kita katakan saja aku ingin mengubah CSS itu.
Jadi kita akan pergi ke depan dan perubahan warna itu menjadi merah.
>> Jadi saya menyimpan file.
Mari kita kembali ke halaman web kami, refresh, dan itu tidak secara otomatis
karena tidak tampak seperti itu menunggu sama sekali karena kita tidak mendengarkan
untuk sebuah acara atau sesuatu seperti itu.
>> TOMAS Reimers: Jadi jika kita kembali ke yang mengajukan khususnya - HTML
file - apa yang akan Anda untuk melihat adalah kita memiliki -
ingat bahwa ini dimuat, semacam, kronologis.
Jadi kita harus pertama kepala. beban dua file.
Kemudian kami pergi ke tubuh.
Dan kita melihat dunia halo.
Jadi kita membuat hello world.
>> Dan kemudian hal terakhir yang kita miliki adalah kita memiliki tag script.
Jadi menjalankan tag script karena itu tidak mengatakan itu menunggu untuk apa pun.
Dan itulah yang paling dasar cara untuk menjalankan JavaScript.
>> Dengan mengatakan bahwa, Anda dapat menempatkan script tag di header hanya
untuk menunjukkan titik ini?
Dan menjalankan itu.
Kita akan melihat bahwa itu tidak mengubah warna.
Dan ini adalah salah satu masalah JavaScript adalah bahwa hal-hal yang dimuat
dalam urutan kronologis.
>> Jadi pada saat itu bahwa kode yang berlari, kami memilih -
kembali -
tag tubuh.
Tag tubuh belum ada karena JavaScript ini sejalan dengan HTML.
Jadi browser seperti pilih tubuh.
Tidak ada hal seperti itu belum.
Jadi kita bisa mengabaikan itu.
Dan kami terus berjalan.
>> Dan kemudian kita mendefinisikan tag body.
Tapi itu tidak pernah akan diperbarui.
Jadi, ketika Anda menerapkan skrip tag, pastikan Anda menempatkan
setelah tag body.
Slide berikutnya.
>> MIKE Rizzo: OK.
Jadi kami mengubah sesuatu.
Tapi itu tidak terlihat seperti itu menanggapi kami sama sekali karena hanya jenis
melakukannya secepat itu dimuat halaman.
Jadi sekarang, bukannya melakukan ini, mengapa kita tidak menambahkan event handler.
>> Jadi mari kita lakukan sesuatu ke tubuh lagi.
Dan katakanlah kita melakukannya pada -
klik.
Kami akan menambahkan fungsi.
>> TOMAS Reimers: Mari kita ubah itu warna merah lagi.
Mengapa tidak?
>> MIKE Rizzo: Yeah, mari kita ubah 'warna menjadi merah lagi.
Baik.
Jadi mari kita kembali halaman tersebut.
OK, kita lihat -
seperti yang diharapkan, itu tidak berubah menjadi merah belum.
Tapi kemudian kita dapat melanjutkan dan klik.
>> TOMAS Reimers: Dan itu tidak berubah menjadi merah.
>> MIKE Rizzo: Dan itu berubah menjadi merah seperti yang diharapkan.
>> TOMAS Reimers: Dan kita bisa melihat bagaimana kita dapat mulai membangun sangat dasar
interaksi.
Hal-hal lain kita mungkin ingin lakukan adalah, jika kita tidak ingin membuat tubuh
warna merah, mari kita membuat HTML background warna merah.
Hanya jadi CSS yang sama.
>> Dan ketika kita mengubahnya, kita dapat melihat hal ini efek yang sangat dramatis mengubah
seluruh halaman.
Jadi sekali lagi, jika Anda menerapkan hal-hal, Anda dapat memiliki satu komponen
yang dimaksudkan untuk diklik.
Katakanlah tombol Exit dan seluruh komponen lainnya,
yang dimaksudkan untuk merespon.
Jadi, Anda akan menghapus jendela ketika itu terjadi.
>> MIKE Rizzo: OK.
Hanya sebagai contoh -
Anda tidak bisa melihat ini sebelumnya -
Saya hanya akan menunjukkan apa yang tampak seperti ketika kita menyembunyikan sesuatu.
Jadi saya akan pergi ke depan dan jangan geser ke atas.
>> TOMAS Reimers: Ingin membungkus bahwa dalam Jenis paragraf sebelum kita melakukan itu?
>> MIKE Rizzo: OK.
Ya, kenapa tidak kita melakukan itu hanya begitu kita dapat memilih sedikit lebih.
>> TOMAS Reimers: Dan mari kita memberikan kelas.
>> MIKE Rizzo: Ya.
OK, jadi mari kita lihat.
Alih-alih memilih tubuh yang sebenarnya sekarang, aku hanya akan memilih semuanya dengan
kelas halo, yang di sini kita hanya satu hal.
Jadi kita tidak perlu khawatir tentang itu.
>> Jadi saya akan menyegarkan itu.
Aku akan pergi ke depan dan klik.
Dan itu, semacam, melakukan slide aneh up hal, yang tidak melihat bahwa
menarik.
Umumnya, mereka terlihat cukup bagus.
Saya kira, ini - untuk beberapa Alasan - tidak.
Aku hanya akan melakukan fade keluar begitu Anda dapat melihat itu juga.
Jauh lebih baik.
>> Dan kemudian, jika saya membuka JavaScript konsol lagi dan kami ingin melihat apa
sepertinya memudar ketika kita masuk
Sekarang, aku hanya memanggil memudar di dalamnya.
Dan itu memudar kembali masuk
>> Demikian pula, kita benar-benar bisa juga melewati argumen memudar dalam atau fade out,
yang, jenis, kecepatan itu.
Jadi mari kita pergi ke depan dan mengatakan kami ingin untuk pergi perlahan-lahan memudar masuk
Jadi saya rasa itu masih tampak cukup cepat.
Tapi itu lebih lambat dari sebelumnya.
>> TOMAS Reimers: Dan jika Anda ingin mencari lebih lanjut tentang hal-hal ini, sekali lagi,
hanya pergi ke dokumentasi jQuery, yang telah kami berikan kepadamu, dan membaca
melalui ini.
Mereka mendokumentasikan fungsi mereka sangat baik.
>> MIKE Rizzo: OK.
Jadi saya kira mari kita kembali ke ini.
Dan kita bisa bicara tentang halaman terakhir kami.
Nah, kita bisa menyelesaikan dengan Bootstrap.
Dan kemudian kita akan membukanya untuk beberapa pertanyaan.
Dan jika kalian punya ide-ide yang Anda ingin mencoba muntah dan melihat
jika kita dapat menerapkannya dengan JavaScript cepat.
>> Jadi benar-benar cepat tentang Bootstrap, yang secara otomatis termasuk dalam
Masalah terakhir Anda diatur dalam folder CSS dan benar-benar terhubung ke dalam Anda
header.php.
Jadi, Anda bisa menambahkan kelas yang didefinisikan dalam Bootstrap untuk itu.
Dan itu akan otomatis ditata hal-hal yang sesuai.
>> TOMAS Reimers: Jadi Bootstrap adalah sangat hal magis yang dikembangkan oleh orang-orang
di Twitter.
Dan apa itu dimaksudkan untuk lakukan adalah -
sebelum website yang benar-benar keras untuk membuat terlihat bagus, terutama ketika kita memiliki
banyak komponen umum.
Jadi banyak tombol pada web tampak sama.
>> Banyak bidang teks dapat dibuat untuk terlihat lebih baik daripada teks standar
bidang Anda mungkin tahu dari benar-benar website lama atau benar-benar buruk dibuat
website, yang hanya terlihat seperti literal kotak teks tanpa bentuk teks
bayangan atau apapun yang bagus outline.
Jadi apa Bootstrap lakukan adalah katanya, baik, kami memiliki banyak gaya umum.
Mengapa kita tidak membuat satu set umum CSS dan seperangkat JavaScript sebagai
baik, yang bisa gaya apa adanya dan yang dapat memberikan orang-orang hal-hal seperti penurunan
down menu, yang dapat memberikan orang hal-hal seperti kata modal.
>> Modal adalah apa yang muncul di atas halaman setiap kali itu benar-benar berbicara
sesuatu, yang menghambat lebih lanjut interaksi sampai Anda
berinteraksi dengannya.
Sesuatu seperti ini, apakah Anda yakin Anda ingin menghapus hal ini?
Anda tidak bisa benar-benar melakukan hal lain sampai Anda mengatakan ya atau tidak.
>> Butuh semua ini dan itu dikemas bersama-sama dan berkata, di sini kita pergi.
Orang-orang sekarang dapat menggunakan ini.
Dan Anda dapat menemukannya lebih di getbootstrap.com.
Itu secara otomatis disertakan dalam Masalah terakhir Anda set.
Dan kau lebih dari diterima untuk menggunakannya pada proyek akhir Anda.
Dan jika Anda ingin mengikuti menghubungkan untuk mendapatkan Bootstrap.
>> Anda akan melihat di sini adalah Bootstrap situs CSS.
Anda akan melihat Bootstrap.
Dan jika Anda gulir ke bawah, Anda akan melihat cara men-download itu, bagaimana
menginstalnya, dan sebagainya.
>> MIKE Rizzo: Dan Anda juga bisa, cukup menarik, menyesuaikan dengan
menjadi apa pun jenis tema yang Anda inginkan.
Aku tahu itu adalah sesuatu yang saya lakukan untuk saya tugas akhir ketika saya mengambil kelas
adalah menyesuaikannya.
Sebuah versi yang berbeda dari yang Bootstrap memiliki skema warna yang berbeda dan
bentuk yang berbeda dari beberapa hal yang berbeda.
Jadi saya mendorong Anda untuk bermain dengan itu.
Ini semacam menyenangkan untuk dilakukan.
>> TOMAS Reimers: Mencari di bagian atas sekali lagi, ini sangat mirip dengan font
Situs mengagumkan.
Banyak dokumentasi akan mulai tampak serupa ketika Anda sudah
cukup melihat itu.
Jadi di sini kita memiliki CSS komponen ini.
Dan Anda akan melihat bagaimana bisa gaya hal.
Jadi, jika Anda klik pada tabel, misalnya, Anda dapat segera membuat
tabel cukup dengan hanya menambahkan tabel kelas untuk itu.
>> Hal yang sama untuk tombol.
Jika Anda cukup menambahkan BTN kelas dan BTN standar atau primer BTN, Anda dapat
mendapatkan salah satu tombol ini dengan gaya-gaya pra-dibuat.
Dan kemudian, jika Anda sedang mencari sesuatu yang lebih kompleks dari sekadar
restyling apa w sudah ada, lebih pada tab JavaScript di kita atas
memiliki banyak komponen.
>> Jadi di sini kita memiliki transisi, kata modal, dropdown, tab, dan tooltips.
Sebuah tooltip adalah apa yang muncul di bawah Anda mouse ketika Anda membawa sesuatu.
Popovers, alert, tombol, dilipat akordion adalah apa
mereka biasanya disebut.
Komidi putar, sandal yang melalui gambar seperti.
>> Jadi mereka adalah komponen dari Bootstrap.
Saya akan mendorong Anda untuk sangat pergi melihat mereka.
Ada komponen JavaScript dan komponen CSS.
Jangan ragu untuk menggunakannya sebagai Anda akan.
Kami tidak akan pergi terlalu banyak ke mereka karena kita merasa dokumentasi
sangat baik dilakukan.
Dan yeah.
Apakah Anda memiliki pertanyaan tentang hal itu?
>> MIKE Rizzo: Jadi sebagai benar-benar cepat sisi, desain halaman web ini yang
kita cepat mengumpulkan untuk Presentasi ini
benar-benar dilakukan dengan menggunakan Bootstrap.
Seperti yang Anda lihat, ketika kita klik pada ini tab yang berbeda, kami tidak pernah benar-benar
meninggalkan halaman index.html saat ini.
Jadi apa yang kita miliki adalah divs berbeda dalam index.html ini.
Dan kemudian, setiap kali kita klik berbeda tab, itu hanya mengubah
yang satu menunjukkan.
>> Jadi sesuai posisi mereka, mengubah HTML halaman sehingga
tab saat ini ditandai sebagai aktif sehingga tampak berbeda dan terlihat
benar-benar baik.
>> TOMAS Reimers: Jadi itu semua dilakukan tanpa kita menulis hampir semua CSS.
Kami juga melihat header di bagian atas, yang warna-warna yang oleh kami.
Tapi sebenarnya meletakkannya di atas halaman dan membuat
itu scroll adalah Bootstrap.
Dan kemudian bahkan untuk perpustakaan lain - ini bukan salah satu yang kita bicarakan tapi satu
Anda dapat Google jika Anda ingin.
Ini disebut prettify.js.
Dan itu akan menyoroti sintaks kode Anda untuk Anda menggunakan kedua CSS dan JavaScript.
>> Hal terakhir yang kita ingin berbicara tentang sebelum kita melepaskan Anda keluar ke
dunia untuk melihat perpustakaan untuk mencari tahu bagaimana menggunakannya dan, mudah-mudahan,
membaca dokumentasi dan menemukan apa yang Anda Kebutuhan adalah bagaimana menemukan perpustakaan.
Jadi yang pertama adalah kita hanya akan mendorong Google.
Go Google.
>> Itu benar-benar apa yang kita lakukan ketika kita perlu melakukan sesuatu adalah kita Google.
Apakah ada perpustakaan JavaScript yang memungkinkan saya untuk memanipulasi waktu dalam
cara yang berguna?
Jadi jika saya tahu bahwa beberapa pengguna menciptakan account di sini, dan ini adalah
waktu saat ini, bagaimana saya bisa menghitung perbedaan dengan yang tanpa harus
menghitung sendiri?
Jadi ini sebenarnya adalah hal yang umum, JavaScript waktu perpustakaan.
Dan di sini kita Moment.js-- yang paling populer.
>> Jika kita membutuhkan perpustakaan untuk memanipulasi sesuatu seperti warna untuk dapat
menghasilkan sekelompok warna acak -
mungkin, untuk menghasilkan gaya atau sesuatu -
kita bisa google sesuatu seperti JavaScript perpustakaan warna.
Dan saya yakin kita akan muncul dengan seribu satu dari mereka.
Anda dipersilakan untuk membaca melalui mereka.
>> Jadi banyak hal - ketika Anda menemukan mereka - akan di-host di salah satu
situs yang kode tuan rumah.
Mereka adalah beberapa yang populer.
Yang paling populer, dengan sejauh ini, adalah github.com.
Dan jika Anda pergi ke GitHub itu sebenarnya mana Menormalkan diselenggarakan.
Jadi jika Anda ingin kembali ke satu.
Menunjukkan kepada mereka bahwa.
>> MIKE Rizzo: Dan itu benar-benar di mana ini di-host juga, jika Anda perhatikan.
>> TOMAS Reimers: Ya.
Jadi, jika Anda pergi ke Menormalkan dan pergi ke GitHub.
Apakah itu?
>> MIKE Rizzo: Itu hal kecil kucing adalah simbol GitHub.
>> TOMAS Reimers: Oh.
Jadi GitHub menggunakan metode yang disebut Git untuk menyimpan kode.
Apakah Anda tidak tahu apa yang sedang atau itu takut Anda, itu bagus.
Anda tidak perlu tahu apa Git karena GitHub memiliki tombol Download
di bagian kanan bawah.
>> Hal lain yang berguna untuk mengetahui tentang GitHub adalah produk paling banyak
akan memiliki membaca saya.
Dan jika mereka tidak memiliki sebuah situs web, membaca saya akan berbicara tentang bagaimana Anda
menginstalnya, bagaimana Anda menggunakannya, apa yang tidak, dan sebagainya, dan sebagainya, dan sebagainya.
Apa yang kita sudah pada dasarnya telah berjalan Anda melalui.
>> MIKE Rizzo: berhenti merokok Internet.
>> TOMAS Reimers: Itu baik-baik saja.
Dua hal terakhir yang kita inginkan untuk berbicara tentang -
kita bicarakan Git -
adalah pemecahan masalah.
Dan yang satu ini tidak relevan untuk produk akhir seperti itu
ketika Anda meninggalkan 50.
Dan ketika Anda mengalami produk menerapkan perpustakaan atau menerapkan
proyek Anda sendiri, Anda akan memiliki pertanyaan atau Anda
akan mencari pertanyaan.
>> Sekali lagi, Google itu.
Itu benar-benar apa yang kita lakukan.
Ini akan terdengar konyol.
Tapi secara harfiah, kita Google itu.
Dan lagi, salah satu hal pertama Anda biasanya akan bertemu adalah
stackoverflow.com, yang merupakan indah tanya jawab terlihat.
>> Ini luar biasa baik karena Anda dapat posting pertanyaan dan mencari
jawaban tetapi juga karena sudah memiliki banyak
pra-diisi konten di sana.
Jadi biasanya ketika Anda Google pemrograman sebuah pertanyaan dalam pertama
beberapa hits Anda mungkin sudah menjalankan ke dalamnya selama set masalah Anda.
>> Dan kemudian, hal yang sangat singkat lalu adalah JSFIDDLE, yang - hari ini kita sudah
telah melakukan banyak pekerjaan dengan JavaScript HTML CSS.
JSFIDDLE adalah aplikasi web, yang pada dasarnya memungkinkan Anda untuk mengambil HTML Anda, ANDA
JavaScript kiri bawah, dan kanan atas CSS Anda.
Dan kemudian dapat membuat cepat membuat TI dan melihat bagaimana berinteraksi.
Ini sangat berguna ketika orang mencoba untuk melakukan bukti dari konsep seperti
ini adalah bagaimana Anda akan melakukan menu drop down.
Mungkin mengungkap cepat atau apa pun.
>> MIKE Rizzo: Jadi mari kita pergi Cobalah dan klik ini.
Sebuah catatan singkat -
sedangkan, sebelum kami lakukan di klik.
Ternyata JCorey Korea juga memiliki built dalam event handler klik yang
menggunakan hanya karena angka Anda akan ingin melakukan banyak hal
bila Anda ingin mengklik sesuatu.
>> Demikian pula, juga memiliki hover.
Tetapi untuk mendapatkan lingkup penuh mereka, melihat jQuery
dokumentasi dan melakukannya.
Saya melakukan sesuatu yang bodoh di sini.
>> TOMAS Reimers: Jadi saya punya benar-benar cepat program yang tepat di sini, yang mengatakan
tombol di klik.
Kemudian kita memiliki untuk loop.
Untuk i kurang dari 404.
Ini hanya akan muncul pesan-pesan peringatan.
>> MIKE Rizzo: Dan apa yang kode 404 berdiri di HTML?
Apakah ada yang ingat?
Tidak ditemukan, benar.
Chrome juga menambahkan ini rapi hal di mana Anda bisa -
>> TOMAS Reimers: Karena orang-orang seperti Mike mulai melakukan hal ini banyak dan
pengguna menjengkelkan, yang memungkinkan Anda untuk melihat info.
>> MIKE Rizzo: Ya.
>> TOMAS Reimers: Apakah kita memiliki pertanyaan tentang hal ini, tentang JavaScript
perpustakaan, menemukan perpustakaan, atau terlihat apa pengembangan web
seperti di dunia nyata?
Kita berjalan melawan waktu.
Jadi saya tidak yakin kita akan punya waktu untuk melaksanakan
kecuali itu benar-benar cepat.
Apakah kita baik?
>> MIKE Rizzo: Apa kalian ingin untuk melihat benar-benar cepat dalam, seperti, dua
menit atau kurang?
>> TOMAS Reimers: Anything kita bisa menjelaskan?
Bagaimana menulis di -
>> AUDIENCE: [Tak terdengar]?
>> MIKE Rizzo: Ya, jadi ltu -
>> TOMAS Reimers: Anda hanya dapat menekan Control-U di website.
>> MIKE Rizzo: Oh, saya tidak tahu itu.
>> TOMAS Reimers: Saya pikir, ya.
Control-U. Ya.
>> MIKE Rizzo: Oh, jadi itu kode untuk situs web.
Tetapi jika Anda benar-benar ingin men-download kami file dan segala sesuatu, host
pada github.com
>> TOMAS Reimers: slash nama saya -
Tomas Reimers - slash Seminar CS50 tanda hubung.
>> MIKE Rizzo: Dan Anda dapat menemukan segala sesuatu di sana.
>> TOMAS Reimers: Inilah yang GitHub Sepertinya, by the way.
Jadi sekali lagi, ketika Anda melihat open source proyek, biasanya, mereka akan membaca
saya ada yang dapat Anda baca.
Dan jika Anda kembali, Anda akan melihat bahwa Anda memiliki download zip, yang akan
memungkinkan Anda untuk men-download sumber kode untuk memasukkan
produk dalam hal yang Anda sendiri.
>> MIKE Rizzo: Ya, dan jika kita klik pada index.html sangat cepat -
>> TOMAS Reimers: Anda akan lihat di sini adalah kode sumber untuk website kami.
>> MIKE Rizzo: Juga, saya lupa untuk mendorong hak sebelumnya dengan meja besar itu
termasuk, tapi ada juga meja dari chmods yang kita termasuk
hanya untuk kejelasan Anda.
Tetapi jika kita gulir semua jalan ke bawah, kita tidak benar-benar melakukan sangat
jauh dengan JavaScript hal sama sekali dengan ini.
Ini eksklusif dari segala sesuatu lain yang kita miliki.
>> Jadi terima kasih guys untuk datang dan mendengarkan.
Kami berharap ini benar-benar membantu.
Jika Anda memiliki JavaScript yang terkait pertanyaan atau hanya ingin berbicara tentang
apa lagi seperti apa hal-hal keren lainnya dapat Anda lakukan dengan JavaScript, kami akan senang
untuk berbicara dengan Anda.
>> TOMAS Reimers: Jika Anda memiliki pertanyaan tentang proyek Anda atau jika ini bisa menjadi
relevan, kami mungkin akan tetap sekitar sedikit setelah ini.
Tapi selain itu, memiliki akhir pekan yang baik.
>> MIKE Rizzo: Ya, menikmati.
Sampai jumpa.
>> TOMAS Reimers: Lihat ya.