Tutorial Javascript

1

1

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

Pengantar Javascript

2

Perkembangan lebih lanjut menuntut adanya teknologi yang memungkinkan halaman web yang interaktif dan lebih hidup(dinamis). Beberapa contoh berikut ini tidak dapat diwujudkandengan hanya mengandalkan bahasa HTML :

Menampilkan animasi teks dan grafik.Melakukan proses perhitungan.Membuat aplikasi yang membutuhkan banyak interaksidengan pengunjung (misalnya kalkulator atau permainan kartu).

Maka lahirlah beberapa bahasa pemrograman untuk memenuhikebutuhan pengembangan aplikasi web yang tidak mampu dilakukanoleh HTML, antara lain adalah Javascript. Kita dapat membuathalaman-halaman web yang interaktif / dinamis dengan bantuanJavascript.

2

3

Penulisan instruksi, function dan variabel dalamJavaScript : Case Sensitive (membedakan hurufkapital dan huruf kecil).

Bagian program JavaScript dalam HTML ditandaidengan tag sbb :

<SCRIPT LANGUAGE = JavaScript>

..

..

..

</SCRIPT>

4

o 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 */

3

5

o 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>)

6

o Aturan penulisan variabelDiawali dengan huruf atau tanda garisbawah ( _ )

Tidak boleh mengandung spasi

Tidak boleh berupa reserved wordJavaScript

4

7

o Beberapa operator JavaScriptOperator aritmatik : + - / * % ++ --Operator pemberian nilai : =Operator pembanding : == != > < >= <=Operator logika : && || !

Operator penggabungan string : +

8

User Interface Object (1)

PROMPT

Metode prompt digunakan untuk menampilkan kotakdialog isian (input box). Contoh :

T = prompt ( Masukkan sebuah teks : , ) ;

5

9

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

SEGITIGA.HTM

10

Tampilan Output :Sisi =Luas bujursangkar =

BUJURSANGKAR.HTM

Tampilan Input :Masukkan nilai sisi :

Tampilan Output :Panjang =Lebar =Luas persegipanjang =

PERSEGI.HTM

Tampilan Input :Masukkan nilai panjang :Masukkan nilai lebar :

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.

http://www.daneprairie.com

1

1

Latihan 1

MENULUAS.HTM

Luas Segitiga link ke segitiga.htmLuas Bujursangkar link ke bujursangkar.htmLuas Persegipanjang link ke persegi.htm

TARGET : frame sebelah kanan

2

LUAS.HTM (FRAMESET)

MENULUAS.HTM

2

3

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 CMInput : Angka dalam MILOutput : Angka dalam METER & CM

Program KONVERSI2.HTM akan mengkonversikan angka dalam satuan CM menjadi MIL dan YARDInput : Angka dalam CMOutput : Angka dalam MIL & YARD

Latihan 2

4

Simpan FRAMESET di atas dengan nama file : XMAIN.HTMKeterangan link XMENU.HTM :

IdPembuat : link ke XPEMBUAT.HTMKonversi MIL : link ke KONVERSI1.HTMKonversi CM : link ke KONVERSI2.HTMFrame TARGET : seluruhnya ke FRAME BAGIAN TENGAH

1

1

Teknik Looping

for (counter_awal ; counter_akhir ; step){

// bagian program yang diulang}

Contoh :

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

2

while (kondisi / syarat loop){

// bagian program yang diulang}

Contoh : i = 1;while (i <= 10) {

document.writeln (i) ;i = i + 1;

}

2

3

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 whileOutput : 100 105 110 150 (nama file : while-2.htm)Output : 500 490 480 300 (nama file : while-3.htm)

4

CONFIRMMetode 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 nilaiTRUE. Sebaliknya jika user memilih tombol Cancel, makavariabel T akan berisi nilai FALSE.

User Interface Object (2)

3

5

SOAL LATIHAN LOOPING (III)

Buat program SUHU.HTM untuk menghitung konversi suhudalam FAHRENHEIT menjadi CELCIUSRumus : C = 5/9 (F - 32)

6

SOAL LATIHAN LOOPING (IV)

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

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

4

7

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 ;}

8

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>

5

9

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;}

10

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>

6

11

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;

}

12

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>

7

13

SOAL LATIHAN PENCABANGAN (I)

Input : Harga Satuan, Banyak (gunakan metoda prompt)Output : Bonus, Total, PPH, Jumlah Bayar.Ketentuan :

BonusBanyak

Dinner setdi atas 50

Payung51 50

Gantungan kunci11 50

Gelas mug0 10

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

14

SOAL LATIHAN PENCABANGAN (II)

Tunjangan Keluarga hanya diberikan kepada karyawan yang telahmenikah (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

2500009500002000000C

1750007500001800000B

1000006000001500000A

Tunj.AnakTunj.KeluargaGaji PokokGolongan

Input : Golongan, Status [S/M], Jumlah AnakOutput : Gaji Pokok, Tunjangan Keluarga, Tunjangan Anak, Gaji TotalKetentuan :

1

1

Function parseFloat & parseInt

parseFloat : Mengkonversi data teks menjadi bilangan real

parseInt : Mengkonversi data teks menjadi bilangan integer

2

LATIH-FORM1.HTM

Input : Nomor BonNama BarangHarga SatuanJumlah Unit

Output : Harga TotalPPNJumlah Bayar

Ketentuan : Harga Total = Harga Satuan x Jumlah UnitJika Harga Total di atas Rp. 25000 dikenai PPN 10% dari Harga TotalJumlah Bayar = Harga Total + PPN

2

3

LATIH-FORM2.HTM

Input : NPMNilai 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 = D55 AA < 70 NA = C70 AA < 85 NA = B85 AA 100 NA = A

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 Textbox

Combobox Button [+,-,x,:]

Ketentuan :

Textbox yg kiri & tengah adalah untuk meng-input angka

Tombol button [ = ] berfungsi meng-eksekusi perhitungan

Textbox kanan untuk menampilkan output hasil perhitungan

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>

VALIDASI7.HTM

Buatlah program kalkulator sederhana dg Javascript sbb :

Textbox Textbox Textbox

Combobox Button [+,-,x,:]

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.

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">



</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">



</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'>

<!--

return false

}

</script>

</head>

<body>

<h1>Daftar Isi</h1>

<a href="" onclick="return buka('topik1.html')">Memasukan JavaScript ke dalam HTML</a><hr>

<a href="" onclick="return buka('topik2.html')">Variabel dan Literal</a><hr>

<a href="" onclick="return buka('topik3.html')">Ekspresi dan Operator</a><hr>

<a href="" onclick="return buka('topik4.html')">Struktur Kendali dan Fungsi</a><hr>

<a href="" onclick="return buka('topik5.html')">Dasar dari Objek</a><hr>

<a href="" onclick="return buka('topik6.html')">Objek dan Fungsi built-in</a><hr>

<a href="" onclick="return buka('topik7.html')">Objek netscape</a><hr>

<a href="" onclick="return buka('topik8.html')">Objek form</a><hr>

<a href="" onclick="return 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 [email protected] - 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.

Tutorial Javascript

Documents

Transcript of Tutorial Javascript