Latihan - Menambahkan interaktivitas dengan JavaScript

10 menit

JavaScript (atau ECMAScript) adalah bahasa pemrogram yang membantu Anda menambahkan interaktivitas ke halaman web Anda.

Misalnya, Anda dapat menggunakan JavaScript untuk menentukan perilaku yang terjadi saat pengguna memilih tombol, seperti membuka jendela pop-up. Dengan menggunakan JavaScript, Anda dapat menambah atau menghapus konten dari halaman web tanpa memuat ulang konten.

Di unit ini, Anda menyiapkan contoh file JavaScript untuk halaman web Anda. Di dalamnya, Anda membuat tombol untuk beralih antara tema terang dan gelap. Kemudian, Anda melampirkan tombol ke kode JavaScript yang melakukan pengalihan tema aktual. Terakhir, Anda memeriksa proyek yang sudah selesai menggunakan alat pengembang browser Anda.

Menautkan ke JavaScript

Seperti CSS, Anda dapat menambahkan JavaScript langsung ke file HTML, tetapi praktik terbaik yang disarankan adalah menyimpan JavaScript Anda di file terpisah. Menambahkan kode JavaScript Anda ke file terpisah memudahkan Anda untuk menggunakannya kembali di beberapa halaman web. Misalnya, Anda dapat membuat pemberitahuan pop-up dengan menambahkan kode berikut di mana saja dalam isi halaman web Anda:

<script>alert('Hello World')</script>

Namun, lebih baik menambahkan kode JavaScript Anda ke file terpisah yang dapat Anda tautkan ke setiap file yang membutuhkan fungsionalitas kustom Anda.

Tag <script> skrip HTML memungkinkan kami menautkan ke file JavaScript eksternal, yang merupakan cara Anda mengonfigurasi aplikasi web Anda dalam latihan ini.

Di Visual Studio Code, buka file Anda index.html .
Temukan elemen penutup </body> dan letakkan kursor Anda pada baris baru di atasnya. Masukkan script:src dan tekan Enter. Tag pembuka dan penutup untuk <script> elemen ditambahkan ke kode Anda.

Modifikasi elemen <script> untuk memuat file app.js Anda seperti yang ditunjukkan dalam contoh berikut. Pastikan bahwa elemen </ul> terletak setelah elemen penutup untuk daftar.

...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<script src="app.js"></script>
...

Anda dapat menempatkan elemen <script> di <head> atau di tempat lain dalam <body>. Namun, menempatkan <script> elemen di akhir bagian <body> memungkinkan semua konten halaman ditampilkan di layar terlebih dahulu, sebelum skrip dimuat.

Menambahkan toleransi kegagalan

Di file HTML Anda, tambahkan elemen <noscript> setelah tag penutup </script>, yang dapat digunakan untuk menampilkan pesan jika JavaScript dinonaktifkan.
```
<script src="app.js"></script>
<noscript>You need to enable JavaScript to view the full site.</noscript>
```
Menambahkan elemen <noscript> adalah contoh toleransi kegagalan atau degradasi yang lancar. Saat Anda menggunakan elemen , <noscript> kode Anda dapat mendeteksi dan merencanakan kapan fitur tidak didukung atau tersedia.

Mengatur mode ketat

JavaScript dirancang agar mudah dipelajari dan memungkinkan pengembang untuk membuat kesalahan tertentu. Misalnya, JavaScript tidak melemparkan kesalahan saat Anda menggunakan variabel yang salah eja, dan sebaliknya membuat variabel global baru. Saat Anda mulai mempelajari JavaScript, memiliki lebih sedikit kesalahan akan lebih mudah. Namun, ini dapat menyebabkan penulisan kode yang lebih sulit bagi browser untuk mengoptimalkan dan lebih sulit bagi Anda untuk debug.

Beralih ke mode ketat untuk mendapatkan informasi kesalahan yang lebih berguna saat Anda membuat kesalahan.

Di Visual Studio Code, buka app.js file dan masukkan yang berikut ini:
```
'use strict';
```

Menambahkan tombol

Anda memerlukan cara untuk memungkinkan pengguna Anda beralih antara tema terang dan gelap di halaman web Anda. Dalam latihan ini, Anda menerapkan fungsionalitas tersebut dengan elemen HTML <button> .

Di file HTML Anda (index.html), tambahkan <button> elemen. Letakkan tombol di dalam <div> elemen dan tambahkan tepat setelah akhir daftar (</ul>).
```
...
<ul>
  <li class="list">Add visual styles</li>
  <li class="list">Add light and dark themes</li>
  <li>Enable switching the theme</li>
</ul>
<div>
  <button class="btn">Dark</button>
</div>
<script src="app.js"></script>
...
```
Perhatikan bahwa <button> elemen dalam contoh ini memiliki atribut kelas yang dapat Anda gunakan untuk menerapkan gaya CSS.
Simpan perubahan ke file HTML Anda dengan pintasan keyboard Control+S di Windows atau Command+S di macOS.
Di file CSS Anda (main.css), tambahkan aturan baru dengan pemilih .btn kelas untuk tombol HTML Anda. Untuk membuat warna tombol berbeda dari warna tema terang atau gelap pada umumnya, atur properti color dan background-color dalam aturan ini. Saat halaman Anda ditampilkan, properti .btn ini menggantikan properti default yang diatur dalam aturan body dalam file CSS Anda.
```
.btn {
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}
```

Selanjutnya, ubah aturan .btn untuk menambahkan beberapa gaya untuk ukuran, bentuk, tampilan, dan penempatan tombol. CSS berikut membuat tombol bulat di sebelah kanan judul halaman.

