MODUL 13 BEKERJA DENGANJAVASCRIPT

Pada modul ini, Praktikan akan mengetahui dan memahami tentang struktur perulangan, struktur pengambil keputusan dan fungsi-fungsi yang berlaku pada Javascript.

13.1 Struktur Perulangan

Perulangan adalah suatu perintah untuk melaksanakan proses perulangan selama syarat yang ditentukan bernilai benar. Dalam javascript terdapat dua jenis perulangan, yaitu dengan For dan While.

Perulangan FOR

Perulangan For khusus digunakan tipe data numeric dan untuk perulangan yang jumlah perulangannya telah diketahui secara pasti. Sintak penulisan dari perulangan for adalah sebagai berikut :

For (nilai awal; kondisi; step)

{ Kode yang dieksekusi apabila syarat dipenuhi }

Contoh 1

Contoh 2

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 tidak selalu naik 1 atau turun 1. Perhatikan contoh berikut ini :

Contoh 3

Perulangan While & Do … While

Perulangan while dapat digunakan untuk tipe data non numeric dan numerik. Sintaksnya seperti berikut :

while (kondisi) {

pernyataan jika kondisi benar

}

atau

do {

pernyataan jika kondisi benar

}

while (kondisi);

Contoh 4

Contoh 5

13.2 Struktur Pengambil Keputusan

Struktur pengambik keputusan digunakan untuk menampilkan aksi yang berbeda berdasarkan kondisi yang tertentu.. Terdiri atas :

  1. Pernyataan if
  • Pernyataan if … else
  • Pernyataan if … else if …
  • Pernyataan Switch

Pernyataan if

Pernyataan if digunakan untuk mengeksekusi kode apabila syarat yang ditentukan di penuhi (bernilai benar). Pernyataan if memiliki syntax sebagai berikut :

if (syarat)

{

Kode yang dieksekusi apabila syarat dipenuhi

}

Contoh 6

Pernyataan if … else …

Pernyataan if … else digunakan untuk mengeksekusi d ari satu syarat yang dtentukan terpenuhi dan untuk kode apabila syarat tidak dipenuhi. Syntax dari pernyataan if … else … sebagai berikut

if (syarat)

{

} Else

{Kode yang dieksekusi apabila syarat dipenuhi

}

Kode yang dieksekusi apabila syarat tidak dipenuhi

Contoh 7

Pernyataan if … else if … else …

Pernyataan if … else if … else … digunakan untuk mengeksekusi satu dari beberapa syarat yang dtentukan 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 8

Pernyataan Switch

Pernyataan switch memiliki fungsi yang sama dengan pernyataan if … else if … else … Syntax dari pernyataan ini adalah sebagai berikut :

Switch(variabel)

{

case option 1 :    pernyataan ke 1 break;

case option 2 :  pernyataan ke 2 break;

case option n :    pernyataan ke n  break;

default:  pernyataan x break;

}

Proses dari SWITCH di atas adalah melakukan cek pada value variabel. Apabila valuenya sama dengan option1 maka statement yang dilakukan adalah pernyataan 1. Apabila valuenya sama dengan option2 maka pernyataan 2 yang dijalankan, begitu seterusnya. Namun apabila tidak ada value yang sama, maka pernyataan x yang dijalankan.

Contoh 9

13.3 Fungsi Pada Javascript

Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang memanggil fungsi tersebut. Fungsi merupakan bagian subprogram yang melaksanakan suatu tugas tertentu ketika diperlukan. Fungsi ini dapat dipanggil dengan cara menuliskan nama fungsinya saja, dan disertai dengan parameter apabila ada. Jadi parameter dalam suatu fungsi bersifat opsional. Suatu fungsi ditulis sebagai blok kode dengan syntax sebagai berikut :

function namafungsi(parameter)

{

Beberapa code untuk dijalankan

}

Contoh 10

Suatu fungsi tidak harus terdapat return value. Perhatikan contoh berikut ini.

Contoh 11

PRAKTIKUM

Untuk lebih memperdalam pemahaman Anda, silahkan coba latihan berikut dan ambil kesimpulan.

  • Buatlah script Javascript untuk mengkonversi nilai angka ke nilai huruf dengan aturan sebagai berikut :
80-100 : A
70–79 : B
60–69 : C
50–59 : D
0–49 : E

Apabila nilai yang dimasukkan tidak dalam rentang 0 – 100, maka akan muncul keterangan nilai yang dimasukkan tidak valid.

  • Buatlah satu aplikasi web untuk mengkonversi suhu dengan menggunakan fungsi.
  • Buatlah satu aplikasi web untuk menampilkan besar diskon dari pembelian barang. Inputan berupa :harga barang dan besar diskon.
  • Latihan IF .
  • Latihan IF
  • Latihan Fungsi
  • Form dan Javascript
  • Fungsi :
  • S
  1. Gabungan : Silahkan Anda kerjakan latihan di bawah ini :

