Assalamualaikum Warahmatullahi Wabarokatuh
Pada sesi kali ini kita akan membahas tentang penerapat struktur kontrol percabangan. Sistem percabangan terbagi menjadi 4 yaitu :
Pada sesi kali ini kita akan membahas tentang penerapat struktur kontrol percabangan. Sistem percabangan terbagi menjadi 4 yaitu :
- IF
- ELSE IF
- ELSE
- SWITCH
IF digunakan jika hanya memiliki satu pernyataan yang akan dijalankan dengan syarat tertentu. Contoh IF sebagai berikut
 |
| If |
ELSE IF digunakan saat kita memiliki banyak kondisi (2 atau lebih) pernyataan. Contoh ELSE IF sebagai berikut
 |
| Else If |
ELSE digunakan jika pernyataan yang disyaratkan semuanya tidak terpenuhi maka block ELSE ini akan dijalankan. Contoh penggunaan ELSE
 |
| Else |
SWITCH adalah sebuah struktur percabangan yang akan memeriksa suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi yang mungkin terjadi untuk variabel tersebut.Contoh penggunaan SWITCH
 |
| Switch |
Ok itu dia macam macam struktur kontrol percabangan. Sekarang kita akan memulai latihannya :
if1Umur.html
Kita akan membuat if untuk mengecek sebuah umur. Contohnya jika umur kurang dari 17 maka ia dilarang mengikuti pemilu dan jika umur lebih dari 17 ia bisa mengikuti pemilu. Untuk lebih jelasnya lihat contoh code berikut :
HTML dan Embedded JS
CSS
Jika kode diatas dijalankan maka akan ada tampilan seperti berikut:
Tampilan di atas ditampilkan dengan prompt dan kemudian dimasukkan kedalam variable umur. Setelah dimasukkan maka akan ada IF-ELSE yang akan mengecek umur. Jika umur lebih dari 17 maka akan mucnul alert/pesan sebagai berikut :
Jika kurang dari 17 maka akan mucul alert/pesan sebagai berikut :
Gimana mudah bukan?
if2Olahraga.html
Kita coba buat lagi if nya dengan code sebagai berikut :
HTML dan Embedded JS
CSS
Jika dijalankan maka tamplanya akan seperti :
Jika kita mengisi dengan terjun payung atau sepeda gunung maka akan tampil seperti berikut :
if3-jam.html
Di Javascript juga bisa mengambil date/tanggal dan hours dengan method yang sudah disediakan oleh Javascript. dengan date(); newHours();. Kita akan coba buat sebuah pernyataan jika jam kurang dari 18:00 akan menampilkan pesan Good Day! dan jika lebih akan tampil Good Evening. Contoh tampilan.
IF+ELSE.html
Kita coba lagi buat dengan function date() dan Hours() kita buat lagi seperti diatas.Ini codenya:
IF+ELSE IF+ELSE.html
Kita coba lagi hehe dengan IF-ELSE IF-ELSE. Ini codenya :
SWITCHCASE1-PULSA.html
Kita coba menggunakan SWITCH, hasilnya sama seperti IF-ELSE IF-ELSE namun penulisannya jadi lebih singkat jika menggunakan SWITCH ini. Codenya:
HTML dan Embedded JS
CSS
Jika code diatas dijalankan maka tampilannya :
Jika kita menuliskan pada prompt dengan angka 1 maka akan seperti ini:
Jika kita isi dengan angka 2:
Dan jika tidak keduanya maka block default akan dijalankan dengan pesan "Pilihan sesuai no yang ada";
SWITCHCASE2-RMPADANG.html
Sekarang kita coba buat dengan opsinya menu-menu makanan padang. Jika di pilih maka akan ada alert makanan yang dipilih. Codenya :
HTML dan Embedded JS
CSS
Jika kode diatas dijalankan maka akan ada tampilan berikut :
Jika kita pilih salah satu opsi diatas maka akan tampil seperti berikut, contoh :
Maka akan ada alert menu yang dipilih.
QUIZZ 14
Begitulah......
CSS
Jika kode diatas dijalankan maka akan ada tampilan seperti berikut:
Tampilan di atas ditampilkan dengan prompt dan kemudian dimasukkan kedalam variable umur. Setelah dimasukkan maka akan ada IF-ELSE yang akan mengecek umur. Jika umur lebih dari 17 maka akan mucnul alert/pesan sebagai berikut :
Jika kurang dari 17 maka akan mucul alert/pesan sebagai berikut :
Gimana mudah bukan?
if2Olahraga.html
Kita coba buat lagi if nya dengan code sebagai berikut :
HTML dan Embedded JS
CSS
Jika dijalankan maka tamplanya akan seperti :
Jika kita mengisi dengan terjun payung atau sepeda gunung maka akan tampil seperti berikut :
if3-jam.html
Di Javascript juga bisa mengambil date/tanggal dan hours dengan method yang sudah disediakan oleh Javascript. dengan date(); newHours();. Kita akan coba buat sebuah pernyataan jika jam kurang dari 18:00 akan menampilkan pesan Good Day! dan jika lebih akan tampil Good Evening. Contoh tampilan.
IF+ELSE.html
Kita coba lagi buat dengan function date() dan Hours() kita buat lagi seperti diatas.Ini codenya:
IF+ELSE IF+ELSE.html
Kita coba lagi hehe dengan IF-ELSE IF-ELSE. Ini codenya :
SWITCHCASE1-PULSA.html
Kita coba menggunakan SWITCH, hasilnya sama seperti IF-ELSE IF-ELSE namun penulisannya jadi lebih singkat jika menggunakan SWITCH ini. Codenya:
HTML dan Embedded JS
CSS
Jika code diatas dijalankan maka tampilannya :
Jika kita menuliskan pada prompt dengan angka 1 maka akan seperti ini:
Jika kita isi dengan angka 2:
Dan jika tidak keduanya maka block default akan dijalankan dengan pesan "Pilihan sesuai no yang ada";
SWITCHCASE2-RMPADANG.html
Sekarang kita coba buat dengan opsinya menu-menu makanan padang. Jika di pilih maka akan ada alert makanan yang dipilih. Codenya :
HTML dan Embedded JS
CSS
Jika kode diatas dijalankan maka akan ada tampilan berikut :
Jika kita pilih salah satu opsi diatas maka akan tampil seperti berikut, contoh :
Maka akan ada alert menu yang dipilih.
QUIZZ 14
- Buatlah sebuah halaman sederhana yang berisi menu-menu perhitungan aritmatika
- Menggunakan funsi if-elseif-else / switch case
- Menu perhitungan minimal 5 perhitungan
- Menggunkan input dari keyboard (prompt)
- Posting di Blog, hanya hasilnya saja tanpa coding.
Hasilnya :
 |
| Input 1 |
 |
| Memilih operator |
 |
| Input 2 |
 |
| Hasil |
Coba kalian buat seperti foto diatas.. hehe..
Sekian pada pertemuan kali ini, Wassalamualaikum Warahmatullahi Wabarokatuh.
Komentar
Posting Komentar