.btn {
  position: absolute;
  top: 20px;
  left: 250px;
  height: 50px;
  width: 50px;
  border-radius: 50%;
  border: none;
  color: var(--btnFontColor);
  background-color: var(--btnBg);
}

Selanjutnya, perbarui CSS untuk tema terang dan gelap. Tentukan beberapa variabel baru, --btnBg dan --btnFontColor, untuk menentukan warna latar belakang dan warna font khusus tombol.

.light-theme {
  --bg: var(--green);
  --fontColor: var(--black);
  --btnBg: var(--black);
  --btnFontColor: var(--white);
}

.dark-theme {
  --bg: var(--black);
  --fontColor: var(--green);
  --btnBg: var(--white);
  --btnFontColor: var(--black);
}

Simpan perubahan ke file CSS Anda dengan pintasan keyboard Control+S di Windows atau Command+S di macOS.

Menambahkan penanganan aktivitas

Untuk membuat tombol melakukan sesuatu saat Anda memilihnya, Anda memerlukan penanganan aktivitas di file JavaScript Anda. Penanganan aktivitas adalah cara untuk menjalankan fungsi JavaScript saat peristiwa terjadi di halaman. Untuk tombol, mari kita tambahkan penanganan aktivitas untuk peristiwa click; fungsi penanganan aktivitas berjalan saat peristiwa click terjadi.

Sebelum dapat menambahkan penanganan aktivitas, Anda memerlukan referensi ke elemen tombol.

Di file JavaScript Anda (app.js), gunakan document.querySelector untuk mendapatkan referensi tombol.
```
const switcher = document.querySelector('.btn');
```
Fungsi document.querySelector menggunakan pemilih CSS, sama seperti yang Anda gunakan di file CSS Anda. switcher sekarang menjadi referensi ke tombol di halaman.
Selanjutnya, tambahkan penanganan aktivitas untuk kejadian click. Dalam kode berikut, Anda menambahkan listener untuk acara click dan menentukan fungsi penanganan acara yang dijalankan browser ketika acara click terjadi.
```
switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');
});
```

Dalam kode sebelumnya, Anda menggunakan metode toggle untuk mengubah atribut kelas elemen <body>. Metode ini secara otomatis menambahkan atau menghapus kelas light-theme dan dark-theme. Kode ini menerapkan gaya gelap alih-alih gaya terang jika Anda mengklik, lalu gaya terang alih-alih gelap jika Anda mengklik lagi.

Tetapi, label untuk tombol juga perlu diperbarui guna menampilkan tema yang benar. Jadi, Anda perlu menambahkan pernyataan if untuk menentukan tema saat ini, dan memperbarui label tombol.

Berikut adalah tampilan kode JavaScript Anda dengan penanganan aktivitas yang ditambahkan:

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }
});

Ini adalah konvensi JavaScript untuk menggunakan camel case untuk nama variabel dengan lebih dari satu kata; misalnya, variabel className.

Pesan konsol

Sebagai pengembang web, Anda dapat membuat pesan tersembunyi yang tidak terlihat di halaman web Anda, tetapi dapat dibaca di Alat Pengembang di tab Konsol. Menggunakan pesan konsol sangat membantu untuk melihat hasil kode Anda.

Di file JavaScript Anda, tambahkan panggilan ke console.log setelah pernyataan if, tetapi di dalam pendengar acara.

Setelah Anda membuat perubahan ini, kode JavaScript lengkap Anda akan terlihat seperti ini.

'use strict';

const switcher = document.querySelector('.btn');

switcher.addEventListener('click', function() {
    document.body.classList.toggle('light-theme');
    document.body.classList.toggle('dark-theme');

    const className = document.body.className;
    if(className == "light-theme") {
        this.textContent = "Dark";
    } else {
        this.textContent = "Light";
    }

    console.log('current class name: ' + className);
});

Saat Anda berada di file JavaScript di Visual Studio Code, Anda dapat menggunakan pelengkapan otomatis dengan memasukkan console.log dan menekan tombol log.

Anda dapat menentukan string teks dengan tanda kutip tunggal atau ganda di sekitar teks.

Membuka di browser

Untuk mempratinjau, klik index.html kanan dan pilih Buka Di Browser Default, atau muat ulang tab browser yang sama dengan menekan F5.
Pilih tombol Gelap baru untuk beralih ke tema gelap.
Pastikan semuanya terlihat benar dan berperilaku seperti yang diharapkan. Jika tidak, Anda harus meninjau langkah-langkah sebelumnya untuk melihat apakah Anda melewatkan sesuatu.

Memeriksa halaman di alat pengembang

Buka Alat Pengembang dengan mengklik kanan dan memilih Periksa, atau dengan menggunakan pintasan keyboard F12. Atau, gunakan pintasan Ctrl+Shift+I di Windows atau Linux, dan Option+Command+I di macOS.
Pilih tab Elemen dan pilih tab Gaya .
Pilih elemen <body>. Di tab Gaya, lihat tema yang diterapkan. Jika tema saat ini gelap, gaya dark-theme akan diterapkan.

Pastikan tema gelap dipilih.
Pilih tab Konsol untuk melihat pesan console.log, current class name: dark-theme.

Dengan menggunakan konsol Anda bisa mendapatkan wawasan menarik dari kode JavaScript Anda. Tambahkan lebih banyak pesan konsol untuk memahami bagian kode mana yang akan dijalankan dan untuk mengetahui nilai variabel lain saat ini.

Untuk mempelajari selengkapnya tentang konsol, lihat artikel Gambaran umum konsol.

Saran dan Komentar

Apakah halaman ini membantu?