Scribd
Unggah
31 tayangan

Modul 6 - Statement Control Java Script

Modul ini membahas tentang statement control program Java Script berupa percabangan dan perulangan. Modul ini menjelaskan penggunaan sintaks if, if else, if else if, switch untuk percabangan dan for, while untuk perulangan beserta contoh kodenya.

Diunggah oleh

riganormanda p
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
31 tayangan

Modul 6 - Statement Control Java Script

Modul ini membahas tentang statement control program Java Script berupa percabangan dan perulangan. Modul ini menjelaskan penggunaan sintaks if, if else, if else if, switch untuk percabangan dan for, while untuk perulangan beserta contoh kodenya.

Diunggah oleh

riganormanda p
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 13

1

MODUL PERKULIAHAN

W152100023 –
Pemrograman
Web
Statement Control Program Java Script

Abstrak Sub-CPMK

Mengenal dan memahmi dasar- - Mahasiswa dapat menggunakan sintak


dasar Sintak Javascript berbentuk percabangan dan perulangan dan dapat
Percabangan dan perulangan menyelesaikan studi kasus pada soal.

JavaScript
Percabangan

Pernyataan bersyarat digunakan untuk menampilkan aksi yang berbeda berdasarkan


kondisi yang berbeda. Pernyataan bersyarat dalam Javascript diantaranya if, if ... else ...,
if ... else if ..., dan switch.
1. Pernyataan if
Pernyataan if digunakan untuk mengeksekusi code apabila syarat yang ditentukan di
penuhi (bernilai benar ). Pernyataan if memiliki syntax sebagai berikut :
if (syarat)
{
Kode yang dieksekusi apabila syarat dipenuhi
}

Contoh 1
<html>
<body>
<script language="JavaScript" type="text/javascript">
var bil;
var status;
bil = prompt("Masukkan sebarang bilangan : ");
if (bil > 10)
{
status = "Anda telah memasukkan bilangan lebih besar dari
10";
}
document.write(status);
</script>
</body>
</html>

2. Pernyataan if … else

2022 Pemrograman Web


2 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Pernyataan if … else digunakan untuk mengeksekusi beberapa kode apabila syarat
yang dtentukan terpenuhi dan untuk kode apabila syarat tidak dipenuhi. Syntax dari
pernyataan if … else … sebagai berikut:

if (syarat)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
Else
{
Kode yang dieksekusi apabila syarat tidak dipenuhi
}
Contoh 2
<html>
<body>
<script language="JavaScript" type="text/javascript">
var tanggal;
var status;
tanggal = prompt("Masukkan tanggal hari ini : ");
if (tanggal > 15)
{
status = "Tanggal " + tanggal + " adalah tanggal tua";
}
else
{
status = "Tanggal " + tanggal + " adalah tanggal muda";
}
document.write(status);
</script>
</body>
</html>

2022 Pemrograman Web


3 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
3. Pernyataan if … else if …
Pernyataan if … else if … else … digunakan untuk mengeksekusi satu dari beberapa
kode apabila syarat yang ditentukan terpenuhi dan untuk kode apabila syarat tidak
dipenuhi. Syntax dari pernyataan if … else … sebagai berikut:

if (syarat 1)
{
Kode yang dieksekusi apabila syarat 1 dipenuhi
}
else if (syarat 2)
{
Kode yang dieksekusi apabila syarat 2 dipenuhi
}
else
{
Kode yang dieksekusi apabila syarat 1 dan syarat 2 tidak
dipenuhi
}

Contoh 3
<html>
<body>
<script language="JavaScript" type="text/javascript">
var bil;
var status;
bil = prompt("Masukkan sebarang bilangan : ");
if (bil > 10)
{
status = "Anda telah memasukkan bilangan lebih besar dari 10";
}
else if (bil < 10)
{
status = "Anda telah memasukkan bilangan lebih kecil dari 10";
}

2022 Pemrograman Web


