Sumber THURSDAY
SumberSunny mornings _
SumberGreat Thinkers
Sumber Ready Set Go! _
Sumber Signal & Noise _
Sumber Beautiful Questions
Sumber Reality is broken
Sumber Hi !
Sumber Coffee mornings
Sumber Domino Dreams _
SumberSunny mornings _0
SumberSunny mornings _1
SumberSunny mornings _2
SumberSunny mornings _3
SumberSunny mornings _4
SumberSunny mornings _5
Salah satu cara JavaScript yang umum digunakan adalah menyembunyikan atau menampilkan konten berdasarkan perilaku pengguna. Misalnya, pengguna dapat memilih opsi saat mengisi formulir online, dan pilihan mereka dapat menyebabkan bidang formulir terkait lainnya muncul. Dalam pelajaran ini, Anda akan menggunakan CSS dan Javascript untuk menampilkan dan menyembunyikan jam yang telah Anda buat
Hasil Pelajar
Pada penyelesaian latihan ini
- Anda akan dapat menggunakan CSS untuk menyembunyikan dan menampilkan konten
- Anda akan dapat menggunakan JavaScript untuk mengubah dan properti CSS elemen HTML
Kegiatan
Merupakan praktik umum di web saat ini untuk menyembunyikan konten dari pengguna sampai diperlukan. Dalam pelajaran ini, Anda akan menyembunyikan jam Anda, lalu menambahkan link yang jika diklik akan menampilkan jam
Buka javascript. html di editor teks dan browser web Anda. Buka style sheet yang Anda buat untuk div#clock di pelajaran sebelumnya. Tambahkan properti berikut ke style sheet
Sekarang segarkan halaman Anda di browser Anda. Apa yang terjadi? . Ini adalah salah satu dari beberapa cara untuk menyembunyikan konten menggunakan CSS. Untuk membuat elemen terlihat lagi, Anda akan mengubah properti ini menjadi
Namun, dalam hal ini kami ingin membuat elemen terlihat hanya jika pengguna secara khusus memintanya. Jadi kita harus mengubah gaya secara dinamis, menggunakan JavaScript, yang dipicu oleh peristiwa title
Pertama, tambahkan elemen yang Anda ingin pengguna klik
Tampilkan jam
Perhatikan bahwa tombol ini pada dasarnya sama dengan tombol yang Anda buat di Pelajaran 1 untuk menampilkan peringatan. Namun ada satu perbedaan penting. Tombol ini memiliki atribut id. Itu agar Anda dapat mengaksesnya dengan mudah menggunakan JavaScript (Anda akan tahu alasannya sebentar lagi)
Sekarang Anda memiliki tombol yang, ketika diklik, memanggil fungsi toggleClock(), Anda perlu membuat fungsi toggleClock(). Inilah fungsinya - tambahkan saja ke bagian skrip yang ada di kepala halaman web Anda
function toggleClock() { // get the clock var myClock = document.getElementById('clock'); // get the current value of the clock's display property var displaySetting = myClock.style.display; // also get the clock button, so we can change what it says var clockButton = document.getElementById('clockButton'); // now toggle the clock and the button text, depending on current state if (displaySetting == 'block') { // clock is visible. hide it myClock.style.display = 'none'; // change button text clockButton.innerHTML = 'Show clock'; } else { // clock is hidden. show it myClock.style.display = 'block'; // change button text clockButton.innerHTML = 'Hide clock'; } }Dalam fungsi toggleClock() baru ini, Anda menggunakan JavaScript untuk mengambil elemen jam, mendapatkan nilai gaya tampilan saat ini, lalu memeriksanya. Jika tampilan saat ini disetel ke "blokir", jam akan terlihat, jadi Anda mengubah tampilan menjadi "tidak ada", yang menyembunyikan jam. Jika jam sudah disembunyikan, Anda mengubah tampilan menjadi "blok" agar terlihat lagi. Saat Anda mengganti tampilan jam bolak-balik dari "blok" ke "tidak ada", Anda juga mengubah teks (innerHTML) pada tombol jam, sehingga bergantian antara "Tampilkan jam" dan "Sembunyikan jam", tergantung
Semua selesai?
Uji halaman web Anda, dan pastikan Anda dapat menampilkan dan menyembunyikan jam dengan tombol baru. Pastikan juga teks tombol berubah dari "Tampilkan jam" menjadi "Sembunyikan jam" sebagaimana mestinya. Bagikan halaman web Anda dengan instruktur Anda. Jika semuanya baik-baik saja, lanjutkan ke pelajaran berikutnya