JavaScript adalah bahasa pemrograman yang sangat populer di dunia web. Dengan kemampuannya yang kuat, JavaScript dapat digunakan untuk membuat interaksi dinamis di situs web Anda. Jika Anda baru belajar tentang JavaScript, artikel ini akan memberikan contoh-contoh sederhana yang dapat Anda gunakan sebagai panduan awal.
Di dalam artikel ini, Anda akan menemukan 10 contoh JavaScript sederhana yang dapat Anda pelajari dan terapkan. Setiap contoh akan mencakup penjelasan rinci dan langkah-langkah implementasinya. Dengan mengikuti panduan ini, Anda akan dapat memahami dasar-dasar JavaScript dan memulai perjalanan Anda dalam mengembangkan situs web yang interaktif.
Mengubah Teks pada Halaman
Contoh pertama ini akan mengajarkan Anda cara mengubah teks pada halaman web menggunakan JavaScript. Anda akan belajar tentang metode innerHTML dan bagaimana menggunakannya untuk mengedit elemen HTML.
Langkah pertama adalah memilih elemen HTML yang ingin Anda ubah teksnya. Anda dapat menggunakan metode getElementById() untuk memilih elemen berdasarkan ID-nya atau menggunakan metode getElementsByTagName() untuk memilih elemen berdasarkan tag. Setelah memilih elemen, Anda dapat menggunakan properti innerHTML untuk mengubah teksnya.
Mengubah Teks pada Elemen dengan ID
Contoh berikut menunjukkan bagaimana mengubah teks pada elemen dengan ID tertentu:
“`javascript“`
Pada contoh di atas, kita memilih elemen dengan ID “judul” dan mengubah teksnya menjadi “Contoh Javascript Sederhana”. Anda dapat mengganti ID dengan ID elemen yang ingin Anda ubah.
Mengubah Teks pada Elemen dengan Tag
Contoh berikut menunjukkan bagaimana mengubah teks pada elemen dengan tag tertentu:
“`javascript```
Pada contoh di atas, kita memilih semua elemen <p> dan mengubah teksnya menjadi "Ini adalah paragraf baru.". Anda dapat mengganti tag dengan tag elemen yang ingin Anda ubah.
Validasi Formulir
Formulir adalah bagian penting dari banyak situs web. Pada contoh ini, Anda akan belajar cara menggunakan JavaScript untuk memvalidasi input pada formulir. Anda akan mengetahui cara memeriksa apakah input sudah terisi atau memenuhi kriteria yang ditentukan sebelum mengirimkan formulir.
Langkah pertama dalam validasi formulir adalah memilih formulir menggunakan metode getElementById() atau getElementsByTagName(). Setelah memilih formulir, Anda dapat menambahkan event listener pada tombol submit untuk memvalidasi input sebelum mengirimkan formulir.
Memvalidasi Input Wajib Diisi
Contoh berikut menunjukkan bagaimana memvalidasi bahwa input pada formulir harus diisi:
```javascript```
Pada contoh di atas, kita memvalidasi bahwa input dengan ID "myInput" harus diisi sebelum mengirimkan formulir. Jika input kosong, event listener akan mencegah pengiriman formulir dan menampilkan pesan kesalahan pada elemen dengan ID "error". Anda dapat menyesuaikan ID input dan pesan kesalahan sesuai dengan formulir Anda.
Memvalidasi Input dengan Kriteria Tertentu
Contoh berikut menunjukkan bagaimana memvalidasi input dengan kriteria tertentu, misalnya panjang minimum atau format yang diharapkan:
```javascript```
Pada contoh di atas, kita memvalidasi bahwa input dengan ID "myInput" harus memiliki panjang minimal 6 karakter dan hanya berisi angka. Jika input tidak memenuhi kriteria tersebut, event listener akan mencegah pengiriman formulir dan menampilkan pesan kesalahan yang sesuai.
Membuat Galeri Gambar
Membuat galeri gambar sederhana dengan JavaScript dapat memberikan pengalaman visual yang menarik bagi pengunjung situs Anda. Di contoh ini, Anda akan belajar cara membuat galeri gambar dengan efek slide dan tombol navigasi yang mudah digunakan.
Langkah pertama dalam membuat galeri gambar adalah membuat struktur HTML yang sesuai. Anda dapat menggunakan elemen <div> untuk mengelompokkan gambar-gambar dalam galeri dan elemen <img> untuk menampilkan gambar. Setelah itu, Anda dapat menambahkan tombol navigasi dan event listener untuk mengatur perpindahan gambar.
Membuat Struktur HTML Galeri
Contoh berikut menunjukkan struktur HTML dasar untuk galeri gambar:
```html
```
Pada contoh di atas, kita menggunakan elemen <div> dengan ID "galeri" untuk mengelompokkan gambar-gambar dalam galeri. Setiap gambar direpresentasikan dengan elemen <img> dengan atribut src yang menunjukkan lokasi gambar.
Mengatur Perpindahan Gambar
Contoh berikut menunjukkan bagaimana mengatur perpindahan gambar menggunakan tombol navigasi:
```javascript```
Pada contoh di atas, kita menggunakan variabel index untuk melacak indeks gambar yang sedang ditampilkan. Ketika tombol "Sebelumnya" ditekan, indeks akan dikurangi dan jika indeks kurang dari 0, maka indeks akan diatur ke indeks terakhir. Ketika tombol "Selanjutnya" ditekan, indeks akan ditambah dan jika indeks lebih dari atau sama dengan jumlah gambar, maka indeks akan diatur ke 0. Setelah mengatur indeks, fungsi tampilkanGambar() akan dipanggil untuk menampilkan gambar yang sesuai.
Menghitung Total Harga
Bagi situs web e-commerce, menghitung total harga adalah fitur yang penting. Pada contoh ini, Anda akan belajar cara menggunakan JavaScript untuk menghitung total harga berdasarkan harga barang dan jumlah yang dipilih oleh pengguna.
Langkah pertama dalam menghitung total harga adalah memilih elemen-elemen yang diperlukan dari halaman HTML menggunakan metode `getElementById()` atau `getElementsByTagName()`. Anda perlu memilih elemen harga barang dan elemen jumlah yang diinput oleh pengguna.
Memilih Elemen Harga dan Jumlah
Contoh berikut menunjukkan bagaimana memilih elemen harga dan jumlah dari halaman HTML:
```javascript```
Pada contoh di atas, kita memilih elemen dengan ID "harga" untuk mendapatkan nilai harga barang dan elemen dengan ID "jumlah" untuk mendapatkan nilai jumlah barang yang diinput oleh pengguna. Selain itu, kita juga memilih elemen dengan ID "total" untuk menampilkan total harga yang dihitung.
Menghitung Total Harga
Contoh berikut menunjukkan bagaimana menghitung total harga berdasarkan harga barang dan jumlah yang diinput:
```javascript```
Pada contoh di atas, kita menambahkan event listener pada elemen jumlahBarang yang akan terpicu ketika nilai jumlah berubah. Di dalam event listener, kita mengambil nilai harga dan jumlah barang yang diinput oleh pengguna dan mengalikannya untuk mendapatkan total harga. Jika total harga valid (bukan NaN), maka kita menampilkan total harga tersebut pada elemen totalHarga. Jika tidak valid, kita menampilkan total harga sebagai 0.
Menampilkan Waktu dan Tanggal
Menampilkan waktu dan tanggal aktual di situs web Anda dapat memberikan informasi yang berguna bagi pengunjung. Di contoh ini, Anda akan belajar cara menggunakan JavaScript untuk menampilkan waktu dan tanggal secara real-time.
Langkah pertama dalam menampilkan waktu dan tanggal adalah memilih elemen di halaman HTML yang akan menampilkan informasi tersebut menggunakan metode `getElementById()` atau `getElementsByTagName()`. Setelah itu, kita dapat menggunakan fungsi `setInterval()` untuk mengupdate waktu dan tanggal secara periodik.
Memilih Elemen untuk Menampilkan Waktu dan Tanggal
Contoh berikut menunjukkan bagaimana memilih elemen untuk menampilkan waktu dan tanggal:
```javascript```
Pada contoh di atas, kita memilih elemen dengan ID "waktu" dan "tanggal" untuk menampilkan waktu dan tanggal. Pastikan elemen-elemen tersebut telah ada di halaman HTML.
Menampilkan Waktu dan Tanggal
Contoh berikut menunjukkan bagaimana menampilkan waktu dan tanggal secara real-time:
```javascript```
Pada contoh di atas, kita menggunakan fungsi `updateWaktu()` untuk mengupdate waktu dan fungsi `updateTanggal()` untuk mengupdate tanggal. Dalam kedua fungsi tersebut, kita menggunakan objek `Date()` untuk mendapatkan waktu dan tanggal sekarang. Kemudian, kita memformat waktu dan tanggal tersebut menjadi string yang sesuai dan menampilkan di elemen yang telah dipilih. Kita menggunakan fungsi `setInterval()` untuk memanggil kedua fungsi tersebut setiap 1000 milidetik (1 detik) agar waktu dan tanggal terus diperbarui.
Membuat Menu Dropdown
Menu dropdown adalah komponen yang sering digunakan dalam desain situs web modern. Pada contoh ini, Anda akan belajar cara membuat menu dropdown interaktif dengan JavaScript.
Langkah pertama dalam membuat menu dropdown adalah menambahkan event listener pada elemen yang akan memicu menu dropdown, seperti tombol atau link. Saat event terpicu, kita akan menambahkan atau menghapus class pada elemen dropdown untuk mengontrol tampilan menu dropdown.
Membuat Tombol atau Link untuk Menu Dropdown
Contoh berikut menunjukkan bagaimana membuat tombol atau link untuk memicu menu dropdown:
```html
```
Pada contoh di atas, kita menggunakan elemen `
- ` dengan ID "dropdownMenu" sebagai kontainer untuk pilihan-pilihan dalam menu dropdown. Setiap pilihan diberikan dalam elemen `
- ` dan elemen `` sebagai link.
Menampilkan dan Menyembunyikan Menu Dropdown
Contoh berikut menunjukkan bagaimana menampilkan dan menyembunyikan menu dropdown saat tombol atau link ditekan:
```javascript```
Pada contoh di atas, kita menambahkan event listener pada elemen dropdownButton yang akan terpicu saat tombol ditekan. Di dalam event listener, kita menggunakan metode `classList.toggle()` untuk menambah atau menghapus class "show" pada elemen dropdownMenu. Class "show" akan mengontrol tampilan menu dropdown dengan CSS.
Mengubah Warna Latar Belakang
Dalam contoh ini, Anda akan belajar cara menggunakan JavaScript untuk mengubah warna latar belakang situs web secara dinamis. Anda akan mengetahui cara menghubungkan perubahan warna dengan tindakan pengguna, seperti mengklik tombol atau menggulir halaman.
Langkah pertama dalam mengubah warna latar belakang adalah memilih elemen yang akan diubah warnanya menggunakan metode `getElementById()` atau `getElementsByTagName()`. Setelah itu, kita dapat menambahkan event listener pada elemen yang akan memicu perubahan warna.
Mengubah Warna Latar Belakang saat Mengklik Tombol
Contoh berikut menunjukkan bagaimana mengubah warna latar belakang saat tombol ditekan:
```javascript```
Pada contoh di atas, kita menggunakan elemen `
Fungsi `getRandomColor()` digunakan untuk menghasilkan kode warna acak dalam format heksadesimal. Dalam for loop, kita membangkitkan 6 karakter acak dari string huruf yang terdiri dari angka 0-9 dan huruf A-F. Setiap karakter acak ditambahkan ke variabel warna yang berawalan "#" dan akhirnya dikembalikan sebagai kode warna yang lengkap.
Mengubah Warna Latar Belakang saat Menggulir Halaman
Contoh berikut menunjukkan bagaimana mengubah warna latar belakang saat pengguna menggulir halaman:
```javascript```
Pada contoh di atas, kita menambahkan event listener pada objek `window` yang akan terpicu saat pengguna menggulir halaman. Di dalam event listener, kita menghitung posisi pengguliran dengan `window.scrollY`, tinggi konten dengan `document.documentElement.scrollHeight`, dan tinggi jendela tampilan dengan `window.innerHeight`. Kemudian, kita menghitung persentase posisi pengguliran dengan `(posisi / tinggi) * 100` dan menggunakan persentase tersebut untuk mengubah warna latar belakang menggunakan format warna HSL.
Membuat Efek Hover pada Gambar
Memberikan efek hover pada gambar dapat membuat tampilan situs web Anda lebih menarik. Di contoh ini, Anda akan belajar cara menggunakan JavaScript untuk membuat efek hover yang mengubah gambar ketika kursor pengguna mengarah pada gambar tersebut.
Langkah pertama dalam membuat efek hover pada gambar adalah memilih elemen gambar menggunakan metode `getElementById()` atau `getElementsByTagName()`. Setelah itu, kita dapat menambahkan event listener pada elemen gambar yang akan memicu perubahan gambar saat efek hover aktif.
Memilih Elemen Gambar
Contoh berikut menunjukkan bagaimana memilih elemen gambar:
```html
Pada contoh di atas, kita menggunakan elemen `
` dengan ID "gambar" dan atribut `src` yang menunjukkan lokasi gambar. Pastikan elemen gambar tersebut telah ada di halaman HTML.
Mengubah Gambar saat Efek Hover Aktif
Contoh berikut menunjukkan bagaimana mengubah gambar saat efek hover aktif:
```javascript```
Pada contoh di atas, kita menambahkan event listener pada elemen gambar yang akan terpicu saat pengguna mengarahkan kursor ke gambar (`mouseover`) dan saat pengguna mengarahkan kursor keluar dari gambar (`mouseout`). Di dalam event listener `mouseover`, kita mengubah atribut `src` pada elemen gambar menjadi lokasi gambar baru yang ingin ditampilkan saat efek hover aktif. Di dalam event listener `mouseout`, kita mengubah atribut `src` pada elemen gambar kembali ke lokasi gambar asli.
Membuat Fitur Autocomplete
Membuat fitur autocomplete pada kotak pencarian dapat membantu pengguna menemukan hasil yang mereka inginkan dengan lebih cepat. Di contoh ini, Anda akan belajar cara menggunakan JavaScript untuk membuat fitur autocomplete yang menampilkan saran pencarian saat pengguna mengetik.
Langkah pertama dalam membuat fitur autocomplete adalah memilih elemen input untuk kotak pencarian menggunakan metode `getElementById()` atau `getElementsByTagName()`. Setelah itu, kita dapat menambahkan event listener pada elemen input yang akan memicu penampilan saran pencarian saat pengguna mengetik.
Memilih Elemen Input
Contoh berikut menunjukkan bagaimana memilih elemen input untuk kotak pencarian:
```html
```
Pada contoh di atas, kita menggunakan elemen `` dengan ID "pencarian" sebagai kotak pencarian dan elemen `
` dengan ID "saran" sebagai kontainer untuk menampilkan saran pencarian. Pastikan elemen-elemen tersebut telah ada di halaman HTML.Menampilkan Saran Pencarian
Contoh berikut menunjukkan bagaimana menampilkan saran pencarian saat pengguna mengetik:
```javascript```
Pada contoh di atas, kita menambahkan event listener pada elemen pencarian yang akan terpicu saat pengguna mengetik (`input`). Di dalam event listener, kita mengambil nilai yang diinput oleh pengguna dan mengubahnya menjadi huruf kecil semua dengan `toLowerCase()`. Selanjutnya, kita memeriksa setiap data pada `dataPencarian` apakah mengandung nilai pencarian dengan menggunakan `includes()`. Jika iya, data tersebut ditambahkan ke dalam array `saranPencarian`.
Setelah mendapatkan array `saranPencarian`, kita memanggil fungsi `tampilkanSaran()` untuk menampilkan saran pencarian di dalam elemen `saran`. Dalam fungsi `tampilkanSaran()`, kita menggunakan variabel `hasilSaran` untuk menyimpan elemen-elemen `
` yang berisi saran pencarian. Setiap elemen `
` berisi satu saran pencarian dari `saranPencarian`. Akhirnya, kita mengubah HTML di dalam elemen `saran` dengan menggunakan properti `innerHTML`.
Menambahkan Efek Animasi
Animasi dapat memberikan sentuhan visual yang menarik pada situs web Anda. Di contoh ini, Anda akan belajar cara menggunakan JavaScript untuk menambahkan efek animasi, seperti pergerakan, perubahan ukuran, dan perubahan warna, pada elemen HTML.
Langkah pertama dalam menambahkan efek animasi adalah memilih elemen yang akan dianimasikan menggunakan metode `getElementById()` atau `getElementsByTagName()`. Setelah itu, kita dapat menggunakan CSS dan JavaScript untuk mengubah properti elemen secara bertahap sehingga menciptakan efek animasi.
Memilih Elemen yang Akan Dianimasikan
Contoh berikut menunjukkan bagaimana memilih elemen yang akan dianimasikan:
```html
```
Pada contoh di atas, kita menggunakan elemen `
` dengan ID "elemen" sebagai elemen yang akan dianimasikan. Kita juga memberikan class "animasi" pada elemen tersebut untuk menghubungkan animasi dengan CSS. Pastikan elemen yang akan dianimasikan telah ada di halaman HTML.Mengubah Properti Elemen secara Bertahap
Contoh berikut menunjukkan bagaimana mengubah properti elemen secara bertahap untuk menciptakan efek animasi:
```javascript```
Pada contoh di atas, kita menggunakan variabel `posisi` untuk melacak posisi elemen yang dianimasikan dan variabel `kecepatan` untuk menentukan seberapa cepat elemen bergerak. Di dalam fungsi `animasi()`, kita mengubah nilai `posisi` dengan menambahkannya dengan `kecepatan` dan mengatur properti `left` pada elemen dengan nilai posisi tersebut. Jika posisi elemen melebihi lebar jendela tampilan (`window.innerWidth`), maka posisi akan diatur kembali ke -100 untuk memulai animasi dari awal. Terakhir, kita menggunakan `requestAnimationFrame()` untuk memanggil kembali fungsi `animasi()` secara berulang sehingga menciptakan efek animasi yang mulus.
Anda dapat mengganti properti yang diubah dan nilai-nilai yang digunakan dalam animasi sesuai dengan kebutuhan Anda. Selain itu, Anda juga dapat menambahkan animasi lain seperti perubahan ukuran atau perubahan warna dengan mengubah properti-properti yang sesuai pada elemen yang dianimasikan.
Dengan mempelajari contoh-contoh JavaScript sederhana ini, Anda telah mendapatkan dasar yang kuat untuk mengembangkan situs web yang interaktif. Ingatlah untuk terus berlatih dan menggali lebih dalam tentang JavaScript untuk menguasai bahasa ini dengan baik. Selamat belajar!
Related video of Contoh Javascript Sederhana: Panduan Lengkap dan Terperinci