JavaScript: Seleksi
4.1 Pengantar
Ketika menuliskan sebuah skrip, adalah
hal yang penting untuk memahami jenis blok pembangun yang tersedia dan untuk
menggunakan prinsip-prinsi konstruksi program yang teruji. Pada bab ini, akan
didiskusikan statemen kendali (seleksi), yang hampir sama dengan banyak bahasa
pemrograman tingkat-tinggi. Di sini, operator penugasan, operator inkremen, dan
operator dekremen akan dibahas dan dieksplorasi.
4.2 Statemen Kendali
JavaScript menyediakan tiga statemen
seleksi. Statemen seleksi if
menyelksi sebuah aksi jika kondiri bernilai true atau melompati aksi jika
kondisi bernilai false. Statemen seleksi if...else
melakukan sebuah aksi jika kondisi bernilai true dan melakukan aksi yang
berbeda jika kondisi bernilai false. Statemen seleksi switch melakukan salah satu dari berbagai aksi, tergantung dari
nilai sebuah ekspresi.
Statemen if dikenal dengan
statemen seleksi-tunggal karena ia menyeleksi atau mengabaikan aksi tunggal
(atau grup aksi tunggal). Statemen if...else
dikenal dengan statemen seleksi-ganda karena ia menyeleksi salah satu dari dua
aksi yang berbeda (atau salah satu dari dua grup aksi yang berbeda). Statemen switch dikenal dengan statemen
seleksi-jamak karena ia menyeleksi di antara aksi – aksi yang berbeda (atau di
antara grup-grup aksi yang berbeda).
JavaScript menyediakan empat jenis statemen repetisi, yaitu while, do...while, for, dan for...in. Masing-masing kata if else,
switch, while, do, for, dan in merupakan katakunci JavaScript. Semua katakunci ini tidak bisa
dipakai sebagai nama pengenal (misalnya nama fungsi atau nama variabel). Semua
katakunci pada JavaScript ditunjukkan pada Gambar 4.1.
4.3 Statemen Seleksi if
Statemen seleksi dipakai untuk memilih di antara beberapa aksi alternatif
pada sebuah program. Sebagai contoh, dimisalkan bahwa nilai kelulusan pada
sebuah ujian adalah 60 (dari 100). Maka statemen JavaScript
if ( nilaiMahasiswa >= 60 )
document.writeln( "Lulus" );
menentukan apakah kondisi “nilai
mahasiswa lebih besar dari atau sama dengan 60” bernilai true atau false.
Jika kondisi bernilai true, maka “Lulus”
akan ditampilkan pada dokumen XHTML, dan statemen JavaScript berikutnya akan
dieksekusi. Jika kondisi bernilai false, maka statemen untuk menampilkan akan
diabaikan, dan statemen JavaScript berikutnya akan dieksekusi.
Gambar 4.1 Katakunci pada JavaScript
Perhatikan bahwa baris kedua dari statemen seleksi tersebut terindentasi
(dimajukan beberapa spasi). Penerjemah JavaScript mengabaikan semua karakter
spasi-putih, seperti tab, spasi, dan garis-baru.
Diagram alir pada Gambar 4.2 mengilustrasikan statemen if seleksi-tunggal. Diagram alir ini
memuat apa yang merupakan simbol diagram-alir paling penting, yaitu simbol
diamond (atau simbol keputusan), yang mengindikasikan bahwa sebuah keputusan
harus dibuat. Simbol keputusan memuat sebuah ekspresi, seperti kondisi, yang
dapat bernilai true atau false. Simbol keputusan memiliki dua garis-alir yang
keluar darinya. Satu garis-alir mengindikasikan lintasan yang akan diikuti
program ketika ekspresi di dalam simbol bernilai true; garis-alir yang lain
mengindikasikan lintasan yang akan diikuti program ketika ekspresi di dalam
simbol bernilai false. Sebuah keputusan dapat dibuat pada sembarang ekspresi
yang dievaluasi menjadi sebuah nilai bertipe boolean (yaitu, sembarang ekspresi
yang dapat dievaluasi menjadi true atau false, yang juga dikenal dengan
ekspresi boolean).
Gambar 4.2 Diagram alir statemen if
seleksi-tunggal
Perhatikan bahwa statemen if
merupakan statemen kendali masukan-tunggal/keluaran-tunggal.
4.4 Statemen Seleksi if...else
Statemen seleksi if melakukan
sebuah aksi hanya ketika kondisi dievaluasi menjadi true; sebaliknya, aksi akan
dilompati. Statemen seleksi if...else
memampukan Anda untuk menetapkan sebuah aksi ketika kondisi benilai true;
sebaliknya, menetapkan aksi yang berbeda ketika kondisi bernilai false.
if ( nilaiMahasiswa >= 60 )
document.writeln( "Lulus" );
else
document.writeln(
"Gagal" );
menampilkan Lulus pada dokumen
XHTML jika nilai mahasiswa lebih dari atau sama dengan 60 dan menampilkan Gagal jika nilai mahasiswa bernilai
kurang dari 60. Pada kedua kasus, setelah statemen penampilan selesai
dieksekusi, statemen JavaScript berikutnya akan dieksekusi (yaitu, statemen
berikutnya yang berada setelah statemen if...else).
Perhatikan bahwa tubuh bagian else
dari struktur seleksi juga diindentasi. Diagram alir yang ditunjukkan pada
Gambar 4.3 mengilustrasikan aliran kendali dari statemen seleksi if...else.
JavaScript menyediakan sebuah operator, yang dikenal dengan operator
kondisional (?:), yang erat
kaitannya dengan statemen if...else.
Operator ?: merupakan satu-satunya
operator ternary, yang memerlukan
tiga operand. Ketiga operand tersebut bersama dengan operator ?: membentuk sebuah ekspresi
kondisional. Operand pertama merupakan ekspresi boolean, operand kedua adalah
nilai untuk ekspresi kondisional jika ekspresi tersebut dievaluasi menjadi
true, dan operand ketiga adalah nilai untuk ekspresi kondisional jika ekspresi
tersebut dievaluasi menjadi false. Sebagai contoh, perhatikan statemen berikut
document.writeln(
nilaiMahasiswa >= 60 ? "Lulus"
: "Gagal" );
memuat suatu ekspresi kondisional yang dievaluasi menjadi string “Lulus” jika kondisi nilaiMahasiswa >= 60 bernilai true
dan dievaluasi menjadi string “Gagal”
jika kondisi bernilai false. Jadi, statemen dengan operator kondisional ini
melakukan operasi yang sama dengan statemen if...else sebelumnya. Derajat keutamaan dari operator kondisional
rendah, jadi keseluruhan ekspresi kondisional biasanya ditempatkan di dalam
sepasang kurung untuk memastikan bahwa ia dievaluasi dengan tepat.
Statemen if...else bersarang
dipakai untuk menguji beberapa kasus dengan menempatkan if...else di dalam statemen if...else
yang lain. Sebagai contoh, statemen pseudocode
berikut mengindikasikan bahwa program menampilkan A untuk nilai ujian yang
lebih dari atau sama dengan 90, B untuk nilai dalam rentang 80 sampai 89, C
untuk rentang nilai 70 sampai 79, D untuk nilai dalam rentang 60 sampai 69, dan
F untuk nilai dalam rentang lainnya:
if (nilaiMahasiswa
>= 90 )
document.writeln( "A" );
else
if (nilaiMahasiswa >= 80 )
document.writeln( "B" );
else
if (nilaiMahasiswa >=
70
)
document.writeln( "C" );
else
if (nilaiMahasiswa >=
60
)
document.writeln( "D" );
else
document.writeln( "F"
);
Gambar 4.3 Diagram alir statemen if...else
seleksi ganda
Jika nilaiMahasiswa bernilai lebih dari atau sama dengan 90, maka keempat
kondisi akan bernilai true, tetapi hanya statemen document.writeln yang berada setelah pengujian kondisi pertama yang
akan dieksekusi. Setelah document.writeln
tersebut dieksekusi, bagian else
dari statemen – statemen if...else
sebelah luar akan dilompati.
Kebanyakan programer JavaScript lebih memilih menuliskan statemen if tersebut sebagai
if (nilai >= 90 )
document.writeln( "A" );
else if (nilai >= 80 )
document.writeln( "B" );
else if (nilai >= 70 )
document.writeln( "C" );
else if (nilai >= 60 )
document.writeln( "D" );
else
document.writeln( "F"
);
Dua format tersebut ekivalen. Format terakhir lebih populer karena ia
mencegah terjadinya indentasi dalam atas kode ke sebelah kanan. Indentasi
terlalu dalam seperti itu seringkali hanya menyisakan ruang kecil pada sebuah
baris, sehingga memaksa baris dipecah dan mengurangi keterbacaan program.
Adalah hal penting untuk mencatat bahwa penerjemah JavaScript selalu mengasosiasikan
sebuah else dengan if sebelumnya, kecuali jika ditempatkan
sepasang kurung kurawal ({ dan }). Sebagai contoh,
if ( x > 5 )
if ( y > 5 )
document.writeln( "x dan y > 5" );
else
document.writeln( "x
<= 5" );
tampak seperti mengindikasikan (melalui indentasi) bahwa jika x bernilai lebih dari 5, maka statemen if di dalam tubuhnya menentukan apakah y juga bernilai lebih dari 5. Jika ya,
maka tubuh dari statemen if
bersarang tersebut akan menampilkan string “x dan y > 5”. Sebaliknya, ia tampak seperti mengindikasikan
bahwa jika x tidak lebih dari 5,
maka bagian else dari statemen if...else
akan menampilkan string “x <= 5”.
Hati – hati! Statemen if bersarang tersebut tidak dieksekusi seperti yang
diindikasikan oleh indentasi. Penerjemah JavaScript akan menginterpretasikan
statemen tersebut sebagai
if ( x > 5 )
if ( y > 5 )
document.writeln( "x dan y > 5" );
else
document.writeln( "x
<= 5" );
dimana di dalam statemen if
pertama terdapat sebuah statemen if...else
bersarang. Statemen ini akan menguji apakah x lebih dari 5. Jika ya, eksekusi akan berlanjut dengan menguji
apakah y juga bernilai lebih dari 5.
Jika kondisi kedua bernilai true, maka string “x dan y > 5” akan ditampilkan. Namun, jika kondisi kedua
bernilai false, maka string “x <= 5”
akan ditampilkan, meskipun Anda mengetahui bahwa x lebih dari 5.
Untuk memaksa statemen if
bersarang tersebut dieksekusi seperti yang diinginkan, ia harus dituliskan
sebagai berikut:
if ( x > 5 )
{
if ( y > 5 )
document.writeln( "x dan y > 5" );
}
else
document.writeln(
"x <= 5" );
Sepasang kurung kurawal ({ dan }) mengindikasikan kepada penerjemah bahwa
statemen if kedua berada di dalam
tubuh statemen if pertama dan bahwa else merupakan bagian dari statemen if pertama.
Untuk mencantumkan beberapa statemen di dalam tubuh statemen if, statemen-statemen tersebut harus
diapit oleh sepasang kurung kurawal ({ dan }). Ini dapat pula dilakukan pada
bagian else dari statemen if...else.
Sehimpunan statemen yang dimuat di dalam
sepasang kurung kurawal disebut dengan blok.
Statemen berikut mencakup sebuah blok pada bagian else dari sebuah statemen if...else:
if ( nilai >= 60 )
document.writeln( "Lulus" );
else
{
document.writeln( "Gagal<br />" );
document.writeln( "Anda harus mengulang matakuliah ini kembali."
);
}
Pada kasus ini, jika nilai bernilai kurang dari 60, maka program akan
mengeksekusi kedua statemen yang ada di dalam tubuh else dan menampilkan
Gagal.
Anda harus mengulang matakuliah ini kembali.
Perhatikan sepasang kurung kurawal yang mengapit dua statemen di dalam
klausa else. Sepasang kurung kurawal
ini sangat penting. Tanpa kurung kurawal tersebut, statemen
document.writeln(
"Anda harus mengulang matakuliah ini kembali.");
akan berada di luar tubuh klausa else
dari statemen if dan akan dieksekusi
tanpa memandang apakah nilai
bernilai kurang dari 60 atau tidak.
4.5 Statemen Repetisi while
Statemen repetisi memampukan Anda untuk menetapkan bahwa sebuah skrip akan
mengulangi (mengeksekusi secara berulang) suatu aksis ketika kondisi tertentu
bernilai true.
Sebagai contoh dari statemen while,
perhatikan segmen program berikut:
var hasil = 2;
while ( hasil <= 1000 )
hasil = 2 *
hasil;
Ketika statemen while selesai
dieksekusi, hasil akan memuat nilai 1024. Diagram alir pada Gambar 4.4
mengilustrasikan aliran kendali dari statemen while tersebut.
Ketika skrip memasuki statemen while,
hasil bernilai 2. Skrip secara
berulang mengalikan variabel hasil
dengan 2, jadi hasil akan bernilai
4, 8, 16, 32, 64, 128, 256, 512, dan 1024. Ketika hasil menjadi 1024, kondisi hasil
<= 1000 di dalam statemen while
menjadi false. Ini akan menghentikan repetisi, dengan 1024 sebagai nilai akhir
dari hasil. Eksekusi berlanjut ke statemen
berikutnya setelah statemen while.
Gambar 4.4 Diagram alir statemen repetisi while
4.6 Repetisi Terkendali-Kounter
Perhatikan statemen permasalahan berikut:
Sebuah kelas yang terdiri-dari sepuluh
mahasiswa mengadakan ujian kuis. Nilai (integer dalam rentang 0 sampai 100)
diberikan pada kuis ini. Tentukanlah rerata nilai kuis pada kelas tersebut.
Rerata kelas sama dengan penjumlahan semua nilai dibagi dengan jumlah
mahasiswa (pada kasus ini, 10). Program untuk menyelasaikan masalah ini (Gambar
4.5) mamasukkan setiap nilai, melakukan perhitungan rerata, dan menampilkan
hasil. Repetisi terkendali-kounter akan dipakai untuk memasukkan satu nilai per
waktu. Pada contoh ini, repetisi berhenti ketika kounter melebihi 10.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 4.5: rerata.html -->
<!--
Repetisi terkendali-kounter untuk menghitung rerata kelas. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Program Rerata
Kelas</title>
<script type =
"text/javascript">
<!--
var total; // penjumlahan
semua nilai
var kounterNilai; //
banyak nilai yang dimasukkan
var nilai; // nilai yang
diketikkan pengguna (sebagai string)
var nilaiInteger; // nilai
yang dikonversi menjadi integer
var rerata; // rerata atas
semua nilai
// fase inisialisasi
total = 0; // menginisialisasi
total
kounterNilai= 1; // mempersiapkan
loop
// fase pemrosesan
while ( kounterNilai <=
10 ) // loop sebanyak 10 kali
{
// meminta masukan dari
pengguna
nilai= window.prompt( "Masukkan
nilai integer:", "0" );
// mengkonversi nilai dari
string menjadi integer
nilaiInteger= parseInt( nilai
);
// menjumlahkan nilaiInteger
dengan total
total = total + nilaiInteger;
// menambahkan 1 pada
kounterNilai
kounterNilai = kounterNilai +
1;
} // akhir while
// fase terminasi
rerata = total / 10; //
menghitung rerata
// menampilkan rerata ujian
document.writeln(
"<h1>Rerata
kelas adalah " + rerata + "</h1>" );
// -->
</script>
</head>
<body>
<p>Klik Refresh untuk
menjalankan skrip ini kembali<p>
</body>
</html>
|
Gambar 4.5 Repetisi terkendali-kounter untuk menghitung rerata kelas
Baris 12-16 mendeklarasikan variabel total,
kounterNilai, nilai, nilaiInteger, dan
rerata. Variabel nilai akan menyimpan string yang
diketikkan pengguna pada dialog prompt.
Variabel nilaiInteger akan menyimpan
nilai integer dari nilai yang
dimasukkan pengguna pada dialog prompt.
Baris 19-20 merupakan dua statemen penugasan yang menginisialisasi total dengan 0 dan kounterNilai dengan 1. Perhatikan bahwa variabel total dan kounterNilai diinisialisasi sebelum digunakan pada perhitungan.
Baris 23 mengindikasikan bahwa statemen while berlanjut beriterasi ketika nilai dari kounterNilai bernilai kurang dari atau sama dengan 10. Baris 27
berkaitan dengan statemen pseudocode
“Masukkan nilai berikutnya”. Statemen
ini menampilkan sebuah dialog prompt
dengan “Masukkan nilai integer: “
pada layar.
Setelah pengguna memasukkan nilai,
baris 30 mengkonversinya dari string menjadi integer. Anda harus mengkonversi
string menjadi sebuah integer pada contoh ini.
Program sekarang menginkremen variabel kounterNilai untuk mengindikasikan bahwa sebuah nilai telah
diproses dan untuk membaca nilai berikutnya dari pengguna. Baris 36 menambahkan
1 pada nilaiKounter, sehingga
kondisi pada statemen while nanti
pada akhirnya akan menjadi false dan menghentikan loop. Setelah statemen ini
dieksekusi, program berlanjut dengan menguji kondisi pada statemen while pada baris 23. Jika kondisi masih
bernilai true, maka statemen-statemen pada baris 27-36 akan diulangi.
Sebaliknya, jika kondisi bernilai false, maka program akan mengeksekusi
statemen pertama yang berada di luar (setelah) tubuh loop (baris 40).
Baris 40 menugaskan nilai dari perhitungan rerata kepada variabel rerata. Baris 43-44 menulis sebaris
teks XHTML pada dokumen yang menampilkan string “Rerata kelas adalah “ diikuti dengan nilai dari variabel rerata sebagai elemen <h1> pada penjelajah.
4.7 Repetisi Terkendali-Sentinel
Selanjutnya akan digeneralisasi permasalahan rerata kelas. Perhatikan
permasalahan berikut:
Kembangkanlah sebuah program
pererata-kelas yang akan memproses sembarang banyak nilai setiap kali program
dijalankan.
Pada contoh rerata-kelas pertama, banyak nilai (10) telah diketahui
terlebih dahulu. Pada contoh ini, tidak ada indikasi yang diberikan tentang
berapa banyak nilai yang akan dimasukkan oleh pengguna. Program harus memproses
sembarang banyak nilai. Bagaimana program menentukan kapan harus menghentikan
masukan nilai? Bagaimana ia mengetahui kapan harus menghitung dan menampilkan
rerata kelas?
Salah satu cara untuk menyelesaikan masalah ini adalah dengan menggunakan
sebuah nilai spesial yang dinamakan dengan nilai sentinel (disebut pula dengan
nilai pengawal, nilai sinyal atau nilai bendera) untuk mengindikasikan akhir
entri data. Pengguna mengetikkan nilai-nilai sampai semua nilai telah
dimasukkan. Kemudian pengguna mengetikkan nilai sentinel untuk mengindikasikan
bahwa nilai terakhir telah dientrikan.
Tentu, Anda harus memilih nilai sentinel yang berbeda dari nilai masukan
valid. Nilai -1 merupakan nilai sentinel untuk permasalahan ini karena
nilai-nilai kuis memiliki rentang 0 sampai 100. Jadi, eksekusi terhadap program
rerata-kelas dapat memproses aliran masukan seperti 95, 96, 75, 74, 89, dan -1.
Program akan menghitung dan menampilkan rerata kelas dengan nilai-nilai 95, 96,
75, 74, dan 89, dimana -1 dipakai sebagai nilai sentinel.
Gambar 4.6 menunjukkan program JavaScript dan contoh keluaran program.
Meskipun setiap nilai adalah integer, perhitung pererataan kemungkinan besar
akan menghasilkan sebuah angka desimal.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 4.6: rerata2.html-->
<!--
Repetisi terkendali-sentinel untuk menghitung rerata kelas. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Program Rerata
Kelas: Repetisi Terkendali-Sentinel</title>
<script type =
"text/javascript">
<!--
var total; // penjumlahan
semua nilai
var kounterNilai; //
banyak nilai yang dimasukkan
var nilai; // nilai yang
diketikkan pengguna (sebagai string)
var nilaiInteger; // nilai
yang dikonversi menjadi integer
var rerata; // rerata atas
semua nilai
// fase inisialisasi
total = 0; // menginisialisasi
total
kounterNilai= 0; // mempersiapkan
loop
// fase pemrosesan
// meminta masukan dari pengguna
nilai = window.prompt(
"Masukkan nilai
integer, -1 untuk keluar:", "0" );
// mengkonversi nilai dari string
menjadi integer
nilaiInteger= parseInt( nilai );
while ( nilaiInteger != -1
)
{
// menjumlahkan nilaiInteger
dengan total
total = total + nilaiInteger;
// menambahkan 1 pada
kounterNilai
kounterNilai = kounterNilai +
1;
// meminta masukan dari
pengguna
nilai = window.prompt(
"Masukkan nilai
integer, -1 untuk keluar:", "0" );
// mengkonversi nilai dari
string menjadi integer
nilaiInteger= parseInt( nilai
);
} // akhir while
// fase terminasi
if ( kounterNilai != 0 )
{
rerata = total /
kounterNilai;
// menampilkan rerata kelas
document.writeln(
"<h1>Rerata
kelas adalah " + rerata + "</h1>" );
} // akhir if
else
document.writeln(
"<p>Tidak ada nilai yang dimasukkan</p>" );
// -->
</script>
</head>
<body>
<p>Klik Refresh untuk
menjalankan skrip ini kembali</p>
</body>
</html>
|
Gambar 4.6 Repetisi terkendali-sentinel untuk menghitung rerata kelas
Pada contoh ini, Anda melihat bahwa sebuah statemen kendali dapat
ditempatkan di atas statemen kendali lain. Statemen while (baris 31-45) diikuti oleh sebuah statemen if...else (baris 48-57). Hampir semua
kode pada program ini identik dengan kode pada Gambar 4.5, jadi pembahasan
hanya difokuskan pada beberapa fitur baru.
Baris 21 menginisialisasi kounterNilai
dengan 0, karena belum ada nilai yang dientrikan. Ingat bahwa program ini
menggunakan repetisi terkendali-sentinel. Untuk menjaga keakuratan rekaman
banyak nilai yang telah dientrikan, skrip menginkremen kounterNilai hanya setelah pemrosesan sebuah nilai valid selesai
dilakukan.
Perhatikan blok di dalam loop while
pada Gambar 4.6 (baris 32-45). Tanpa sepasang kurung kurawal, tiga statemen
terakhir di dalam tubuh loop akan berada di luar loop, yang menyebabkan
komputer menerjemahkan kode tersebut secara tidak tepat, sebagai berikut:
while ( nilaiInteger != -1 )
// menjumlahkan nilaiInteger
dengan total
total = total + nilaiInteger;
// menambahkan 1 pada kounterNilai
kounterNilai = kounterNilai + 1;
// meminta masukan dari pengguna
nilai = window.prompt(
"Masukkan nilai
integer, -1 untuk keluar:", "0" );
// mengkonversi nilai dari string menjadi integer
nilaiInteger= parseInt( nilai );
Interpretasi ini menyebabkan sebuah loop tak-berhingga di dalam program
jika pengguna tidak memberikan nilai sentinel -1 sebagai nilai masukan pertama
pada baris 25-26 (sebelum statemen while).
4.8 Formulasi Algoritma: Statemen Kendali Bersarang
Perhatikan statemen permasalahan berikut:
Sebuah universitas menawarkan suatu pelatihan untuk mempersiapkan para
mahasiswa yang ingin mengambil ujian sertifikasi pemrograman Microsoft. Tahun
lalu, 10 dari para mahasiswa yang menyelesaikan pelatihan ini ikut serta dalam
ujian sertifikasi pemrograman. Universitas ingin mengetahui kinerja 10
mahasiswa yang mengikuti ujian sertifikasi tersebut. Anda diminta untuk menulis
sebuah program yang dapat menyimpulkan hasil respon dari para mahasiswa
tersebut. Pada Anda diberikan daftar 10 mahasiswa tersebut. Di samping tiap
nama, dituliskan “1” jika mahasiswa terkait lulus dan dituliskan “2” jika
mahasiswa terkait gagal.
Program Anda harus menganalisa hasil ujian sebagai berikut:
1.
Masukkan setiap
hasil ujian (“1” atau “2”). Tampilkan pesan “Masukkan hasil” setiap kali
program meminta hasil ujian yang lain.
2.
Hitung
banyaknya mahasiswa yang lulus dan yang gagal.
3.
Tampilkan
kesimpulan dari hasil ujian, yang mengindikasikan jumlah mahasiswa yang lulus
dan jumlah mahasiswa yang gagal.
4.
Jika lebih dari
8 mahasiswa lulus dalam ujian, tampilkan pesan “Naikkan biaya pelatihan”.
Setelah membaca statemen permasalahan,
Anda melakukan pengamatan sebagai berikut:
1.
Program harus memproses hasil ujian untuk 10
mahasiswa, sehingga loop terkendali kounter cocok untuk kasus ini.
2.
Setiap hasil ujian adalah sebuah String, berupa “1” atau “2”. Setiap kali
program membaca sebuah hasil ujian, program harus menentukan apakah masukan
adalah “1” atau “2”. Anda harus menguji “1” dalam algoritma. Jika masukan bukan
“2”, maka diasumsikan ia berupa “1”.
3.
Dua kounter diperlukan untuk menyimpan hasil
ujian, satu untuk menjejak banyak mahasiswa yang lulus ujian dan satu kounter
untuk menjejak banyak mahasiswa yang gagal ujian.
Setelah program memproses semua hasil
ujian, ia harus menentukan apakah terdapat lebih dari 8 mahasiswa yang lulus
ujian atau tidak. Program JavaScript dan contoh keluaran program ditampilkan
pada Gambar 4.7.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 4.7: analisis.html-->
<!--Perhitungan
hasil ujian. -->
<html xmlns =
"http://www.w3.org/1999/xhtml">
<head>
<title>Analisis Hasil Ujian</title>
<script type =
"text/javascript">
<!--
// inisialisasi variabel-variabel
dalam deklarasi
var lulus = 0; // jumlah
yang lulus
var gagal = 0; // jumlah
yang gagal
var mahasiswa = 1; //
kounter mahasiswa
var hasil; // hasil ujian
// memproses 10 mahasiswa; loop
terkendali-kounter
while ( mahasiswa <= 10
)
{
hasil = window.prompt( "Masukkan
hasil (1=lulus,2=gagal)", "0" );
if ( hasil ==
"1" )
lulus = lulus + 1;
else
gagal = gagal + 1;
mahasiswa = mahasiswa + 1;
} // akhir while
// fase terminasi
document.writeln( "<h1>Hasil
Ujian</h1>" );
document.writeln(
"Lulus: " +
lulus + "<br />Gagal: " + gagal );
if ( lulus > 8 )
document.writeln(
"<br />Naikkan biaya pelatihan" );
// -->
</script>
</head>
<body>
<p>Klik Refresh untuk
menjalankan kembali skrip ini</p>
</body>
</html>
|
Gambar 4.7 Perhitungan hasil ujian
4.9 Operator Penugasan
JavaScript menyediakan beberapa operator penugasan (yang dikenal dengan
operator penugasan kompon atau operator penugasan gabungan) untuk memperpendek
ekspresi penugasan. Sebagai contoh, statemen
c
= c + 3;
dapat dipersingkat dengan operator penugasan penjumlahan, +=, sebagai
c
+= 3;
Operator += menjumlahkan nilai
dari ekspresi di sisi kanan operator dengan nilai variabel di sisi kiri
operator dan menyimpan hasilnya di dalam variabel di sisi kiri operator.
Sembarang statemen dalam bentuk
variabel = variabel
operator ekspresi;
dimana operator adalah salah
satu dari operator-operator biner +, -, *, /, atau %, dapati dituliskan dalam bentuk
variabel
operator = ekspresi;
Jadi, penugasan c += 3
menambahkan 3 pada c. Gambar 4.8
menunjukkan operator-operator penugasan aritmatik, ekspresi-ekspresi contoh
menggunakan operator-operator tersebut, dan penjelasan tiap operator aritmatik.
|
Operator penugasan
|
Nilai awal variabel
|
Contoh ekspresi
|
Penjelasan
|
Menugaskan
|
|
+=
|
c
= 3
|
c
+= 7
|
c = c + 7
|
10
pada c
|
|
-=
|
d
= 5
|
d
-= 4
|
d = d - 4
|
1
pada d
|
|
*=
|
e
= 4
|
e
*= 5
|
e = e * 5
|
20
pada e
|
|
/=
|
f
= 6
|
f
/= 3
|
f = f / 3
|
2
pada f
|
|
%=
|
g
= 12
|
g
%= 9
|
g = g % 9
|
3
pada g
|
Gambar 4.8 Operator-operator penugasan Aritmatik
4.10 Operator Inkremen dan Dekremen
JavaScript menyediakan operator inkremen (++) dan operator dekreman (--)
(yang dicantumkan pada Gambar 4.9). Jika sebuah variabel c diinkremen sebesar 1, maka operator inkremen, ++, dapat dipakai menggantikan ekspresi
c = c + 1 atau c += 1. Jika operator
inkremen atau operator dekremen ditempatkan sebelum sebuah variabel, maka ia
disebut dengan operator prainkremen atau pradekremen. Jika operator inkremen atau operator dekremen ditempatkan setelah
sebuah variabel, maka ia disebut dengan operator pascainkremen atau pascadekremen
Operasi prainkremen (atau pradekremen) atas sebuah variabel menyebabkan
program menginkremen (mendekremen) variabel tersebut sebesar 1, kemudian
menggunakan nilai baru dari variabel tersebut di dalam ekspresi dimana ia
berada. Operasi pascainkremen (pascadekremen) atas sebuah variabel menyebabkan
program untuk menggunakan nilai sekarang dari variabel tersebut di dalam
ekspresi dimana ia berada, kemudian menginkremen (mendekremen) variabel
tersebut sebesar 1.
|
Operator
|
Contoh
|
Disebut dengan
|
Penjelasan
|
|
++
|
++a
|
prinkremen
|
Menginkremen variabel a
sebesar 1, kemudian menggunakan nilai baru dari variabel tersebut di dalam
ekspresi dimana ia berada.
|
|
++
|
a++
|
pascainkremen
|
menggunakan nilai sekarang dari variabel a di dalam ekspresi dimana ia berada, kemudian menginkremen variabel tersebut sebesar 1.
|
|
--
|
--b
|
pradekremen
|
Mendekremen variabel b
sebesar 1, kemudian menggunakan nilai baru dari variabel tersebut di dalam
ekspresi dimana ia berada.
|
|
--
|
b--
|
pascadekremen
|
menggunakan nilai sekarang dari variabel b di dalam ekspresi dimana ia berada, kemudian mendekremen
variabel tersebut sebesar 1.
|
Gambar 4.9 Operator inkremen dan dekremen
Tiga operator penugasan pada Gambar 4.7 (baris 24, 26, dan 28),
lulus = lulus + 1;
gagal = gagal + 1;
mahasiswa = mahasiswa + 1;
dapat dituliskan secara lebih singkat menggunakan operator penugasan:
lulus += 1;
gagal += 1;
mahasiswa
+= 1;
menggunakan operator prainkremen:
++lulus;
++gagal;
++mahasiswa;
atau menggunakan operator pascainkremen:
lulus++;
gagal++;
mahasiswa++;
Skrip pada Gambar 4.10 mendemonstrasikan perbedaan antara versi
prainkremen dan versi pascainkremen dari operator inkremen ++. Operasi pascainkremen
terhadap variabel c menyebabkan
variabel tersebut diinkremen setelah ia digunakan di dalam pemanggilan metode document.writeln (baris 18). Operasi
prainkremen terhadap variabel c
menyebabkan variabel tersebut diinkremen sebelum ia digunakan di dalam
pemanggilan metode document.writeln
(baris 25). Program menampilkan nilai c
sebelum dan sesudah operator ++
digunakan. Operator dekremen (--)
bekerja dengan cara yang sama.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
<?xml
version = "1.0" encoding = "utf-8"?>
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Gambar 4.10: inkremen.html-->
<!--
Prainkremen dan Pascainkremen. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Prainkremen dan
Pascainkremen</title>
<script type =
"text/javascript">
<!--
var c;
c = 5;
document.writeln( "<h3>Pascainkremen</h3>"
);
document.writeln( c ); //
menampilkan 5
// menampilkan 5 kemudian
menginkremen
document.writeln( "<br
/>" + c++);
document.writeln( "<br
/>" + c ); // menampilkan 6
c = 5;
document.writeln( "<h3>Prainkremen</h3>"
);
document.writeln( c ); // menampilkan
5
// menginkremen kemudian
menampilkan 6
document.writeln( "<br
/>" + ++c);
document.writeln( "<br
/>" + c ); // menampilkan 6
// -->
</script>
</head><body></body>
</html>
|
Gambar 4.10 Prainkremen dan pascainkremen
Gambar 4.11 mencantumkan derajat keutamaan dan asosiatifitas
operator-operator yang telah dikenalkan sampai sejauh ini. Operator-operator ditampilkan
dari atas ke bawah dengan urutan keutamaan menurun. Kolom kedua menjelaskan
asosiatifitas dari operator-operator pada tiap level keutamaan. Perhatikan
bahwa operator kondisional (?:), operator inkremen (++) dan operator dekremen (--),
dan operator penugasan =, +=, -=, *=, /=, dan %= berasosiasi dari kanan ke kiri. Kolom ketiga mencantumkan tipe
grup operator.
|
Operator
|
Asosiatifitas
|
Tipe
|
|
++ --
|
kanan ke kiri
|
unary
|
|
* / %
|
kiri ke kanan
|
multiplikatif
|
|
+ -
|
kiri ke kanan
|
aditif
|
|
< <= >
>=
|
kiri ke kanan
|
relasional
|
|
== !=
|
kiri ke kanan
|
ekualitas
|
|
?:
|
kanan ke kiri
|
kondisional
|
|
= += -= *=
/= %=
|
kanan ke kiri
|
penugasan
|
Gambar 4.11 Derajat keutamaan dan asosiatifitas semua operator yang telah
didiskusikan sejauh ini
No comments:
Post a Comment