4 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
else
{
status = "Anda telah memasukkan bilangan sama dengan 10";
}
document.write(status);
</script>
</body>
</html>
4. Pernyataan Switch
Pernyataan switch memiliki fungsi yang sama dengan pernyataan if … else if … else
… Syntax dari pernyataan ini adalah sebagai berikut :
Switch(variabel)
{
case option1 : statement 1
break;
case option2 : statement 2
break;
case option3 : statement 3
break;
...
...
...
default : statement x
break;
}

Proses dari SWITCH di atas adalah melakukan cek pada value variabel. Apabila
valuenya sama dengan option1 maka statement yang dilakukan adalah statement 1.
Apabila valuenya sama dengan option2 maka statement 2 yang dijalankan, begitu
seterusnya. Namun apabila tidak ada value yang sama, maka statement x lah yang
dijalankan. Tipe data dari variabel yang akan dicek haruslah ordinal, misalnya integer.
Dalam hal ini tipe data riil tidak dapat digunakan. Untuk memastikan bahwa nilai yang
akan dicek pada variabel adalah bertipe integer, sebaiknya gunakan perintah
parseInt().
Contoh 4
<html>

2022 Pemrograman Web


5 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
<body>
<script language=”JavaScript” type=”text/javascript”>
var nilaiAngka;
var nilaiHuruf;
nilaiAngka = parseInt(prompt(“Masukkan sebuah bil
bulat 1 s/d 5 : “));
switch(nilaiAngka)
{
case 1 : document.write(“Anda memasukkan bilangan 1”);
break;
case 2 : document.write(“Anda memasukkan bilangan 2”);
case 3 : document.write(“Anda memasukkan bilangan 3”);
break;
case 4 : document.write(“Anda memasukkan bilangan 4”);
break;
case 5 : document.write(“Anda memasukkan bilangan 5”);
break;
default:document.write(“Bilangan yang Anda masukkan tidak 1 s/d
5”);
break;
}
</script>
</body>
</html>

Contoh 5
<!DOCTYPE html>
<html>
<body>
<p>Klik Tombol untuk mengetahui hari ini.</p>
<button onclick=”fungsihari()”>Cek Hari</button>
<p id=”hari”></p>
<script>
function fungsihari()
{
var x;
var d=new Date().getDay();

2022 Pemrograman Web


6 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
switch (d)
{
case 0:
x=”Hari ini adalah hari Minggu”;
break;
case 1:
x=”Hari ini adalah hari Senin”;
break;
case 2:
x=”Hari ini adalah hari Selasa”;
break;
case 3:
x=”Hari ini adalah hari Rabu”;
break;
case 4:
x=”Hari ini adalah hari Kamis”;
break;
case 5:
x=”Hari ini adalah hari Jumat”;
break;
case 6:
x=”Hari ini adalah hari Sabtu”;
break;
}
document.getElementById(“hari”).innerHTML=x;
}
</script>
</body>
</html>

Perulangan

2022 Pemrograman Web


7 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Perulangan adalah suatu blok perintah atau kode yang diulang selama syarat bernilai
True. Dalam javascript, perulangan ini dapat dinyatakan dalam 2 bentuk, yaitu dengan For
dan While.
Pada bagian ini akan dijelaskan penggunaan For untuk perluangan terlebih dahulu.

Perulangan FOR
Perulangan For sering digunakan untuk mebuat perulangan dengan jumlah perulangan
telah diketahui secara pasti. Syntax dari perulangan for adalah sebagai berikut :
For (statement 1; statement 2; statement 3)
{
Kode yang dieksekusi apabila syarat dipenuhi
}

Keterangan :
Statement 1 akan dieksekusi sebelum perulangan dimulai
Statement 2 mendefinisikan kondisi untuk menjalankan perulangan
Statement 3 dieksekusi setiap kali kode blok selesai dieksekusi.

Contoh 1
<html>
<body>
<script language="JavaScript" type="text/javascript">
var counter;
for(counter=1; counter<=5; counter++)
{
document.write("<font size='" + counter + "'>
Ini adalah font berukuran " + counter +
"</font><br>");
}
</script>
</body>
</html>
Contoh 2
<html>
<body>
<script language="JavaScript" type="text/javascript">

2022 Pemrograman Web


