Pengantar Javascript

Saat ini World Wide Web (WWW) merupakan salah satu layanan Internet yang paling populer. Pada awalnya, popularitas WWW ditopang oleh keberadaan bahasa HTML. Dengan format HTML, informasi yang kita miliki dapat ditampilkan pada berbagai jenis komputer (bebas platform), dan pengunjung diberi kemudahan untuk berpindah dari satu halaman web tertentu ke halaman-halaman web lainnya dengan alur non-linear (melalui hyperlink). Sayangnya halaman web yang dapat ditampilkan bersifat statis, artinya pengunjung hanya dapat melihat informasi yang disajikan, tetapi belum memungkinkan adanya proses interaksi (hanya satu arah). Setiap perubahan pada tampilan web hanya dimungkinkan jika kode sumber (source code) HTML-nya diubah terlebih dulu.
1

Perkembangan lebih lanjut menuntut adanya teknologi yang memungkinkan halaman web yang interaktif dan lebih hidup (dinamis). Beberapa contoh berikut ini tidak dapat diwujudkan dengan hanya mengandalkan bahasa HTML : Menampilkan animasi teks dan grafik. Melakukan proses perhitungan. Membuat aplikasi yang membutuhkan banyak interaksi dengan pengunjung (misalnya kalkulator atau permainan kartu). Maka lahirlah beberapa bahasa pemrograman untuk memenuhi kebutuhan pengembangan aplikasi web yang tidak mampu dilakukan oleh HTML, antara lain adalah Javascript. Kita dapat membuat halaman-halaman web yang interaktif / dinamis dengan bantuan Javascript.
2

Penulisan instruksi, function dan variabel dalam JavaScript : Case Sensitive (membedakan huruf kapital dan huruf kecil). Bagian program JavaScript dalam HTML ditandai dengan tag sbb : <SCRIPT LANGUAGE = JavaScript> .. .. .. </SCRIPT>

Menambahkan komentar
(= bagian program yang tidak diproses) : Komentar 1 baris : // komentar ditulis di sini Komentar lebih dari 1 baris : /* komentar baris pertama komentar baris kedua dst */

Perintah untuk menuliskan data

document.write ( . ) menulis data tanpa penambahan carriage return document.writeln ( . ) menulis data dengan penambahan carriage return (harus diletakkan di dalam tag kontainer <PRE>)

Aturan penulisan variabel

Diawali dengan huruf atau tanda garis bawah ( _ ) Tidak boleh mengandung spasi Tidak boleh berupa reserved word JavaScript

Beberapa operator JavaScript

Operator aritmatik : + - / * % ++ -Operator pemberian nilai : = Operator pembanding : == != > < >= <= Operator logika : && || ! Operator penggabungan string : +

User Interface Object (1)

PROMPT Metode prompt digunakan untuk menampilkan kotak dialog isian (input box). Contoh : T = prompt ( Masukkan sebuah teks : , ) ;

SEGITIGA.HTM

Tampilan Output : Alas = 10 Tinggi = 30 Luas segitiga siku-siku = 0.5 x 10 x 30 = 150

9

BUJURSANGKAR.HTM Tampilan Input : Masukkan nilai sisi : Tampilan Output : Sisi = Luas bujursangkar =

PERSEGI.HTM Tampilan Input : Masukkan nilai panjang : Masukkan nilai lebar : Tampilan Output : Panjang = Lebar = Luas persegipanjang =
10

This document was created with Win2PDF available at http://www.daneprairie.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only.

Latihan 1

MENULUAS.HTM
Luas Segitiga link ke segitiga.htm Luas Bujursangkar link ke bujursangkar.htm Luas Persegipanjang link ke persegi.htm TARGET : frame sebelah kanan

LUAS.HTM (FRAMESET)

MENULUAS.HTM

Latihan 2
Diketahui : 1 mil = 1609 meter, 1 yard = 0.9144 meter, 1 meter = 100 cm Program KONVERSI1.HTM akan mengkonversikan angka dalam satuan MIL menjadi METER dan CM Input : Angka dalam MIL Output : Angka dalam METER & CM Program KONVERSI2.HTM akan mengkonversikan angka dalam satuan CM menjadi MIL dan YARD Input : Angka dalam CM Output : Angka dalam MIL & YARD

Simpan FRAMESET di atas dengan nama file : XMAIN.HTM Keterangan link XMENU.HTM : IdPembuat : link ke XPEMBUAT.HTM Konversi MIL : link ke KONVERSI1.HTM Konversi CM : link ke KONVERSI2.HTM Frame TARGET : seluruhnya ke FRAME BAGIAN TENGAH
4

This document was created with Win2PDF available at http://www.daneprairie.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only.

