PWPB - Pertemuan 14 (Javascript)

Assalamu'alaikum Wr. Wb.
Salam sejahtera bagi kita semua...

Haii...Kembali lagi di SekolahQue. Untuk materi hari ini kita masih akan membahas mengenai Javascript, akan tetapi kali ini kita akan menggunakan struktur kontrol percabangan. ada yang tahu apa aja sihh struktur kontrol percabangan itu?

Sistem percabangan ini tidak hanya ada di javascript aja guys, tetapi di semua bahasa pemrograman pun ada. Untuk menggunakan sistem percabangan pada html kita harus menggunakan javascript. Langsung aja kita mulai ke penjelasan yang lebih rinci...

• IF : Pernyataan if ini digunakan jika kita hanya memiliki satu pernyataan yang akan dijalankan dengan syarat tertentu. Contoh if sebagai berikut : 

Program akan dijalankan apabila pernyataan terpenuhi atau bernilai true.

• ELSE : Digunakan untuk mengeksekusi beberapa kode  jika kondisi benar dan kode lain jika kondisi salah. Contoh program sebagai berikut :

• ELSE-IF : Percabangan yang digunakan saat kita memiliki  banyak kondisi (lebih dari 2) dan banyak pernyataan (lebih dari 2). Contoh program sebagai berikut :

• SWITCH : Struktur switch adalah sebuah struktur percabangan yang akan memeriksa  suatu variabel, lalu menjalankan perintah-perintah yang sesuai dengan kondisi  yang mungkin terjadi untuk vaiabel tersebut.

Jika kalian sudah membacanya, langsung aja kita ke codingan yukk...

//*(Klik setiap judul untuk mengetahui codingannya)

• If1Umur.html + JS internal + CSS

Hasil yang akan keluar berbentuk pop-up atau alert dan prompt. Ingat guys alert dan prompt tidak bisa di design dengan CSS karena alert dan prompt merupakan form bawan dari browser. Lalu apa sih perbedaan alert dan prompt. Lihat contoh di bawah ini :

SCREENSHOT:

Tampilan Prompt

 Tampilan Alert

Setelah Anda selesai mengisi prompt dan alert maka secara otomatis akan menampilkan angka yang sebelumnya anda input untuk di tampilkan di halaman web.

Tampilan Web

Bisa Anda simpulkan seperti apa perbedaan alert dan prompt. Jika kurang pahan, alert itu sebuah pemberitahuan atau peringatan (pop-up) pada sebuah browser, sedangkan prompt sebuah form pop up yang bisa kita isi teks atau angka di dalamnya.

• If2Olahraga.html + JS internal + CSS

Untuk yang kedua pun sama seperti tugas pertama guys, perbedaannya adalah jika yang pertama kita memasukan umur maka secara otomatis program / kondisi if-else akan berjalan sehingga memunculkan kata yang bernilai true. Sedangkan tugas kedua ini, kita menginput kata yang nantinya program if akan berjalan dan secara otomatis akan memunculkan sebuah kondisi yang kita input di prompt.

SCREENSHOT:

Tampilan Prompt

 Tampilan Alert

 Tampilan Web

• If-3jam.html + JS internal + CSS

If yang satu ini kita menggunakan variabel getHours untuk mendapatkan atau menambahkan jam sesuai waktu pada perangkat yang Anda gunakan. Dan secara otomatis akan memunculkan sebuah teks apabila kondisi yang terpenuhi sesuai dengan ketentuan jam yang telah di atur, jika melebihi jam yang telah di atur maka akan keluar teks yang lainnya. Salah satu contohnya seperti dibawah ini. Karena saya meng-upload dimalam hari maka yang keluar teks "Good Evening!".

SCREENSHOT:

• IF-ELSE.html + JS internal + CSS

Jika kita menggunakan struktur percabangan if-else, pasti akan ada suatu pernyataan yang tidak terpenuhi atau bernilai false. Seperti contoh di bawah ini nih guyss, dicodingan saya mengatur apabila waktu kurang dari jam 9 (Bernilai True) akan memunculkan teks "Selamat Pagi!" jika lebih dari jam 9 (Bernilai False) maka akan memunculkan teks "Hello World!"

SCREENSHOT:

• IF-ELSE IF -ELSE.html + JS Internal + CSS

Nahh...guys untuk IF-ELSE IF-ELSE ini digunakan apabila penggunaan struktur percabangan IF lebih dari satu atau pernyataan yang digunakan lebih dari satu. Jika kalian pernasaran apa sih perbedaanya menggunakan IF-ELSE aja. Jika menggunakan IF-ELSE IF ELSE ini di setiap Struktur percabangan IF maupun ELSE IF harus ditambahkan sebuah kondisi pada setiap strukturnya dan diakhiri dengan ELSE yang berfungsi untuk menampilkan sebuah kondisi yang memiliki nilai False. Sedangkan struktur percabangan IF-ELSE hanya mengisi sebuah kondisi pada IF saja dan langsung diakhiri dengan ELSE.

SCREENSHOT:

• SWITCHCASE1-PULSA.html + JS Internal + CSS

Untuk penggunaan SWTICH-CASE ini juga diperlukan sebuah kondisi untuk dijalankan. Dan SWITCH-CASE ini berfungsi untuk memeriksa suatu variabel, dan menjalankan perintah-perintah yang akan terjadi pada variabel tersebut. Seperti tampilan di bawah, apabila kita menginput angka "1" maka SWITCH-CASE akan langsung menjalankan perintah dan memunculkan suatu keteranga atau teks yang user ingin tampilkan pada perintah tersebut. Fungsi code "ParseInt" pada javascript adalah untuk mengkonversi sebuah string menjadi angka. 

SCREENSHOT:

Tampilan Prompt

 Tampilan Alert

Tampilan Web

• SWITCHCASE2.RMPADANG.html + JS Internal + CSS

Untuk SWITCH-CASE kedua ini juga sama seperti SWITCH-CASE yang pertama. Perbedaannya hanya pada perintah variabel dan perintah yang dijalankan oleh SWITCH-CASE.

SCREENSHOT:

Tampilan Alert

 Tampilan Prompt

 Tampilan Alert

 Tampilan Web

Quiz Praktikum 14!

Langsung saja kita lihat codingan yang telah saya selesaikan, dan saya memilih menggunakan struktur percabangan SWITCH-CASE. Karena, lebih mudah untuk menjalankan perintahnya dan tidak perlu menggunakan banyak kondisi yang ditambahkan.

• Quiz14.html + JS Internal + CSS

Jika kalian ingin mencoba menjalankannya bisa klik judul tugasnya. Dan jika belum tahu apa itu do-while, do-while adalah sebuah struktur perulangan yang berfungsi untuk mengulang (looping) sebuah perintah dan menjalankannya.

SCREENSHOT:

Sekian dulu ya...

Tunggu terus postingan SekolahQue yang akan datang...

Pelajari dan coba dirumah ya...

Assalamu'alaikum Wr. Wb.