<html>

<head>

<title> Latihan HTML & Javascript</title> <script languange =”JavaScript”> function alertx(data){

var nim =(document.data.nim.value);

var nama =(document.data.nama.value);

var fakultas =(document.data.fakultas.value); var ket = “”;

if (document.data.wanita.checked == true) { ketx = “Wanita”; }

if (document.data.wanita.checked == false && document.data.Wanita.checked == false || document.data.alamat.value == false ){ ketx = “”; }

else if (document.data.Wanita.checked == true){ ketx = “Pria”; }

var agama =(document.data.agama.value);

var ket = “”;

var ket1 =””;

var ket2 =””;

var ket3 =””;

if (document.data.browsing.checked == true){ ket = “Browsing”; }

if (document.data.baca.checked == true){ ket1 = ” Membaca Buku”; }

if (document.data.bermain.checked == true){ ket2 = ” Bermain”; }

if (document.data.hacking.checked == true){ ket3 = ” Hacking”; }

var alamat =(document.data.alamat.value); { if(document.data.nim.value === false || document.data.nama.value == false ){

alert (” NIM atau Nama atau Alamat belum terisi dengan benar, CEK KEMBALI !!! “); } else {

alert(“Selamat Datang Di \nFORM INPUT DATA MAHASISWA”);

alert (“NIM\t\t\t\t :\t” + nim + “\nNama\t\t\t :\t” + nama+

“\nFakultas\t\t\t :\t” +fakultas+ “\nJenis Kelamin\t :\t” +ketx+

“\nAgama\t\t\t :\t” +agama+ “\nHobi\t\t\t :\t” +ket+ “” +ket1+ “”

+ket2+ “” +ket3+ “\nAlamat\t\t\t :\t” +alamat);

alert(“Terimakasih telah Mengisi \nFORM INPUT DATA

MAHASISWA”); } } }

</script>

</head>

<body>

<div align=”center”>

<h3> FORM BIODATA MAHASISWA</h3>

<table border=”1″ cellpadding=”10″ cellspacing=”10″> <tr> <td> <table border=”0″> <tr> <td>

<form name=”data” method=”post” action=””> <table width=”371″ border=”0″> <tr>

<td colspan=”3″><div align=”center”>Form Biodata </div></td> </tr> <tr>

<td width=”95″>NIM</td>

<td width=”1″>:</td>

<td width=”253″>

<label> <input type=”text” name=”nim” value=”” required>

</label>

</td> </tr> <tr>

<td>Nama</td> <td>:</td> <td>

<label>

<input type=”text” name=”nama” value=”” required>

</label>

</td>

</tr>

<tr>

<td>Fakultas</td>

<td>:</td>

<td>

<select name=”fakultas”> <option>Pilih Fakultas</option> <option>Teknik dan Ilmu Komputer</option> <option>Sosial Politik</option> <option>Hukum</option> <option>Sasta</option> <option>Ekonomi</option> </select>

</td>

</tr>

<tr>

<td>Jenis Kelamin </td>

<td>:</td>

<td>

<input type=”radio” value=”wanita” name=”wanita”>Wanita

<input type=”radio” value=”Pria” name=”Wanita”>Pria

</td>

</tr>

<tr>

<td>Agama</td>

<td>:</td>

<td>

<select name=”agama”>

<option>Pilih Agama</option>

<option>Islam</option>

<option>Kristen</option>

<option>Hindu</option>

<option>Budha</option>

<option>Kong Hu Chu</option>

</select>

</td>

</tr>

<tr>

<td height=”45″>Hobi</td>

<td>:</td>

<td>

<label>

<input type=”checkbox” name=”browsing” value=”on”>Browsing

</label>

<label>

<input type=”checkbox” name=”baca” value=”on”>Baca Buku

</label> <br>

<label>

<input type=”checkbox” name=”bermain” value=”on”>Bermain

</label>

<label>

<input type=”checkbox” name=”hacking” value=”on”>Hacking

</label>

</td>

</tr>

<tr>

<td>Alamat</td>

<td>:</td>

<td>

<label>

<textarea type=”text” name=”alamat” required></textarea>

</label>

</td>

</tr>

<tr>

<td colspan=”3″><div align=”center”>

<input name=”” type=”submit” value=”proses”

onClick=”alertx(this.data)”>

<input name=”” type=”reset”></div>

</td>

</tr>

</table>

</form>

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

<p align=”center”><a href=polinpdg.ac.id> PNP</a></p>

</body>

</html>

REFERENSI LANJUTAN :

  1. Ari, Rosihan. Dasar Javascript. Diakses melalui www.rosihanari.net
  2. http://www.w3schools.com/js/
  3. http://www.tutorialspoint.com/javascript/
  4. http://www.codecademy.com/en/tracks/javascript
  5. http://htmldog.com/guides/javascript/