modul 6 struktur kontrol & fungsi -...

STMIK PPKIA Pradnya paramita Malang Praktikum Pemrograman Berbasis Web

Tahun 2016 [email protected]

MODUL 6

Struktur Kontrol & Fungsi

Laboratorium Komputer

STIMIK PPKIA Pradnya Paramita Malang



Pertemuan 6

6.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah – perintahPerulangan, Percabangan dan fungsi

2. Mahasiswa dapat mengaplikasikan struktur control & fungsi padaprogramnya

6.2 Materi :1. Struktur Kontrol2. Fungsi

6.3 Alat Bantu1. Notepad ++2. Page, Image

6.4. Prosedure Praktikum1. Peserta membaca dan memperlajari materi praktkum sebelumnya2. Instruktur menerangkan dan menjelaskan teori dan cara kerja3. Peserta mempraktikkan materi percobaan4. Peserta membuat penyelesaian terhadap soal latihan, tugas dan berhak mendapatkan

nilai praktikum harian

6.5 TeoriSTRUKTUR KONDISIONALStruktur kondisional adalah instruksi-instruksi yang memungkinkan kita untuk melakukan testapakah satu kondisi adalah benar atau tidak, dan memungkinkan juga terjadinya proses interaksi didalam skrip yang kita buat.

1. Instruksi ifInstruksi paling dasar, kita bisa temukan instruksi ini hampir dalam semua bahasa pemrograman(mungkin dengan sedikit perbedaan sintaks). Instruksi ini memungkinkan kita untuk mengeksekusisatu blok instruksi jika kondisi syaratnya terpenuhi.Sintaks dari instruksi ini adalah sebagai berikut :

if (kondisi syarat terpenuhi) {

daftar instruksi atau blok instruksi

}

beberapa catatan penting tentang instruksi ini• kondisi harus terletak diantara dua tanda kurung• kita bisa melatakkan beberapa kondisi dengan menggunakan operator AND atau OR (&& atau

||)contoh :

if ((kondisi1)&&(kondisi2))if ((kondisi1)||(kondisi2))

Jika hanya ada satu instruksi di dalam blok instruksi, kita tidak perlu menggunakan tanda kurung,seperti contoh berikut ini :if (x==2) document.write("Nilai x adalah 2");

Instruksi if..else if…else…



Instruksi If, adalah instruksi dasar yang hanya memungkinkan kita untuk melakukan pemeriksaanapakah satu kondisi terpenuhi atau tidak. Pada kenyataannya kita menginginkan lebih dari satukondisi syarat untuk menjalankan program, untuk kebutuhan itu, kita bisa menggunakan instruksi If…Else….

Sintaks lengkap dari instruksi ini adalah :

if (kondisi syarat1 terpenuhi){ daftar instruksi atau blok instruksi }else{ daftar instruksi/blok instruksi yang lain }

Sedangkan jika lebih dari 2 kondisi dapat didekalrasikan sebagai berikut:

if (kondisi syarat1 terpenuhi){ daftar instruksi atau blok instruksi }

else if (kondisi syarat2 terpenuhi){ daftar instruksi/blok instruksi yang lain }

Else{ daftar instruksi/blok instruksi yang lain }

Contoh Deklarasi:

<html><head><title>Contoh IF</title></head><body><script language="JavaScript">nilai = prompt('Masukkan Nilai :','')document.write ("Anda menginputkan nilai :" + nilai + "<br>")if (nilai == "A")

document.write ("Sangat Memuaskan")else if (nilai== "B")document.write ("Memuaskan")else if (nilai == "C")document.write ("cukup")elsedocument.write ("kurang")

</script></body></html>Hasil:



2. Instruksi for …Sebelum berbicara tentang instruksi, kita bicarakan dulu tentang Loop. Loop adalah strukturinstruksi-instruksi yang dapat di eksekusi berulang ulang selama kondisi syaratnya belum terpenuhi.Cara yang paling umum dalam melakukan Loop adalah dengan menambahkan variabelpenghitung/counter (variabel yang bertambah satu unit nilai selama satu kali Loop instruksidijalankan (increment)), Loop akan berhenti jika variabel penghitung sudah melewati batas nilaitertentu yang dijadikan syarat.

For adalah salah satu Instruksi yang menggunakan fasilitas Loop. Dalam sintaksnya kita hanya perlumemasukkan nama variabel sebagai penghitung (dan juga nilai awalnya, serta kondisi dimana loopakan berhenti (pada dasarnya, kondisi dimana nilai penghitung melewati angka tertetu)), dan yangterakhir instruksi modifikasi penghitung, increment (naik per unit) atau decrement (turun per unit)

Sintaks lengkap dari instruksi ini adalah :