8 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
var counter;
for(counter=5; counter>=1; counter--)
{
document.write("<font size='" + counter + "'>Ini adalah font
berukuran " + counter + "</font><br>");
}
</script>
</body>
</html>

Dari contoh 1 dan contoh 2 di atas, dapat disimpulkan bahwa perulangan tidak selalu
dalam bentuk increment, akan tetapi juga dapat dalam bentuk decrement. Selain itu
kenaikan atau
penurunannya tidakselalu naik 1 atau turun 1. Perhatikan contoh berikut ini :

Contoh 3
<html>
<body>
<script language="JavaScript" type="text/javascript">
var counter;
for(counter=1; counter<=5; counter+=2)
{
document.write("<font size='" + counter + "'>
Ini adalah font berukuran " + counter +
"</font><br>");
}
</script>
</body>
</html>

2022 Pemrograman Web


9 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Perulangan While
Pada prinsipnya bentuk perulangan While adalah mirip dengan perulangan For.
Secara umum sintaks dari perulangan While adalah
For (statement 1; statement 2; statement 3)
{
Kode yang dieksekusi apabila syarat dipenuhi
}

Dalam sintaks di atas, bagian statement akan terus diulang selama syarat bernilai True.
Sebagai contoh, perhatikan statement dalam For dan While berikut ini.
Kedua statement adalah ekuivalen atau sama (perhatikan dengan warna sama).

for(counter=1; counter<=5; counter++)


{
document.write("Hello World <br>");
}
--------------------------------------------------
For (statement 1; statement 2; statement 3)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
counter = 1;
while(counter<=5)
{
document.write("Hello World <br>");
counter++;
}

Meskipun semua statement For dapat juga dinyatakan sebagai While, namun tidak
berlaku sebaliknya. Tidak semua statement While dapat dinyatakan dalam For. Inilah
kelebihan perulangan While. Kelebihan While dibandingkan For adalah bahwa ehile dapat
digunakan apabila jumlah perulangan tidak diketahui. Sedangkan untuk For harus
diketahui jumlah perulangannya. Sebagai contoh perumpamaan, misalkan ada statement
begini: “ Saya akan terus makan selama saya masih lapar”. Statement tersebut adalah
juga termasuk konsep perulangan dalam kehidupan sehari-hari. Dalam hal ini, jumlah

2022 Pemrograman Web


10 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
berapa kali harus makan tidak diketahui. Melainkan hanya syarat makannya saja yang
diketahui, yaitu selama
masih lapar. Perhatikan contoh berikut ini. Script ini akan terus meminta user untuk
mengisikan suatu angka selama angka yang dimasukkan bukan angka 5.
Contoh 4
<html>
<body>
<script language="JavaScript" type="text/javascript">
var angka;
while(angka != 5)
{
angka = prompt("Masukkan sebuah angka : ");
}
document.write("Anda telah memasukkan angka 5");
</script>
</body>
</html>

Perhatikan syarat (yang dicetak biru) pada script di atas. Syarat tersebut bermakna,
selama nilai angka tidak sama dengan 5, maka user akan selalu diminta memasukkan
angka. Sehingga dalam kasus ini tidak diketahui berapa jumlah perulangan yang harus
dilakukan, namun perulangannya tergantung dari syarat. Untuk kasus seperti ini, kita tidak
bisa membuatnya dengan FOR.

Soal
1. Buatlah tampilan web seperti dibawah ini : (Codingan di word/notepad atau
dijadikan PDF beserta tampilannya halaman webnya)
o Boleh diwarnai
o Boleh di beri menu
o Boleh memakai dukungan CSS biar terlihat lebih menarik.

2022 Pemrograman Web


11 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Lalu bisa di input dan dihitung :

JIKA MEMBER MAKA DISKON 10%

2022 Pemrograman Web


12 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
DAFTAR PUSTAKA

- Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002

- Ahmad Bustami, Cara Mudah Belajar Internet HomeSite dan HTML, Penerbit Dinastindo,
Jakarta 1999

- Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002

- Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998

2022 Pemrograman Web


13 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/

Anda mungkin juga menyukai