Teknik Looping
for (counter_awal ; counter_akhir ; step) { // bagian program yang diulang } Contoh :

for (i=1; i<=10; i=i+1) {document.writeln (i) ;}

while (kondisi / syarat loop)

{ // bagian program yang diulang }

Contoh : i = 1; while (i <= 10) { document.writeln (i) ; i = i + 1; }

2

SOAL LATIHAN LOOPING

1. Buat dengan for : Output : 1 3 5 19 (nama file : for-2.htm) Output : 24 20 16 0 (nama file : for-3.htm) 2. Buat soal 1 dengan while Output : 100 105 110 Output : 500 490 480

150 (nama file : while-2.htm) 300 (nama file : while-3.htm)

User Interface Object (2)

CONFIRM Metode confirm digunakan untuk menampilkan kotak dialog konfirmasi. Contoh : T = confirm ( Anda yakin akan menghapus data ? ) ; Jika user memilih tombol OK, maka variabel T akan berisi nilai TRUE. Sebaliknya jika user memilih tombol Cancel, maka variabel T akan berisi nilai FALSE.

SOAL LATIHAN LOOPING (III)

Buat program SUHU.HTM untuk menghitung konversi suhu dalam FAHRENHEIT menjadi CELCIUS Rumus : C = 5/9 (F - 32)

SOAL LATIHAN LOOPING (IV)

Buka kembali program :
SEGITIGA.HTM, BUJURSANGKAR.HTM, PERSEGI.HTM

Ubahlah agar ketiga program tsb bisa di-input secara berulang (tambahkan CONFIRM)

Pencabangan Bersyarat
if (kondisi) { // Bagian program yang dijalankan jika kondisi benar } else { // Bagian program yang dijalankan jika kondisi salah } Contoh : if (Nilai > 60) {Status = Lulus ;} else {Status = Gagal ;}
7

NAMA FILE : IF-1.HTM <html><body><pre> <script language=javascript> Nilai = prompt( Masukkan nilai ujian : , ); if (Nilai > 60) { Status = Lulus ; } else { Status = Gagal ; } document.writeln( Nilai ujian = , Nilai); document.writeln( Status kelulusan = , Status); </script></pre></body></html>

if (kondisi pertama) { // bagian program yang dijalankan jika kondisi pertama terpenuhi } else if (kondisi kedua) {// bagian program yang dijalankan jika kondisi kedua terpenuhi } else if (kondisi ke-n) {// bagian program yang dijalankan jika kondisi ke-n terpenuhi } else {// bagian program yang dijalankan jika semua kondisi di atas tidak terpenuhi } Contoh :

if (Gol == 1) {Honor = 1200000;} else if (Gol == 2) {Honor = 950000;} else if (Gol == 3) {Honor = 750000;} else {Honor = 0;}
9

NAMA FILE : IF-2.HTM <html><body><pre> <script language=javascript> Gol = prompt( Masukkan data golongan [1-3] : , ); if (Gol == 1) { Honor = 1200000; } else if (Gol == 2) { Honor = 950000; } else if (Gol == 3) { Honor = 750000; } else { Honor = 0; } document.writeln( Golongan = , Gol); document.writeln( Honor Pegawai = , Honor); </script></pre></body></html>

10

switch (var_pencabangan) { case nilai_pertama : // bag.program yang dijalankan jika var_pencabangan = nilai_pertama case nilai_kedua : // bag.program yang dijalankan jika var_pencabangan = nilai_kedua case nilai_ke_n : // bag.program yang dijalankan jika var_pencabangan = nilai_ke_n default : // bag.program yang dijalankan jika var_pencabangan semua nilai di atas } Contoh : switch (Gol) { case 1 : Honor = 1200000; break; case 2 : Honor = 950000; break; case 3 : Honor = 750000; break; default : Honor = 0; }
11

NAMA FILE : SWITCH-1.HTM <html><body><pre> <script language=javascript> Gol = prompt( Masukkan data golongan [1-3] : , ); switch (Gol) { case 1 : Honor = 1200000; break; case 2 : Honor = 950000; break; case 3 : Honor = 750000; break; default : Honor = 0; } document.writeln( Golongan = , Gol); document.writeln( Honor Pegawai = , Honor); </script></pre></body></html>

12

SOAL LATIHAN PENCABANGAN (I)

Input : Harga Satuan, Banyak (gunakan metoda prompt) Output : Bonus, Total, PPH, Jumlah Bayar. Ketentuan : Banyak 0 10 11 50 51 50 di atas 50 Bonus Gelas mug Gantungan kunci Payung Dinner set

Total = Banyak x Harga Satuan. Jika Total belanja di atas Rp.1 juta, dikenakan PPH 5%. Jumlah Bayar = Total PPH Simpan program ini dengan nama : IF-3.HTM
13

SOAL LATIHAN PENCABANGAN (II)

Input : Golongan, Status [S/M], Jumlah Anak Output : Gaji Pokok, Tunjangan Keluarga, Tunjangan Anak, Gaji Total Ketentuan : Golongan Gaji Pokok Tunj.Keluarga A B C 1500000 1800000 2000000 600000 750000 950000 Tunj.Anak 100000 175000 250000

Tunjangan Keluarga hanya diberikan kepada karyawan yang telah menikah (Statusnya = M). Tunjangan Anak diberikan maksimal untuk 2 orang anak. Gaji Total = Gaji Pokok + Tunjangan Keluarga + Tunjangan Anak. Simpan program ini dengan nama : SWITCH-2.HTM
14

This document was created with Win2PDF available at http://www.daneprairie.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only.

Function parseFloat & parseInt

parseFloat :
Mengkonversi data teks menjadi bilangan real

parseInt :
Mengkonversi data teks menjadi bilangan integer

LATIH-FORM1.HTM Input : Nomor Bon Nama Barang Harga Satuan Jumlah Unit Output : Harga Total PPN Jumlah Bayar Ketentuan : Harga Total = Harga Satuan x Jumlah Unit Jika Harga Total di atas Rp. 25000 dikenai PPN 10% dari Harga Total Jumlah Bayar = Harga Total + PPN

LATIH-FORM2.HTM Input : NPM Nilai Tugas (N1) Nilai UTS (N2) Nilai UAS (N3) Output : Angka Akhir (AA) Nilai Akhir (NA) Ketentuan : AA ditentukan oleh N1, N2, N3 dg bobot : 25%, 35%, 40% Batasan NA : 0 AA < 40 NA = E 40 AA < 55 NA = D 55 AA < 70 NA = C 70 AA < 85 NA = B 85 AA 100 NA = A
3

This document was created with Win2PDF available at http://www.daneprairie.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only.

LATIHAN PENGGUNAAN KOMPONEN FORM

LATFORM1.HTM : contoh penggunaan COMBO BOX <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function Hitung() { pilihan = document.frm.gol.selectedIndex; switch (pilihan) { case 0 : gp=900000; tj=300000; break; case 1 : gp=750000; tj=200000; break; case 2 : gp=600000; tj=100000; } gt = gp + tj; document.frm.gapok.value = gp; document.frm.tunjang.value = tj; document.frm.gatot.value = gt; } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TR><TD>NIP :</TD> <TD><INPUT TYPE=text NAME=nip></TD></TR> <TR><TD>Golongan :</TD> <TD><SELECT NAME=gol> <OPTION>I <OPTION SELECTED>II <OPTION>III </SELECT></TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE=Hitung ONCLICK=Hitung()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> <TR><TD>Gaji Pokok :</TD> <TD><INPUT TYPE=text NAME=gapok></TD></TR> <TR><TD>Tunjangan :</TD> <TD><INPUT TYPE=text NAME=tunjang></TD></TR> <TR><TD>Gaji Total :</TD> <TD><INPUT TYPE=text NAME=gatot></TD></TR> </TABLE></FORM></BODY></HTML>

LATFORM2.HTM : contoh penggunaan RADIO BUTTON <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function Hitung() { if (document.frm.gol[0].checked) {gp=900000; tj=300000} else if (document.frm.gol[1].checked) {gp=750000; tj=200000;} else if (document.frm.gol[2].checked) {gp=600000; tj=100000;} gt = gp + tj; document.frm.gapok.value = gp; document.frm.tunjang.value = tj; document.frm.gatot.value = gt; } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TR><TD>NIP :</TD> <TD><INPUT TYPE=text NAME=nip></TD></TR> <TR><TD VALIGN=top>Golongan :</TD> <TD><INPUT TYPE=radio NAME=gol> I <BR> <INPUT TYPE=radio NAME=gol> II <BR> <INPUT TYPE=radio NAME=gol CHECKED> III </TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE=Hitung ONCLICK=Hitung()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> <TR><TD>Gaji Pokok :</TD> <TD><INPUT TYPE=text NAME=gapok></TD></TR> <TR><TD>Tunjangan :</TD> <TD><INPUT TYPE=text NAME=tunjang></TD></TR> <TR><TD>Gaji Total :</TD> <TD><INPUT TYPE=text NAME=gatot></TD></TR> </TABLE></FORM></BODY></HTML>

LATFORM3.HTM : contoh penggunaan CHECK BOX <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function Hitung() { if (document.frm.gol[0].checked) {gp=900000; tj=300000} else if (document.frm.gol[1].checked) {gp=750000; tj=200000;} else if (document.frm.gol[2].checked) {gp=600000; tj=100000;} if (document.frm.pot1.checked) {p1=5000;} else {p1=0;} if (document.frm.pot2.checked) {p2=3000;} else {p2=0;} jp = p1 + p2; gt = gp + tj - jp; document.frm.gapok.value = gp; document.frm.tunjang.value = tj; document.frm.jumpot.value = jp; document.frm.gatot.value = gt; } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TABLE> <TR><TD>NIP :</TD> <TD><INPUT TYPE=text NAME=nip></TD></TR> <TR><TD VALIGN=top>Golongan :</TD> <TD><INPUT TYPE=radio NAME=gol> I <BR> <INPUT TYPE=radio NAME=gol> II <BR> <INPUT TYPE=radio NAME=gol> III </TD></TR> <TR><TD VALIGN=top>Potongan :</TD> <TD><INPUT TYPE=checkbox NAME=pot1> Iuran Koperasi <BR> <INPUT TYPE=checkbox NAME=pot2 CHECKED> Iuran Serikat Pekerja </TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE=Hitung ONCLICK=Hitung()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> <TR><TD>Gaji Pokok :</TD> <TD><INPUT TYPE=text NAME=gapok></TD></TR> <TR><TD>Tunjangan :</TD> <TD><INPUT TYPE=text NAME=tunjang></TD></TR> <TR><TD>Jumlah Potongan :</TD> <TD><INPUT TYPE=text NAME=jumpot></TD></TR> <TR><TD>Gaji Total :</TD> <TD><INPUT TYPE=text NAME=gatot></TD></TR> </TABLE></FORM></BODY></HTML>

Nama File : Latform4.htm Input : NRP (textbox) Nama Siswa (textbox) Program Studi (radio button dg pilihan : Web Master, Multimedia Interaktif, Sekretari Profesional, Komputer Aplikasi Bisnis. Default : Sekretari Profesional) Cara Pembayaran (combobox dg pilihan : Tunai, Cek / Giro. Default : Tunai) Output : Program Studi Biaya Pendidikan Biaya Administrasi Jumlah Biaya Ketentuan : Biaya Pendidikan untuk tiap program sbb : Program Studi Biaya Pendidikan Web Master 5.000.000 Multimedia Interaktif 6.000.000 Sekretari Profesional 3.750.000 Komputer Aplikasi Bisnis 3.400.000 Khusus untuk pembayaran dengan CEK / GIRO, dikenakan Biaya Administrasi sebesar 2% dari Biaya Pendidikan. Jumlah Biaya = Biaya Pendidikan + Biaya Administrasi.

Nama File : Latform5.htm

Buatlah program kalkulator sederhana dg Javascript sbb :

Textbox

Textbox Combobox [+,-,x,:] Button

Textbox

Ketentuan : Textbox yg kiri & tengah adalah untuk meng-input angka Tombol button [ = ] berfungsi meng-eksekusi perhitungan Textbox kanan untuk menampilkan output hasil perhitungan

This document was created with Win2PDF available at http://www.daneprairie.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only.

CONTOH PENGGUNAAN TEKNIK VALIDASI

VALIDASI1.HTM // Contoh validasi utk mencegah data kosong // Pesan kesalahan : sama utk semua textbox <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function validasi() { d1 = document.frm.data1.value; d2 = document.frm.data2.value; if ((d1=="")||(d2=="")) {alert("Data tidak boleh dikosongkan !");} else {alert("Data sudah terisi seluruhnya !");} } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TR><TD>Data Pertama :</TD> <TD><INPUT TYPE=text NAME=data1></TD></TR> <TR><TD>Data Kedua :</TD> <TD><INPUT TYPE=text NAME=data2></TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE="Cek Validasi" ONCLICK=validasi()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> </TABLE></FORM></BODY></HTML>

VALIDASI2.HTM // Contoh validasi utk mencegah data kosong // Pesan kesalahan : spesifik utk setiap textbox // Posisi kursor akan di-fokus di tempat data yang salah <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function validasi() { d1 = document.frm.data1.value; d2 = document.frm.data2.value; if (d1=="") { alert("Data pertama tidak boleh dikosongkan !"); document.frm.data1.focus(); } else if (d2=="") { alert("Data kedua tidak boleh dikosongkan !"); document.frm.data2.focus(); } else { alert("Data sudah terisi seluruhnya !"); } } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TR><TD>Data Pertama :</TD> <TD><INPUT TYPE=text NAME=data1></TD></TR> <TR><TD>Data Kedua :</TD> <TD><INPUT TYPE=text NAME=data2></TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE="Cek Validasi" ONCLICK=validasi()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> </TABLE></FORM></BODY></HTML>

VALIDASI3.HTM // Contoh validasi utk mencegah : data kosong + data bukan angka, // serta mencegah data yg jumlah digitnya tidak sesuai <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function validasi() { npm = document.frm.xnpm.value; if (npm=="") { alert("Data NPM tidak boleh dikosongkan !"); document.frm.xnpm.focus(); } else if (isNaN(npm)) { alert("Data NPM hanya terdiri atas angka !"); document.frm.xnpm.focus(); } else if (npm.length!=10) { alert("Data NPM harus terdiri atas 10 angka !"); document.frm.xnpm.focus(); } else { alert("Data NPM sudah benar !"); } } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TR><TD>N P M :</TD> <TD><INPUT TYPE=text NAME=xnpm></TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE="Cek Validasi" ONCLICK=validasi()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> </TABLE></FORM></BODY></HTML>

VALIDASI4.HTM // Contoh validasi utk mencegah nilai di luar range yg ditentukan <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function validasi() { ipk = document.frm.xipk.value; if (ipk=="") { alert("Data IPK tidak boleh dikosongkan !"); document.frm.xipk.focus(); } else if (isNaN(ipk)) { alert("Data IPK hanya terdiri atas angka !"); document.frm.xipk.focus(); } else if ((ipk<0)||(ipk>4)) { alert("Data IPK harus bernilai antara 0.00 s/d 4.00 !"); document.frm.xipk.focus(); } else { alert("Data IPK sudah benar !"); } } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TR><TD>I P K :</TD> <TD><INPUT TYPE=text NAME=xipk></TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE="Cek Validasi" ONCLICK=validasi()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> </TABLE></FORM></BODY></HTML>

VALIDASI5.HTM Buatlah program Javascript yang meng-input ukuran balok segiempat sbb : Panjang (textbox) Lebar (textbox) Tinggi (textbox) Ketentuan validasi untuk semua data tsb adalah : Data tidak boleh dikosongkan Harus berupa angka Nilai angka harus positif

VALIDASI6.HTM // Contoh validasi yang langsung diikuti dengan proses perhitungan <HTML><HEAD><SCRIPT LANGUAGE = JavaScript> function hitung() { a = document.frm.alas.value; t = document.frm.tinggi.value; if (a=="") { alert("Data alas tidak boleh dikosongkan !"); document.frm.alas.focus(); } else if (isNaN(a)) { alert("Data alas harus berupa angka !"); document.frm.alas.focus(); } else if (a<=0) { alert("Data alas harus positif !"); document.frm.alas.focus(); } else if (t=="") { alert("Data tinggi tidak boleh dikosongkan !"); document.frm.tinggi.focus(); } else if (isNaN(t)) { alert("Data tinggi harus berupa angka !"); document.frm.tinggi.focus(); } else if (t<=0) { alert("Data tinggi harus positif !"); document.frm.tinggi.focus(); } else { ls = 0.5 * a * t; document.frm.luas.value = ls; } } </SCRIPT></HEAD> <BODY><FORM NAME=frm><TABLE> <TR><TD>Alas :</TD> <TD><INPUT TYPE=text NAME=alas></TD></TR> <TR><TD>Tinggi :</TD> <TD><INPUT TYPE=text NAME=tinggi></TD></TR> <TR><TD COLSPAN=2 ALIGN=center><HR> <INPUT TYPE=button VALUE="Cek & Hitung" ONCLICK=hitung()> <INPUT TYPE=reset VALUE=Hapus><HR></TD></TR> <TR><TD>Luas segitiga :</TD> <TD><INPUT TYPE=text NAME=luas></TD></TR> </TABLE></FORM></BODY></HTML>

This document was created with Win2PDF available at http://www.daneprairie.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only.

VALIDASI7.HTM Buatlah program kalkulator sederhana dg Javascript sbb :

Textbox Combobox [+,-,x,:]

Textbox

Textbox Button

Ketentuan : Textbox yg kiri & tengah adalah untuk meng-input angka Tombol button [ = ] berfungsi meng-eksekusi perhitungan Textbox kanan untuk menampilkan output hasil perhitungan Lengkapi textbox kiri & tengah dg validasi sbb : Data tidak boleh kosong Harus berupa angka

VALIDASI8.HTM Buatlah program Javascript sbb : Input : Nomor Anggota (textbox) Judul Buku (textbox) Kategori (listbox : Fiksi, Sains, Ekonomi) Lama Pinjam Output : Jumlah Hari Keterlambatan Jumlah Denda Ketentuan : Maksimal lama peminjaman = 5 hari, selebihnya dianggap keterlambatan. Jika terlambat, anggota akan dikenakan denda. Besarnya denda per hari untuk kategori : Fiksi=500, Sains=750, Ekonomi=1000 Lengkapi dg validasi : Nomor Anggota : tidak kosong, berupa angka, tiga digit Judul Buku : tidak kosong Lama Pinjam : tidak kosong, berupa angka, bernilai positif

VALIDASI9.HTM Buatlah program Javascript yang meng-input data sbb : No.Rekening (textbox) Jumlah Deposito (textbox) Jangka Waktu (radio button dg pilihan : 1/3/6/12 Bulan) Output menampilkan : Bunga(%) per tahun Bunga(Rp) = Bunga(%) / 12 x Jangka Waktu x Jumlah Deposito Total = Jumlah Deposito + Bunga(Rp) Ketentuan : Bunga per tahun utk deposito 1 bulan : 8%, 3 bulan : 9%, 6 bulan : 12%, dan 12 bulan : 14% Validasi utk No.Rekening : tidak kosong, berupa angka 5 digit Validasi utk Jumlah Deposito : tidak kosong, berupa angka minimal Rp.1 juta Pilihan default utk Jangka Waktu : 6 Bulan.

This document was created with Win2PDF available at http://www.daneprairie.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only.

Tips & Trik

Bagian Tips & Trik ini adalah beberapa hal yang dapat anda lakukan untuk meningkatkan halaman Web anda tanpa tahu banyak mengenai JavaScript. Meletakan tulisan pada status bar Menampilkan tanggal "Last Updated" pada dokumen Menampilkan pesan dengan suatu kotak pesan Membuat suatu link yang dapat menutup jendela browser Membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list Membagi Jendela Browser menjadi frame, dan klik link pada pilihan diframe kiri akan mengupdate isi frame kanan. Meletakan tulisan pada status bar Contoh pertama mendemontrasikan bagaimana memanipulasi tulisan pada status bar. Ketika anda mengerakan kursor melalui suatu link, maka statusbar akan menampilkan URL tujuan link tersebut. Suatu kode HTML untuk suatu membentuk link dapat berupa :
<A HREF="mylink.htm">klik disini</A>

Untuk menampilkan sesuatu pada status bar ketika mouse pointer digerakan melalui link, anda perlu menambah kode berikut :
<A HREF="mylink.htm" onMouseOver="window.status='Klik disini untuk mengetahui lebih jauh tentang saya'; return true;" onMouseOut="window.status=''; ">Klik disini</A>

Kode diatas akan menghasilkan suatu link Klik disini. Coba gerakan mouse pointer melaluinya, mudah bukan ?
onMouseOver adalah suatu penanganan event. Perlu diperhatikan bahwa JavaScript akan membedakan huruf besar dan huruf kecil, tetapi Microsoft Internet Explorer adalah lebih pemaaf dibandingkan dengan Netscape Navigator , jadi untuk hasil yang lebih akurat, sebaiknya anda menggunakan Navigator dalam memeriksa kebenaran script pada halaman anda.

Anda mungkin merasa aneh mengapa kami diperlukan suatu return true; pada penanganan event onMouseOver. Normalnya browser menampilkan URL dari link pada status bar, dan potongan kode ini memberitahukan kepada browse untuk tidak menimpa pesan kita dengan URL tersebut. Menampilkan tanggal "Last Updated" pada dokumen Pada halaman kita sering ingin menampilkan informasi kepada pengunjung tanggal terakhir kali halaman kita di Update. Berikut ini adalah potongan script yang akan secara otomatis menghasilkan informasi terakhir kali halaman kita di Update:
<SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan dari browser non-js document.write("Last updated :"); document.write(document.lastModified); // --> </SCRIPT>

Sisipkan kode berikut pada bagian dokumen HTML anda yang akan menampilkan informasi Last update. Perhatikan bahwa script diketik diantara tag komentar HTML <!-- ... -->, tujuannya supaya script tersebut tersembunyi dari browser non-JavaScript, dengan demikian tidak menimbulkan kesalahan pada browser non-JavaScript tersebut. Catatan : biasakan mengetik script anda diantara tag komentar HTML <!-- .. -->. Menampilkan pesan dengan suatu kotak pesan

Kadang-kadang kita ingin menampilkan suatu pesan kepada pengunjung, jika suatu tombol atau link di klik. Pada JavaScript kita dapat menggunakan fungsi alert() yang mana akan menampilkan suatu kotak pesan. Misalnya kita ingin memberi kejutan kepada pengunjung, begitu halaman dibuka. Untuk melakukan hal ini, tambahkan saja kode berikut setelah tag <BODY> (atau diantara tag <HEAD>).
<SCRIPT LANGUAGE="JavaScript"> <!-- menyembunyikan dari browser non-js alert("Press Ok to start formatting your hard disk"); // akhir dari penyembunyian --> </SCRIPT>

Hal ini tentu saja akan menjadi kejutan bagi pengunjung halaman anda :-). Bagaimana jika kita ingin menampilkan suatu kotak pesan ketika user melakukan klik pada suatu link Anda dapat mencoba klik disini. Untuk memahami apa sebenarnya yang terjadi, coba simak script berikut :
<A HREF="JavaScript: alert('pesan anda disini.')">

JavaScript: bagian ini akan memberitahukan kepada browser bahwa dia harus menjalankan perintah JavaScript yang tersebut ketika link di klik. Anda juga dapat membuat suatu pesan ditampilkan tombol ditekan. Coba yang berikut ini:

<FORM> <INPUT TYPE=BUTTON VALUE="Klik disini" onClick="alert('pesan anda disini')"> </FORM>

Catatan Anda mungkin memperhatikan bahwa, cara penulisan script pada setiap contoh diatas berbeda. Yang pertama adalah script ditulis diantara tag HTML <A HREF=...>, yang kedua adalah diantara suatu tang <SCRIPT> ... </SCRIPT>. Perbedaan ini adalah bahwa, script pertama akan dijalankan pada event tertentu (MouseOver dalam hal ini), sedangkan untuk yang kedua, script langsung dijalankan ketika ditemukan pada dokumen HTML. Membuat suatu link yang dapat menutup jendela browser Untuk menutup jendela browser yang sedang aktif anda dapat menggunakan metode close pada objek window. Contoh :
<A HREF="javascript:window.close()">tutup</A>

Coba klik tutup untuk menutup jendela ini.

Membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown list Anda dapat membuat suatu fungsi yang mengambil nilai item yang dipilih pemakai, dan membuka halaman yang diinginkan

Adapun kode untuk Contoh diatas: <SCRIPT LANGUAGE='JavaScript'> <!--

function BuatArray() { var jlhargumen = BuatArray.arguments.length; for ( i = 0 ; i < jlhargumen; i++ ) { this[i]=BuatArray.arguments[i] } } function buka() { var pilih = eval(document.dropdown.site.selectedIndex); if( (pilih > 0) && (pilih < 7) ) { var bagian=new BuatArray( '', 'http://indoprog.terrashare.com/tutor/html/index.html', 'http://indoprog.terrashare.com/tutor/javascript/index.html', 'http://indoprog.terrashare.com/tutor/asp/index.html', 'http://indoprog.terrashare.com/tutor/php/index.html', 'http://indoprog.terrashare.com/tutor/perl/index.html'); this.location=buka[pilih]; } } //--> </SCRIPT> <FORM NAME="dropdown"> <SELECT NAME="site" onChange='buka();' ALIGN="left"> <OPTION SELECTED>Pilih tutorial yang diinginkan <OPTION>HTML <OPTION>JavaScript <OPTION>ASP <OPTION>PHP <OPTION>Perl </SELECT> </FORM>

Membagi Jendela Browser menjadi frame, dan klik link pada pilihan diframe kiri akan mengupdate isi frame kanan. Anda dapat melakukan hal tersebut dengan JavaScript, dan perhatikan contoh berikut : Misalnya halaman html untuk membuat frame kiri dan kanan adalah sebagai berikut :
Contohy.html <html> <head> <title>Tutorial JavaScript</title> <frameset cols=175,*> <frame src="menu.html" name="kiri"> <frame src="topik1.html" name="kanan"> </frameset> </head> </html>

Pada contoh diatas, pada frame kiri akan dibuka suatu html dengan nama menu.html, dan sebelah kanan akan diaktifkan topik1.html, dan isi dari menu.html adalah sebagai berikut :
menu.html <html> <head> <script language="JavaScript"> function buka(x) { top.kanan.location=x; // membuka halaman x pada frame kanan

return false } </script> </head> <body> <h1>Daftar Isi</h1> <a <a <a <a <a <a <a <a <a href="" href="" href="" href="" href="" href="" href="" href="" href="" onclick="return onclick="return onclick="return onclick="return onclick="return onclick="return onclick="return onclick="return onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr> buka('topik2.html')">Variabel dan Literal</a><hr> buka('topik3.html')">Ekspresi dan Operator</a><hr> buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr> buka('topik5.html')">Dasar dari Objek</a><hr> buka('topik6.html')">Objek dan Fungsi built-in</a><hr> buka('topik7.html')">Objek netscape</a><hr> buka('topik8.html')">Objek form</a><hr> buka('topik9.html')">Window dan Frame</a><hr>

</body> </html>

Pada menu.html diatas, kita menggunakan event onclick pada masing-masing link yang akan memanggil suatu fungsi buka yang diikuti dengan suatu parameter yang berupa nama dokumen html target. Pada fungsi buka, kita menggunakan properti location untuk frame kanan membuka halaman bersangkutan. Catatan : kanan dalam hal ini adalah nama frame. Klik untuk melihat hasil dari contoh diatas Bagaimana, menarik bukan ?
Dibuat oleh hendra@indoprog.com Medan - Sumatera Utara Indonesia

Latihan Java Script

Proteksi Password

Kadang-kadang kita ingin memproteksi halaman untuk kalangan sendiri. Usaha yang dapat kita lakukan untuk melakukan proteksi tersebut adalaj dengan menanyakan username dan password. Ketika pengunjung melakukan klik pada tombol submit, kode JavaScript pada halaman akan memeriksa apakah username dan jika password benar, maka halaman yang sebenarnya akan ditampilkan. Kodenya adalah sebagai berikut.

<FORM NAME="login"> Username: <INPUT NAME="username"><BR> Password: <INPUT NAME="password" TYPE=PASSWORD><BR> <INPUT TYPE=BUTTON VALUE="Login" onClick="verifyLogin()"> <INPUT TYPE=RESET> </FORM>

<SCRIPT LANGUAGE="Javascript"> <!-function verifyLogin() { var myForm = document.login;

if (myForm.username.value == "elvis" && myForm.password.value == "presley") window.location.href = "secretpage.html"; else

alert("Unknown username or wrong password"); } // --> </SCRIPT>

Yang ini form yang sebenarnya

Username: Password:

Dengan sedikit forward dan berhasil. Masalahnya adalah orang dapat melakukan suatu View|Source dan menemukan username serta password untuk halaman yang di proteksi password, tentu saja contoh ini kurang sempurna contoh ini kurang baik.

Yang kita butuhkan adalah suatu metode di mana pada HTML source-nya tidak akan kelihatan username dan password serta halaman target. Suatu metode yang umum digunakan adalah membuat nama halaman target berdasarkan username dan password yang dimasukkan oleh pemakai dan mengarahkan browser ke halaman tersebut. Perhatikan hasil modifikasi fungsi verifyLogin(.

<SCRIPT LANGUAGE="Javascript"> <!-function verifyLogin() { var myForm = document.login;

window.location.href = myForm.username.value + myForm.password.value + ".html"; } // --> </SCRIPT>

Sekarang fungsi akan melakukan pengabungan terhadap username, pasword dan ".html" serta mengarahkan browser ke lokasi tersebut. Jadi jika pengunjung memasukkan secret sebagai username dan page sebagai password, dia akan mendapatkan secretpage.html. Atau dengan kata lain mereka tidak akan mengetahui username dan paswword yang benar dan memasukan foo sebagai username dan bar sebagai password, mereka akan diarahkan ke html yang tidak ada foobar.html dan mendapatkan kesalahan yang menyatakan halaman tersebut tidak ada.

1.

image_css.htm

<html>

<head>

<style type=text/css>

body

background-image:url(file.jpg);

background-repeat:no-repeat;

background-position:center center;

</style>

</head>

<body>

</body>

</html>

2.

Latihan1.htm

<html>

<head>

</head>

<body>

<script>

var username;

username=prompt("Siapa nama Anda??");

alert("Hello..." + username);

//Script tentang waktu

Sekarang = new Date();

document.write("Hari ini " + Sekarang.getDate() + "-" + (Sekarang.getMonth()+1)+ "-" + Sekarang.getFullYear() + ", jam: " + Sekarang.getHours() + ":" + Sekarang.getMinutes() + "." + Sekarang.getSeconds())

</script>

</body>

</html>

Seperti script sebelumnya, script di atas dibuka dengan <SCRIPT LANGUAGE="JavaScript"> dan ditutup dengan </SCRIPT>. Kemudian di baris kedua diperkenalkan tanda "// " yang berarti bahwa apapun yang berada di sebelah kanan tanda tersebut akan diabaikan dan hanya dianggap sebagai komentar. Kemudian baris berikutnya adalah perintah Sekarang = new Date(); Di sini kita membuat object baru yang diberi nama "Sekarang". Obyek ini kita isi dengan waktu saat halaman ini di-load, yaitu menggunakan perintah new Date(). Kemudian ditutup dengan tanda titik koma (;) untuk mengakhiri sebuah statemen. Pada baris berikutnya kita menuliskan apa yang ada di dalam kurung ke halaman html, menggunakan document.write seperti biasa. Semua yang berada di antara tanda petik ("), misalnya "Hari ini " atau ", jam: " akan ditampilkan apa adanya, dan yang tidak diberi tanda petik akan diproses. Di sini kita menemui beberapa hal baru, yaitu Sekarang.getDate(), juga Sekarang.getMonth() sampai terakhir Sekarang.getSeconds(). Semua get...() tersebut adalah "method" yang bekerja pada "object" yang bernama Sekarang, di mana getDate() akan akan memberikan nilai tanggal, getMonth() akan memberikan nilai bulan, dst. Khusus untuk bulan, kita menggunakan perintah Sekarang.getMonth()+1 karena java script selalu menghitung mulai dari 0. Sehingga bulan Januari akan berharga "0", bulan Februari akan berharga "1", dst.

3.

tombol_warna.htm

<html>

<head>

</head>

<body>

<script>

function warna(pilihan)

alert("Wah ternyata kamu suka " + pilihan + " toh.")

document.bgColor=pilihan

</SCRIPT>

<h3>Pilih warna favorit anda.</h3>

<FORM>

<INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')">

<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">

<INPUT TYPE="button" VALUE="Coklat" onClick="warna('burlywood')">

<INPUT TYPE="button" VALUE="Kelabu" onClick="warna('darkgray')">

<INPUT TYPE="button" VALUE="Oranye" onClick="warna('peachpuff')">

<INPUT TYPE="button" VALUE="Putih" onClick="warna('white')">

</FORM>

</script>

</body>

</html>

Pada script di atas, kita menggunakan fungsi "warna(pilihan)". Variabel "pilihan" di sini berasal dari input yang diberikan pengunjung melalui form. Anda dapat melihat pada tag <INPUT ..> di bawah, kita menggunakan event handler onClick="warna(`pilihan'). Harga variabel pilihan akan tergantung pada tombol mana yang kita tekan. Kemudian pada fungsi "warna(pilihan)" di atas, pilihan kita ini ditampilkan dengan perintah alert(), juga digunakan untuk mengubah warna latar, menggunakan property "document.bgColor". Untuk jenis-jenis warna, selain menggunakan kode heksadesimal (seperti #ffffff), kita juga dapat menggunakan kata seperti di atas (lightblue, pink, burlywood, dll)

4.

buka_window.htm

<html> <head> </head> <body> <script> window.open('hello.htm', 'latihan', config='height=300,width=300') </script> </body> </html>

Dengan bentuk script seperti itu, otomatis saat halaman ini diload, akan muncul pop up seperti yang telah anda lihat. Anda juga dapat memunculkan window baru saat menggunakan link

5.

Buka_window2.htm

<html> <head> <script> </script> </head> <body> <A HREF="javascript:void(0)" onClick="window.open('hello.htm', 'latihan', config='height=300,width=300')">Klik ini kalau mau pop up-nya keluar lagi :D</A> </body> </html>

Klik ini kalau mau pop up-nya keluar lagi :D (Di sini saya memanggil "javascript:void(0)", yang artinya sama saja dengan tidak memanggil apa-apa) Sekarang kita bahas satu-persatu perintah java script di atas. Perintah window.open() berguna untuk membuka window baru. Anda sudah melihat contohnya tadi. Sedang atribut (atau apapun namanya) yang berada dalam kurung terdiri dari: ('alamat url', 'nama window yang baru dibuka', config='parameter') Jadi script kita di atas memanggil file "contoh_java_5a.html" dan memberi nama window baru tersebut dengan nama "latihan". mmm ... kita bisa memberi nama apapun, persis dengan memberi nama hewan kesayangan kita. Tentu saat ingin memanggil, kita harus memanggilnya dengan nama yang sesuai. Sedang parameter yang dikonfigurasi bisa terdiri dari tinggi (height) dan lebar (width) window yang akan dibuka. Di atas kita menentukan tinggi 300 pixel dan lebar juga 300 pixel. Ada beberapa parameter lain yang dapat diatur, antara lain: toolbar="yes" atau "no", berguna untuk menentukan ada tidaknya toolbar (menu di atas, yang isinya BACK, FORWARD, STOP, RELOAD, dll).

menubar="yes" atau "no", berguna untuk menentukan ada tidaknya menubar (menu di atas juga, yang isinya FILE, EDIT, VIEW, GO, dll). scrollbars="yes" atau "no", menentukan ada tidaknya scrollbars. Scrollbars tuh yang bisa digeret untuk ngeliat bagian bawah atau atas dokumen, kayak di sebelah kanan ini. --> resizable="yes" atau "no", untuk menentukan apakah window yang dibuat bisa diubah ukurannya atau tidak, dengan cara menggeret pinggirannya. location="yes" atau "no", untuk menentukan ada tidaknya location bar di window yang baru dibuka. Location bar tuh ... tempat kita nulis alamat url di atas. directories="yes" atau "no", menentukan ada tidaknya directory bar. Directory ada di juga yang isinya bookmark, dll. status="yes" atau "no", untuk menentukan ada tidaknya status bar di bawah, pada window yang baru dibuat.

5.

for.htm

<html></head>

<body>

<b>Kita cuman menghitung dari 1 sampai 7:</b><br>

<script language="JavaScript">

for (i=1; i<=7; i=i+1)

document.write("Ini angka " + i + "<BR>");

</SCRIPT>

Udah.

</body>

</html>

6.

Object navigator object_property.htm

<html>

</head>

<body>

<b>Kita cuman menghitung dari 1 sampai 7:</b><br>

<SCRIPT LANGUAGE="javascript">

var an = navigator.appName;

var av = navigator.appVersion;

var acn = navigator.appCodeName;

var ua = navigator.userAgent;

document.write("Anda menggunakan browser <B>" +an+ "</B>, versi " +av+ ". Kode namanya " +acn+ ", dan header yang dikirim " +ua+ "." ); </SCRIPT>

</body>

</html>

Anda dapat melihat di atas bahwa di sini property navigator.appName akan memberikan hasil Microsoft Internet Explorer (nama browser), navigator.appVersion memberikan hasil 4.0 (compatible; MSIE 6.0; Windows NT 5.0; YComp 5.0.0.0) yaitu versi browser yang dipakai dan platformnya. Kemudian navigator.appCodeName memberikan hasil Mozilla yaitu kode name yang diberikan untuk browser. Dan

terakhir navigator.userAgent memberikan hasil Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; YComp 5.0.0.0) yaitu http header yang dikirim browser.