for (batas_awal; batas_akhir; penghitung[nail/turun]){ daftar instruksi instruksi atau blok instruksi }

Sebagai contoh :

for (i=1; i<=10; i++){Document.write(i)}

Loop ini akan 10 kali menampilkan nilai dari i, mulai dari i=1,2,3,4,5,6,7,8,9,10. Loop dimulai dari i=1dan akan selalu melakukan cek dan verifikasi apakah nilai i kurang dari sama dengan 10. Sampaipada i=10, dimana kondisi syaratnya sudah tidak terpenuhi maka loop akan berhenti.

3. Instruksi whileInstruksi while merupakan salah satu cara alternatif untuk menjalankan sekumpulan instruksi,seperti juga instruksi For..

Sintaks dari instruksi ini adalah sebagai berikut :

while (kondisi syarat terpenuhi){ daftar instruksi instruksi atau blok instruksi }

Karena instruksi ini menjalankan program selama kondisi syarat terpenuhi, maka perlu diperhatikanbaik baik syarat yang kita berikan, agar supaya instruksi tidak menjadi loop tanpa henti (infinity) danmembuat error navigator kita.

Instruksi continue

Ada hal yang patut di perhatikan juga, ada kalanya kita perlu melakukan lompatan (jump) terhadapsatu atau beberapa nilai tertentu di dalam loop tanpa menghentikan loop itu sendiri. Sintaks yangdigunakan disini adalah continue , dan di letakkan di dalam loop itu sendiri, pada umumnya kitatambahkan juga struktur kondisional sebagai syarat supaya sintaks tersebut berjalan lancar.



Contoh : kita akan mencetak setiap nilai yang diulang. Untuk nilai i = 3 maka akan menghasilkanketerangan “Nilai tengah”, berkat instruksi continue kita bisa memperlakukan secara terpisah nilai i= 3, dan meneruskan loop dari program tersebut.

<html><head><title></title></head><body><script language="JavaScript">i=1;while (i<=5) {if (i == 3) {alert('nilai tengah');i++;continue; }

alert(i);i++; }

</script></body></html>

Hasil:

Jika masuk perulangan ke-3 maka: Jika masuk perulangan ke-4 dan seterusnya:

Instruksi break

Sebaliknya kita juga bisa memaksa loop berhenti sebelum waktunya dengan alasan yang dikemukandi bagian awal dari loop. Instruksi Break memungkinkan menghentikan suatu loop (baik untuk forataupun while). Pemakaiannya sendiri seperti instruksi continue, yaitu penambahan strukturkondisional agar supaya loop berhenti dan tidak berulang ulang looping.

Contoh :

kita akan mencetak setiap nilai yang diulang. Untuk nilai i = 3 maka akan menghasilkan keterangan“Nilai tengah”, karena terdapat instruksi break maka setelah i = 3 akan berhenti.

for (x=1; x<=5; x++){if (x == 3){ alert("nilai tengah"); break; }alert(x)

}Hasil:



Setelah muncul tanda ini maka program akan berhenti.

4. Instruksi switch …. caseInstruksi ini memungkinkan kita untuk melakukan test berbagai nilai dari variabel yang sama.Dengan cara ini kita bisa melakukan testing terhadap berbagai nilai variabel lebih sederhanadaripada memakai instruksi if.

Sintaksnya adalah sebagai berikut :

switch (Variabel) {

case Nilai1:blok instruksi;break;case Nilai2:blok instruksi;break;case NilaiX:blok instruksi;break;default:blok instruksi;break;

}

Kata di dalam tanda kurung sesudah kata switch menunjukkan nama variabel yang akan di test padakasus nilai yang berbeda. Pada saat nilai variabel yang akan di test sama dengan nilai kasusnya (case)maka blok instruksi di bawahnya akan dieksekusi. Kata break berarti berhentinya atau keluar daristruktur kondisi switch. Kata default berarti blok instruksi dibawahnya akan dieksekusi bila nilaivariabel yang masuk tidak sama dengan semua kasus (case) yang ada.

Contoh:<html><head><title></title></head><body><script language="JavaScript">GRADE = prompt('Masukkan Nilai :','')switch(GRADE){case "A":document.write("nilai A");break;case "B":document.write("nilai B");break;



case "C":document.write("nilai C");break;case "D":document.write("nilai D");break;default:document.write("nilai E")

}</script></body></html>

Hasil:Jika diinputkan: Maka akan menghasilkan:

