Belajar Javascript Dasar 2

Latihan Fizz Buzz

Materi ini memiliki 1 buah lampiran. Namun Anda tidak dapat mengakses lampiran karena belum terdaftar di kursus ini. Klik disini untuk mendaftar.

Kali ini kita akan latihan menulis kode sebagai solusi dari permainan Fizz Buzz. Fizz Buzz adalah permainan anak-anak yang berfungsi untuk mengajarkan mereka mengenai pembagian. Anak-anak berkumpul dan membentuk suatu lingkaran, dan secara bergantian menyebutkan nomor urut, satu, dua, tiga dan seterusnya.

Namun ada aturan khusus dalam permainan Fizz Buzz ya. Untuk setiap angka yang habis dibagi 3, maka anak harus menyebutkan Fizz. Untuk setiap angka yang habis dibagi 5, maka anak harus menyebutkan Buzz. Dan untuk angka yang habis dibagi 3 dan habis dibagi 5, maka anak harus menyebutkan Fizz Buzz.

Sebagai latihan, tulislah sebuah script yang menyebutkan nomor 1 hingga 30, namun mesti mengikuti aturan dari permainan Fizz Buzz. Pause terlebih dahulu video ini dan coba kerjakan dahulu di komputer masing-masing. Nantinya kita akan kembali untuk membahas bagaimana cara mengerjakannya.

Sekarang kita bahas bagaimana cara membuat solusi latihan Fizz Buzz. Saya sudah menyiapkan 2 buah file, yaitu index.html dan fizzbuzz.js. Untuk file index.html, isinya hanya boilerplate. Bagian paling pentingnya adalah tag script yang mengarah ke fizzbuzz.js. Sedangkan file fizzbuzz.js masih kosong, akan kita isi.

Pertama kita melakukan perulangan dahulu mulai dari angka 1 hingga 30. Kita gunakan sintaks for ya.

for(let i = 1; i <= 30; i++)

Di dalam perulangan, kita tulis angka i.

console.log(i);

Kita simpan dan jalankan di browser. Kalau kita inspect dan pilih console, maka kita mendapatkan angka 1 hingga 30.

Selanjutnya kita mulai memasukkan aturan dari fizz buzz. Apabila angka habis dibagi 3, maka kita harus menggantinya menjadi Fizz. Kita bisa membuat percabangan dengan kata kunci if, dan kondisinya adalah apakah i habis dibagi 3. Kodenya menjadi:

if(i % 3 == 0)

Jika benar, maka kita tulis Fizz. Sedangkan kalau salah kita tulis i. Kita simpan dan lihat hasilnya di browser. Sekarang sudah ada Fizz di setiap kelipatan 3.

Selanjutnya kita masukkan aturan kedua. Setiap kelipatan 5, maka angka diganti menjadi Buzz. Jadi setelah kita melakukan pengecekan apakah habis dibagi 3, maka kita harus melakukan lagi pengecekan apakah habis dibagi 5. Disini kita menggunakan kata kunci else if, dengan kondisi apakah i habis dibagi 5. Kodenya menjadi:

else if(i % 5 == 0)

Jika benar maka kita tulis Buzz. Kita simpan dan lihat hasilnya di browser. Nah sekarang semua kelipatan 3 adalah Fizz dan semua kelipatan 5 adalah Buzz. Namun pada angka 15 masih adalah ya, karena hanya Fizz. Seharusnya adalah Fizz Buzz.Ada beberapa cara untuk mengimplementasikan Fizz Buzz, namun cara yang paling gampang adalah kita meletakkan kondisi yang paling spesifik di bagian paling atas if. Jadi kode kita di dalam perulangan, bagian paling atasnya kita ubah menjadi:

if((i % 3 == 0) && (i % 5 == 0))

Jika benar maka kita tulis Fizz Buzz. Jika salah barulah kita memeriksa apakah i habis dibagi 3.

Kita simpan dan jalankan di browser. Nah sekarang kelipatan 15 sudah menjadi Fizz Buzz ya. Dan latihan kita pun sudah selesai.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.