FUNGSIFungsi adalah subprogram yang memungkinkan kita untuk menjalankan sekelompok instruksidengan satu pemanggilan sederhana nama fungsi tersebut dari satu atau beberapa bagian di dalambadan suatu program. Bentuk subprogram yang kita sebut fungsi ini sangat umum di pakai di banyakbahasa pemrograman (tentu saja dengan cara yang sedikit berbeda antara satu dengan lainnya). Dilain pihk suatu fungsi, juga bisa memanggil dirinya sendiri, ini kita sebut dengan fungsi rekursif (akantetapi jangan lupa untuk meletakkan kondisi khusus supaya fungsi bisa berhenti, kalau tidak bisamembahayakan kelangsungan program secara global).JavaScript sendiri mempunyai fungsi native (predefined) yang dapat diaplikasikan untuk satu ataubanyak jenis obyek spesifik, kita sebut fungsi ini sebagai metoda (lihat bab 9)

1. Deklarasi fungsi.Sebelum digunakan, suatu fungsi harus di definisikan terlebih dahulu karena untuk memanggil fungsitersebut dari dalam program, navigator harus mengenalinya terlebih dahulu, dalam artian mengenalinamanya, argumennya, dan instruksi di dalamnya. Pendefinisian satu fungsi dinamakan deklarasi.Sintaks pendeklarasian suatu fungsi adalah sebagai berikut :

function Nama_dari_Fungsi(argumen1, argumen2, ...){daftar instruksi atau blok instruksi}

Catatan :• Kata kunci function diikuti nama dari fungsi tersebut.• Penamaan dari fungsi mempunyai aturan yang sama dengan penamaan dari variabel

- Nama harus dimulai oleh huruf.- Nama dari fungsi bisa berisi huruf, angka atau karakter _ dan &, karakter kosong

atau spasi tidak diperbolehkan.- Nama fungsi seperti juga nama variabel adalah case sensitive, jadi memperhatikanhuruf besar dan huruf kecilnya.

• Argumen adalah optional, boleh ada dan boleh tidak ada, jika argumen tidak ada maka tandakurung harus tetap ditampilkan.



2. Pemanggilan fungsiUntuk mengeksekusi satu fungsi, kita cukup memanggil nama dari fungsi tersebut yang diikutidengan kurung buka, argumen(jika ada) dan di tutup dengan kurung tutup.

Nama_dari_Fungsi() ;

Catatan :• Titik koma memberikan tanda kepada navigator tentang akhir dari blok instruksi yang berbeda.• Jika anda mendefinisikan suatu argumen untuk suatu fungsi, maka pada saat pemanggilannya

anda harus memanggil fungsi tersebut lengkap dengan argumentnya.• Perlu diperhatikan untuk selalu mendeklarasikan suatu fungsi sebelum kita panggil, karena

navigator selalu membaca HTML dan skrip dari atas ke bawah, oleh karena itu pada umumnyafungsi di dalam tag SCRIPT terlatak di bagian kepala dari dokumen HTML (diantara tag<HEAD>dan </HEAD>

Berkat event administrator yang bernama onLoad (di letakkan di dalam tag BODY), kita bisamemanggil fungsi pada saat loading halaman dokumen HTML, sebagai contoh inisialisasi nilai awaldari skrip anda atau melakukan test apakah navigator dapat menjalankan fungsi dari skrip atau tidak.Contohnya adalah sebagai berikut :

<HTML><HEAD><SCRIPT LANGUAGE="JavaScript">function Pemanggilan(){

blok instruksi}</SCRIPT></HEAD><BODY onLoad="Pemanggilan();" ></BODY></HTML>

3. Parameter dari fungsiKita bisa melewatkan parameter di dalam suatu fungsi, dalam artian kita berikan nilai atau namavariabel supaya fungsi itu bisa di eksekusi berdasarkan parameter tersebut. Pada saat kitamelewatkan beberapa parameter ke dalam fungsi, parameter-parameter tersebut dipisahkan olehtanda koma, baik pada saat deklarasi ataupun pada saat pemanggilan. Kalau anda melihat bab babsebelumnya parameter ini kita sebut argumen fungsi secara umum. Kita lihat contoh di bawah ini :kita akan membuat program JavaScript yang menambilkan kotak dialog :

<HTML><HEAD><SCRIPT language="Javascript">

function TEKS(){

alert('hALOOO);}</SCRIPT>

</HEAD><BODY>



<INPUT TYPE=”BUTTON” VALUE=”KLIK” onclick=”TEKS()”></BODY>

</HTML>

Hasil:

atau cara kedua berikut akan memberikan hasil yang sama :

<HTML><HEAD><SCRIPT language="Javascript">

function TEKS(a){

alert(a);}</SCRIPT></HEAD>

<BODY><input type="button" value="pagi" onclick="TEKS('selamat pagi')"><br><input type="button" value="malam" onclick="TEKS('selamat malam')"></BODY>

</HTML>

Hasil akhir dari kedua program itu sama saja, akan tetapi program kedua lebih fleksibel karena kitacuman punya satu fungsi yang bisa menampilkan sembarang teks.

4. Bekerja dengan variabel di dalam fungsiSecara logika pada saat kita selesai memanipulasi variabel di dalam fungsi, dan kemudian kita keluar

dari fungsi tersebut, maka nilai variabel itu akan kembali ke nilai asalnya, meskipun kita sudahmerubahnya di dalam fungsi tersebut.

Akan tetapi ini semua bergantung dari jenis variabel itu sendiri, apakah dia variabel lokal atauvariabel global :

• Variabel yang dideklarasikan secara implisit di dalam fungsi (tanpa kata kunci var) akanmenjadi global, yang artinya variabel masih bisa di akses sesudah eksekusi dari fungsi.



• Variabel yang dideklarasikan secara eksplisit di dalam fungsi (menggunakan kata kunci var)akan menjadi lokal, yang artinya hanya dapat diakses dari dalam fungsi, semua referensiyang memakai variabel ini dari luar fungsi akan menyebabkan pesan error (variabel tidakdikenal).

Pada saat kita memanggil satu fungsi dari satu obyek, sebagai contoh misalkan suatu form, makasebaiknya kita menggunakan kata kunci this untuk membuat satu referensi dengan obyek yangsedang berjalan/sedang di kerjakan. Dengan kata kunci ini kita juga menghindarkan dari menulisformat obyek secara bertele tele seperti windows.objet1.objet2…. dan juga pada saat inginmelewatkan obyek yang sedang di proses ke satu fungsi , kita tinggal menulisNama_dari_Fungsi(this) . untuk bisa memanipulasi obyek tersebut dari dalam fungsi. Sedangkanuntuk memanipulasi kondisi dari obyek itu sendiri, kita hanya tinggal mengetikan this.property

4. Mendefinisikan obyek dengan fungsiJavaScript sebagai bahasa berorientasi pada obyek

PropertiProperti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil.Penulisan :Nama_objek.nama_properti = nilaiwindow.defaultStatus = ”Selamat Belajar JavaScript”;

MetodeMetode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakanterhadap objek.Penulisan :Nama_objek.nama_metode(parameter)document.write (”Hallo”)Kita bisa membuat suatu obyek dengan properti yang kita definisikan. Sebagai contoh kitabayangkan kita akan membuat satu obyek pohon dengan properti sebagai berikut :

• Jenis• Tinggi• Umur

Kita bisa membuat obyek pohon dengan menggunakan satu fungsi yang kita beri nama fungsi pohon,dimana properti dari obyek pohon didefinisikan di fungsi tersebut. Kita juga menggunakan kata kuncithis dalam contoh yang detailnya dapat anda lihat berikut ini :Umur

function mhs(nim, nama, progdi){this.nim = nim;this.nama = nama;this.progdi = progdi;}

Selanjutnya kita gunakan kata kunci new kita bisa membuat instan dari obyek pohon (maksudnyasatu obyek yang lain dengan properti sama dengan obyek pohon) :

Mhs1 = new mhs("09.51.0001", “FARREL”, “SISTEM INFORMASI”)

Kita bisa membuat sebanyak mungkin instan yang kita inginkan. Selain itu di obyek yang sudah adakita bisa menambahkan properti dari obyek yang lain, mari kita lihat contoh berikut ini :



Maka akan menuju ke alamat yang sudah dipilih:

6.6 LATIHAN – LATIHAN :1. Pemakaian alert sebagai property window

2. Pemakaian metode dalam objek.



3. Pemakaian prompt

4. Pembuatan fungsi dan cara pemanggilannya

5. Seleksi kondisi (if..else)



6. pemkaian looping (for)

7. pemakaian looping <do ..while>

8. pemakaian looping < while>



6.7 TUGASRangkailah kode- kode atau skrip sehingga menjadi tampilan seperti berikut. Dengan ketentuan

1. Jurusan diperoleh dari Inputan NIMdengan kode 52 adalah jurusan teknik informatika

51 adalah jurusan Sistem Informasi31 adalah Jurusan Manajemen Informatika

2. Nilai Rata – rata diperoleh dari dari hasil tambah dan bagi dari nilai 1 dan nilai 23. Grade dan status diperoleh dari nilai rata- rata

Jika nilai rata – rata antara 100 s.d 90 grade =A status = LULUS;Jika nilai rata – rata antara 89 s.d 70 grade =B status = LULUS;Jika nilai rata – rata antara 69 s.d 50 grade =C status = LULUS;Jika nilai rata – rata antara 49 s.d 30 grade =D status = TIDAK LULUS;Selain itu grade = E status = TIDAK LULUS

modul 6 struktur kontrol & fungsi -...

Documents