20120511 Javascript

13

TENTANG JAVASCRIPT

13.1 Tujuan Instruksional

1. Pembaca mengetahui sejarah Javascript.

2. Pembaca mengetahui penulisan Javascript.

3. Pembaca mengetahui struktur Javascript.

13.2 Pendahuluan

JavaScript dikembangkan oleh Netscape Com- munications dan Sun Microsystems tahun 1995. JavaScript adalah bahasa pemrograman script untuk web bersifat open source dan open architecture yang diletakkan dan berjalan pada komputer klien. Sedangkan JavaScript yang di server disebut LiveWire. Perbedaan yang tampak adalah JavaScript klien diletakkan pada bagian HTML dan JavaScript server terletak pada bagian file executable yang berisi kode-kode byte.

Bentuk JavaScript mirip dengan Java, namun keduanya berbeda jauh. Java adalah bahasa pemrograman kompiler dan JavaScript adalah skrip interpreter yang diletakkan pada bagian skrip HTML. Awalnya Java- Script hanya dapat berjalan di Nescape, namun seiring perkembangannya browser Internet Explore pun dapat

Tentang JavaScript 11

menerima JavaScript. Microsoft juga menciptakan skrip yang dapat berjalan di browser Internet Explore yang bernama Jscript. Namun keduanya sedikit berbeda sehingga tidak dapat saling berkolaborasi.

Kelebihan JavaScript adalah �

Bersifat open source dan open architecture.

JavaScript adalah bahasa hibrid yaitu gabungan antara Java sebagai bahasa pemrograman dan HTML sebagai bahasa kode.

JavaScript adalah bahasa yang mudah, cepat, dan ukurannya kecil.

13.3 Penulisan Javascript

Untuk belajar JavaScript hanya diperlukan teks editor dan web browser. Teks editor dapat menggunakan notepad, word, editplus dan lainnya. Web browser dapat menggunakan Nescape atau IE. Program JavaS- cript diletakkan pada bagian skrip HTML dengan diawali <script language=”JavaScript”>. Untuk komentar dalam skrip JavaScript menggunakan tanda // atau /* dan */. JavaScript bersifat case sensitive artinya penulisan huruf besar dan huruf kecil dibedakan. Misal penulisan DOCUMENT berbeda dengan document. Beri- kut contoh penggunaan komentar JavaScript.<script language=”JavaScript”>

// program JavaScript tulis disini

/* program selanjutnya tulis disini */


</script>


atau<script type=”text/javaScript”>

// program JavaScript tulis disini

/* program selanutnya tulis disini */

</SCRIPT>

kemudian, penulisan JavaScript tidak perlu diakhiri tanda apapun. Namun bila anda menulis beberapa pernyataan dalam satu baris harus diakhiri dengan tanda ; lebih jelasnya lihat contoh berikut �<HTML>

<HEAD><TITLE> contoh JavaScript</TITLE></HEAD>

</BODY>

<script language=”JavaScript”>

document.write(“Selamat Belajar”,”<br>”)

document.write(“JavaScript”)

</script>

</BODY>

</HTML>

Kedua program diatas strukturnya berbeda dimana contoh pertama, beberapa pernyataan ditulis satu baris dan diakhiri tanda ; sedangkan contoh kedua setiap pernyataan tidak diakhiri tanda ;. Terlihat juga bahwa perintah JavaScript terletak di dalam skrip HTML yang diawali dengan <script language=”JavaScript”> dan diakhiri </script.


Gambar 13.1 Hasil dari Javascript dengan HTML


13.4 Struktur Javascript

Perintah JavaScript dapat ditulis dalam dokumen HTML atau pada file terpisah, yang nantinya dipanggil dengan perintah srcyang dijelaskan pada bab tersendiri. Berikut ini contoh JavaScript dalam dokumen HTML.<HTML>

<HEAD><TITLE> contoh JavaScript</TITLE></HEAD>

</BODY>


document.write(“Program JavaSript-ku yang pertama”)

</script>

</BODY>

</HTML>

Pada contoh diatas perintah JavaScript diletakkan pada bagian <body>. Pada pola kedua perintah Java- Script dapat diletakkan pada bagian <head> biasanya berupa fungsi. Semua definisi ditulis dan dipanggil pada bagian <head>, contoh di bawah menjelaskan. Hasil- nya sama.<HTML>

<HEAD>

<TITLE> contoh JavaScript</TITLE>


document.write(“ Program JavaSript-ku yang pertama”)

</script>

</HEAD>

<BODY>

</BODY>

</HTML>


Gambar 13.2 Hasil dari Javascript tanpa HTML

Perintah JavaScript dapat terpisah dari dokumen HTML dengan menggunakan atribut src. Sintaknya sebagai berikut � <script src=http://nama_file_javascript.j s> <script>

Kemudian file tersebut di simpan dengan ekstensi

.js, cara ini cukup efektif untuk mengamankan script Ja- vaScript yang anda buat. Kelebihan lainnya adalah anda dapat memanggil file tersebut secara berulang-ulang selama dibutuhkan. Sehingga dapat menghemat baris program. Contoh di bawah menjelaskan.<HTML>

<HEAD><TITLE> contoh JavaScript</TITLE>

<script src=”http://hal_pertama.js”></script>

</HEAD>

<BODY>

<h4>Haloo apa kabar ?</h4>

</BODY>

</HTML>

Pada buku ini penulis menggunakan editor Edit- Plus 2. Software ini mendukung dalam penulisan script berbasis web. Berikut tampilan utama dari EditPlus 2.

http://nama_file_javascript.js/


Gambar 13.3 Tampilan utama EditPlus2

oo000oo

14

VARIABEL& KONSTANTA


1. Pembaca mampu membuat variabel padaJavascript.

2. Pembaca mampu mendeklarasikan variabel.

3. Pembaca mampu membuat konstanta.

14.2 Aturan Menciptakan Variabel

Dalam membuat program pasti tidak lepas dari variabel. Variabel berfungsi untuk menampung suatu nilai yang dapat berubah-ubah isinya. Setiap bahasa pemrograman mempunyai aturan dalam menciptakan variabel, pada JavaScript aturan membuat variabel adalah �

1. Harus diawali dengan huruf atau garis bawah.

2. Tidak boleh diawali dengan angka atau simbol.

3. Tidak boleh mengandung spasi.

4. Bersifat case sensitive artinya huruf besar dan kecil dibedakan.

5. Tidak boleh menggunakan reserved word JavaS- cript.

11 Pemrograman WEB

dengan HTML, XHTML, CSS, JavaScript

Berikut ini contoh menciptakan variabel yang benar �

nama_pasien

nip2

_jmlbayar

Kemudian contoh variabel yang salah adalah �

&no mhs

@#alam a t

12345

ko ta.

14.3 Mendeklarasikan Variabel

Sintak menciptakan variabel adalah �var namavariabel = nilainya

Contoh �var nm_pegawai = “haryanto”

var jml_bayar = 150000

var ip_sem = 2.89

var laki_laki = true

var perempuan = false

var kota = null

Untuk mendeklarasikan beberapa variabel dalam satu baris, cukup dipisahkan dengan tanda , (koma). Contoh �var v_kode, jml_bayar, v_nama, v_total

14.4 Mendeklarasikan Konstanta

Konstanta atau disebut juga literal adalah suatu nilai yang bersifat tetap dan tidak dapat berubah-ubah. Contoh �Jml_bayar = hg_satuan * 5

mailto:@#alamat

Nilai 5 dalam rumus diatas adalah konstanta/ literal yang akan digunakan selama program aktif. Jenis konstanta ada 4 yaitu �

1. Konstanta integer, adalah bilangan bulat tanpa desimal/ pecahan. Contoh � 50, 3, 1500 atau 450.

2. Konstanta floating point adalah bilangan pecahan atau bilangan pangkat. Pada JavaScript penulisan pangkat menggunakan E atau e. Contoh � 3.14,10E3, -5E.

3. Konstanta string, adalah karakter yang mengandung huruf angka atau simbol-simbol. Konstanta string harus diawali dan diakhiri tanda “ “. Contoh � “Tjahjo”, “Candra”.

4. Konstanta boolean, adalah konstanta yang hanya memiliki dua buah nilai yaitu “true” atau “false”.

oo000oo

Variabel & Konstanta 11

TIPE DATA 1515.1 Tujuan Instruksional

1. Pembaca dapat menggunakan tipe-tipe data dalam

Javscript.

2. Pembaca mampu mendeklarasikan variabel dengan tipe data yang sesuai.

3. Pembaca mampu menggunakan karakter khusus pada tipe data dalam variabel.

15.2 Tipe String/ Karakter

Adalah tipe data yang bernilai huruf, katak, kalimat atau simbol. Angka juga termasuk tipe data string jika tidak digunakan untuk operasi perhitungan. Harus diapit dengan tanda kutip ganda “ “ atau tunggal ‘‘. Namun bila ada string angka gunakan tanda kutiptunggal. Bila data mengandung tanda ‘ maka harus diapit tanda kutip ganda. Contoh � var nama = “hari maryanto” var tgl_lahir = ’28 oktober 1999’ var x = “do’a” var y = “#$%^” var = “don’t forget me, please”

1 Pemrograman WEB


JavaScript juga mendukung beberapa karakter khusus yang dinamankan escape sequence, yaitu �

\b menyatakan backspace

\f menyatakan form feed

\n menyatakan karakter baris baru

\r menyatakan carriage return

\t menyatakan karakter tab.

15.3 Tipe Numerik

Adalah tipe data yang bernilai angka atau bilangan yang digunakan untuk operasi perhitungan. Contoh� var jml_beli = 12500 var nilai = 79

var ip_sem = 3.01

15.4 Tipe Boolean

Adalah tipe data yang mempunyai nilai true dan false. Biasanya digunakan untuk pengecekan kondisi. Contoh � var hasil = nilai_ujian > 40

15.5 Tipe Null

Data yang tidak dikenal atau boleh kosong. Dapat juga dikatakan NULL. NULL tidak sama dengan NOL. Dalam mendeklarasikan variabel disarankan untuk menghindari data bertipe NULL. Karena akan membin- gungkan pada saat pelacakan kesalahan program.

oo000o

1 Pemrograman WEB


o

16

OPERATOR& EKSPRESI


1. Pembaca mengenal berbagai operator padaJavascrip

t.

2. Pembaca mampu menggunakan operator sesuai dengan permasalahannya.

16.2 Pendahuluan

Operator adalah perintah untuk melakukan sesuatu terhadap nilai atau variabel dan memberikan hasil. Seperti penambahan, pengurangan, pembanding terhadap dua nilai dan lainnya. JavaScript mempunyai enam operator yaitu �

1. Operator Aritmatika.

2. Operator Pembanding.

3. Operator Logika.

4. Operator Penugasan.

5. Operator String.

6. Ekspresi.

Operator & Ekspresi 1

16.3 Operator Aritmatika

Digunakan pada data bertipe numerik. Ada dua macam operator numerik yaitu operator unary dan operator binary. Perbedaannya terletak pada jumlah nilai yang dioperasikan, pada operator unary nilai yang digunakan bersifat tunggal dan operator binary nilai yang digunakan lebih dari satu. Contoh nilai binary � B * 4 = X. Penjelasannya adalah �

B dan 4 adalah nilai

X adalah hasil

* adalah operator perkalian

Contoh nilai unary � hasil++. Daftar operator aritmatik lihat pada tabel 14.1.

Tabel 16.1 Daftar operator aritmatika

Operator Jenis Keterangan

* Binary Perkalian

/ Binary Pembagian

+ Binary Penjumlahan

- Binary Pengurangan

% Binary Pembagian sisa/ modulus

- Unary Negasi

++ Unary Penambahan satu

-- Unary Pengurangan satu

Jenis binary tidak dibahas lebih jauh karena operator ini sering digunakan oleh pembaca. Berikut ini contoh penggunaan operator jenis binary dengan program JavaScript dan hasilnya.


<HTML>

<HEAD><TITLE> Contoh Penggunaan Operator Binary</TI- TLE></HEAD>

<BODY>


document.write(“12 * 4 = “ + (12*4) + “<br>”)

document.write(“12 / 4 = “ + (12/4) + “<br>”)

document.write(“12 + 4 = “ + (12+4) + “<br>”)

document.write(“12 - 4 = “ + (12-4) + “<br>”)

document.write(“12 % 5 = “ + (12%5) + “<br>”)

</script>

</BODY>

</HTML>

Gambar 16.1 Hasil operator aritmatika jenis binary

Berikut ini contoh penggunaan operator jenis unary dengan program JavaScript dan hasilnya.<HTML>

<HEAD><TITLE> Contoh Penggunaan Operator Unary</TI- TLE></HEAD>

<BODY>


hasil=1

document.write(“hasil pertama = “ + (hasil++) + “<br>”)

document.write(“hasil kedua = “ + (hasil++) + “<br>”)

document.write(“hasil ketiga = “ + (hasil++) + “<br>”)

document.write(“hasil keempat = “ + (hasil+


+) +


“<br>”)

document.write(“hasil kelima = “ + (hasil++) + “<br>”)

</script>

</BODY>

</HTML>

Gambar 16.2 Hasil operator aritmatika jenis unary ++

<HTML>

<HEAD><TITLE>Contoh Penggunaan Operator Unary</TI- TLE></HEAD>

<BODY>


hasil=2

document.write(“hasil berikutnya = “ + (hasil--) + “<br>”)





</script>

</BODY>

</HTML>


Gambar 16.3 Hasil operator aritmatika jenis unary --

<HTML>

<HEAD><TITLE>Contoh Penggunaan Operator Unary</TI- TLE></HEAD>

<BODY>


hasil=2

document.write(“nilai semula = “ + (hasil) + “<br>”)

document.write(“nilai negasinya = “ + (-hasil) + “<br>”)

</script>

</BODY>

</HTML>

Gambar 16.4 Hasil operator aritmatika jenis unary -

16.4 Operator Penugasan

Disebut juga operator pemberi nilai. Digunakan jika ingin memberikan nilai ke suatu nilai atau merubah nilai nilai. Semua operator dalam tabel 14.2 dapat digunakan untuk data bertipe numerik. Untuk tipe data


string hanya dapat menggunakan operator = dan + =. Operator penugasan pada dasarnya adalah singkatan dari operator binary.

Contoh �Hasil = hasil + jml

artinya sama dengan

hasil += jml

Tabel 16.2 Daftar operator penugasan

Operator Contoh Ekuivalen Keterangan

= 2 = 2 - Sama dengan

+= 2 += 2 4 = 2 + 2 Ditambah dengan

-= 2 -= 2 0 = 2 - 2 Dikurangi dengan

*= 2 *= 2 4 = 2 * 2 Dikalikan dengan

%= 2 %= 2 0 = 2 % 2 Modulus dengan

/= 2 /= 2 1 = 2 / 2 Dibagi dengan

&= 2 &= 2 2 = 2 & 2 Bit AND dengan

|= 2 |= 2 2 = 2 | 2 Bit OR dengan

Berikut contoh penggunaan operator penugasan

dengan program JavaScript.<HTML>

<HEAD><TITLE>Contoh Penggunaan Operator Penegasan</ TITLE></HEAD>

<BODY>


x = 9; y = 5;

document.write(“nilai awal x = 9 dan y = 5”,”<br><br>”)

x = 9; y = 5;

document.write(“hasilnya x += y adalah “ + (x += y) + “<br>”)


x = 9; y = 5;

document.write(“hasilnya x -= y adalah “ + (x -= y) + “<br>”)

x = 9; y = 5;

document.write(“hasilnya x *= y adalah “ + (x *= y) + “<br>”)

x = 9; y = 5;

document.write(“hasilnya x /= y adalah “ + (x /= y) + “<br>”)

x = 9; y = 5;

document.write(“hasilnya x %= y adalah “ + (x %= y) + “<br>”)

x = 9; y = 5;

document.write(“hasilnya x &= y adalah “ + (x &= y) + “<br>”)

x = 9; y = 5;

document.write(“hasilnya x |= y adalah “ + (x |= y) + “<br>”)

</script>

</BODY>

</HTML>

Gambar 16.5 Hasil operator penugasan dengan nilai awal

Pada baris program diatas, timbul pertanyaan

‘mengapa setiap baris program diberi nilai awal pada variabelnya secara berulang-ulang?’. Anda akan menemukan jawabannya setelah mempelajari program bawah dengan cara menelusuri satu per satu setiap operator


dan nilai variabel pada baris programnya.

Operator & Ekspresi 1 1

<HTML>

<HEAD><TITLE>Contoh Penggunaan Operator Penegasan</ TITLE></HEAD>

<BODY>


x = 9; y = 5;

document.write(“nilai awal x = 9 dan y = 5”,”<br><br>”)

document.write(“hasilnya x += y adalah “ + (x += y) + “<br>”)

document.write(“hasilnya x -= y adalah “ + (x -= y) + “<br>”)

document.write(“hasilnya x *= y adalah “ + (x *= y) + “<br>”)

document.write(“hasilnya x /= y adalah “ + (x /= y) + “<br>”)

document.write(“hasilnya x %= y adalah “ + (x %= y) + “<br>”)

document.write(“hasilnya x &= y adalah “ + (x &= y) + “<br>”)

document.write(“hasilnya x |= y adalah “ + (x |= y) + “<br>”)

</script>

</BODY>

</HTML>

Gambar 16.6 Hasil operator penugasan tanpa nilai awal

16.5 Operator Pembanding

Adalah operator yang digunakan untuk membandingkan dua buah nilai/ nilai yang hasilnya bertipe

1 0 Pemrograman WEB

boolean yaitu true atau false. Nilai yang dibandingkan dapat bertipe string atau numerik.

Tabel 16.3 Daftar operator pembanding

Operator Keterangan

= = Sama dengan!= Tidak sama dengan> Lebih besar< Lebih kecil

>= Lebih besar atau sama dengan<= Lebih kecil atau sama dengan

Berikut ini implementasi operator pembanding dengan program JavaScript. Hasil dari oprasinya akan bernilai true atau false.<HTML>

<HEAD><TITLE>Contoh Penggunaan Operator Pembanding</ TITLE></HEAD>

<BODY>


document.write(“Hasil dari 10 = = 10 adalah “+(10 == 10)+”<br>”)

document.write(“Hasil dari 10 != 10 adalah “+(10 != 10)+”<br>”)

document.write(“Hasil dari 10 >= 11 adalah “+(10 >= 11)+”<br>”)

document.write(“Hasil dari 10 <= 6 adalah “+(10 <= 6)+”<br>”)

document.write(“Hasil dari 10 > 5 adalah “+(10 > 5)+”<br>”)

document.write(“Hasil dari 10 < 55 adalah “+(10 < 55)+”<br>”)

</script>

</BODY>

</HTML>


Gambar 16.7 Hasil dari operator pembanding

16.6 Operator Logika

Digunakan untuk membandingkan dua buah nilai yang hasilnya bernilai true atau false. Perbedaan dengan operator pembanding, adalah bila operator logika membandingkan hasil perbandingan dari proses kedua nilai dan hasilnya dibandingkan secara logika. Contoh �

(2000 > 1500) || (2000 !+ 1500)

Dari contoh diatas dapat diuraikan salah satu nilai yang dibandingkan harus sesuai dengan kriteria atau salah satu dari perbandingan di atas harus bernilai true. Artinya 2000 lebih besar dari 1500 ATAU 2000 tidak sama dengan 1500 maka hasilnya bernilai TRUE. Sebagai pe- doman tentang operator logika dapat dilihat pada tabel di bawah.

Tabel 16.4 Panduan operator OR

Kondisi 1 Kondisi 2 Hasil

False

False

False

False

True True

True False

True

True True True


Tabel 16.5 Panduan operator AND

Kondisi 1 Kondisi 2 Hasil

False

True False

True False

False

True True True

Tabel 16.6 Panduan operator NOT

Kondisi Hasil

NOT False True

NOT True False

Berikut ini daftar operator logika pada JavaScript

dan implementasi operator logika dengan contoh program JavaScript.

Tabel 16.7 Daftar operator logika

Operator Arti Keterangan

&& ANDKedua nilai yang dibandingkan ha-rus memenuhi syarat.

|| ORSalah satu nilai yang dibandingkanharus memenuhi syarat.

! NOTNilai yang dibandingkan merupak-an kebalikannya.<HTML>

<HEAD><TITLE>Contoh Penggunaan Operator Logika</TI- TLE></HEAD>

<BODY>


document.write(“10 > 20 AND 12 > 12 hasilnya “+((10>20)&&(12>12))+”<br>”)

document.write(“10 < 10 AND 12 < 12 hasilnya “+((10<10)&&(12<12))+”<br>”)

document.write(“11 > 10 AND 9 < 10 hasilnya “+((11>10)&&(9< 10))+”<br>”)


document.write(“”,”<hr>”)

document.write(“10 > 20 OR 12 > 12 hasilnya “+((10>20)||(12>12))+”<br>”)

document.write(“10 < 10 OR 12 = = 12 hasilnya “+((10<10)||(12==12))+”<br>”)

document.write(“11 > 10 OR 9 = = 10 hasilnya “+((11>10)||(9==10))+”<br>”)

document.write(“11 > 10 OR 9 < 10 hasilnya “+((11>10)||(9<10))+”<br>”)

document.write(“”,”<hr>”)

document.write(“10 TIDAK = 10 hasilnya adalah “+(!(10==10))+”<br>”)

document.write(“10 TIDAK = 9 hasilnya adalah “+(!(10==9))+””)

</script>

</BODY>

</HTML>

Gambar 16.8 Hasil operator logika

16.7 Operator String

Adalah operator yang digunakanuntuk memproses atau

menggabungkan nilai string. Beberapa aturan yang perlu diingat adalah �

1. String tidak dapat dibandingkan.

2. JavaScript akan merubah string berisi angka menjadi numerik, sehingga dapat


dibandingkan. Contoh


� “250” >= “300”. Maka hasilnya berubah menjadi250 >= 300, sehingga hasilnya adalah true.

3. String berisi angka dan huruf tidak akan berubah.

Contoh � ”bond007” maka hasilnya tetap“bond007”.

Tabel 16.8 Daftar operator string

Operator Arti

= = Membandingkan string> Lebih besar dari< Lebih kecil dari+ Penjumlahan

+= Penjumlahan berganda

Berikut ini contoh penggunaan operator string

dengan JavaScript dan hasilnya.<HTML>

<HEAD><TITLE>Contoh Penggunaan Operator String</TI- TLE></HEAD>

<BODY>


document.write(“Lulus = Tidak ? adalah:”+(“lulus” ==

“tidak”)+”<br>”)

document.write(“1 > 2 ? hasilnya adalah “+(“1” > “2”)+”<br>”)

document.write(“1 < 10 ? hasilnya adalah “+(“1” < “10”)+”<br>”)

kata1=”belajar”

kata2=”bersama”

hasil=kata1+kata2

document.write(“kata pertama : belajar”,”<br>”)


document.write(“kata kedua : bersama”,”<br>”)

document.write(“setelah di tambah hasilnya :


“+hasil+”<br>”)

document.write(“hasil += adalah “+(kata1+=”bersam a”)+”<br>”)

</script>

</BODY></HTML>

Gambar 16.9 Hasil operator string

16.8 Ekspresi

Adalah kumpulan beberapa nilai dan operator yang digunakan untuk melakukan perhitungan atau penugasan. JavaScript mengenal bentuk ekspresi khusus yaitu ekspresi kondisional, merupakan ekspresi yang nilainya bergantung pada kondisi tertentu. Sintaknya �

(kondisi) ? nilai1 : nilai2.

Misal x = 9 >= 3 ? “true” : “false”;. Pada ekspresi ini bila kondisi benar akan mengembalikan nilai 1. Sebaliknya jika kondisi salah akan mengembalikan nilai 2. Jadi pada contoh tersebut jika 9 lebih besar dari3 variabel x akan berisi “true”. Sebaliknya jika 9 lebih kecil sama dengan 3 maka variabel x berisi “false”. Contoh berikut ini menjelaskan penggunaan ekspresi.<HTML>


<HEAD><TITLE>Contoh Penggunaan Ekspresi</TITLE></ HEAD>


<BODY>


var a = 9

var x = (a >= 3) ? “anda benar” : “anda salah”

document.write(“apakah 9 >= 3 ? jawab : “+ x +”<br>”)

var a = 9

var x = (a <= 3) ? “anda benar” : “anda salah”

document.write(“apakah 9 <= 3 ? jawab : “+ x +””)

</script>

</BODY>

</HTML>

Gambar 16.10 Hasil dari ekspresi

16.9 Latihan

Selesaikan dengan JavaScript dan amati hasilnya.

1. Apakah karakter G lebih kecil dari L ?.

2. Diketahui data A=”Belajar”, B=”jam 16.00” dan C=”bersama”, D=”javascript” dan E=”Rudi” . Gabung- lah data-data tersebut sehingga menjadi sebuah kalimat ?.

3. Apakah setiap data pada soal No. 2 dapat dibandingkan ? . Mengapa demikian ?.

4. Berapakah hasil dari perhitungan berikut� Hasil = A

– B * C / D + E. Dimana A=5, B=2, C=6, D=2


dan E=3.


Gunakan operator aritmatika yang tersedia pada Ja- vaScript.

oo000oo

STATEMENT 1717.1 Tujuan Instruksional

1. Pembaca dapat memahami statement pencabangan dan perulangan.

2. Pembaca dapat membuat sebuah fungsi atau script yang melibatkan perulangan dan pencabangan.

3. Pembaca dapat membuat script validasi data dengan pencabangan.

17.2 Pendahuluan

Statement adalah pernyataan yang menjelaskan tentang alur/ jalannya program. Statement ada dua yaitu

perulangandan pencabangan.Perulangan digunakan untuk mengulang

suatu proses beberapa kali sesuai kondisi yang diminta. Pencabangan digunakan untuk melakukan sebuah atau beberapa validasi data sesuai data yang diinginkan. Pada JavaScript tersedia pencabangan IF….ELSE, IF….ELSE IF, SWITCH. Untuk perulangan ada FOR, FOR….IN, WHILE, DO….WHILE. Berikut ini penjelasan pencabangan dan perulangan yang ada pada JavaScript.

Statement 1 1

17.3 Statement IF…..ELSE

Digunakan untuk menguji sebuah kondisi, jika benar akan dikerjakan pernyataan berikutnya, namun jika salah akan dikerjakan pernyataan yang lain. Sin- taknya �if (kondisi)

{

//pernyataan yang dieksekusi jika kondisi terpenuhi

}

else

{

//pernyataan yang dieksekusi jika kondisi tidak terpenuhi

Untuk implementasi dari statement if…..else dengan JavaScript dapat dilihat pada kedua program di bawah. Perlu diperhatikan jika pernyataan lebih dari satu maka diakhiri dengan tanda ; dan diapit tanda { dan}. Namun bila pernyataan hanya satu maka tidak perlu menggunakan tanda { dan }.<HTML>

<HEAD><TITLE>Contoh Statement IF.....ELSE</TITLE></ HEAD>

<BODY>


lulus=84

if (lulus>=70)

{

document.write(“anda lulus, dapat hadiah mobil”,”<br>”);

document.write(“silahkan ambil gratis”)

}

else

{

Statement 1 1

1 0 Pemrograman WEB

document.write(“anda dapat hadiah sepeda motor”,”<br>”);

document.write(“silahkan ambil dengan bawa identitas”)

}

</script>

</BODY>

</HTML>

Gambar 17.1 Hasil pencabangan IF….ELSE

17.4 Statement IF…..ELSE IF

Pernyataan yang kondisinya lebih dari satu. Perha- tikan contoh berikut �<HTML>

<HEAD><TITLE>Contoh Statement IF.....ELSE IF</TITLE></ HEAD>

<BODY>


lulus=51

if (lulus>=90)

document.write(“anda lulus, dapat hadiah mobil”,””)

else if (lulus>=50)

document.write(“maaf, anda lulus dengan syarat”,””)

else

document.write(“anda tidak lulus”,””)

</script>

</BODY>

</HTML>

Statement 1

Gambar 17.2 Hasil pencabangan IF….ELSE IF

17.5 Statement SWITCH

Mulai dikenalkan pada JavaScript 1.2, dan digunakan untuk menangani pencabangan majemuk. Atau untuk menyederhanakan pencabangan yang menggunakan if…..else if terlalu banyak. Berikut contohnya.<HTML>

<HEAD><TITLE></TITLE></HEAD>

<BODY>


x = 2

if (x == 1)

document.write(“Menikah”,””)

else if (x == 2)

document.write(“Belum Menikah”,””)

else if (x == 3)

document.write(“Duda”,””)

else if (x == 4)

document.write(“Janda”,””)

</script>

</BODY>

</HTML>

Kasus program diatas dapat diatasi dengan menggunakan statement Switch, sehingga dari segi baris program lebih ringkas. Program di atas dapat

Statement 1

dimodifikasi dengan menggunakan statement Switch, seperti program di bawah. Klausa break digunakan untuk mengakhiri suatu pilihan/ kondisi. Klausa default digunakan untuk memproses pernyataan jika sudah tidak ada lagi yang harus dieksekusi.<HTML>

<HEAD><TITLE>Contoh Statement SWITCH</TITLE></HEAD>

<BODY>


x = 2

switch (x)

{

case 1: document.write(“Menikah”,””);break;

case 2: document.write(“Belum Menikah”,””);break;

case 3: document.write(“Duda”,””);break;

case 4: document.write(“Janda”,””)

}

</script>

</BODY>

</HTML>

Gambar 17.3 Hasil pencabangan SWITCH

17.6 Statement FOR

Digunakanuntuk mengulang suatuproses dengan kondisi yang

sudah ditentukan. Pernyataan for hampir sama dengan while. Perbedaannya jika for menyertakan kondisi awal dan akhir serta besarnya kenaikan suatu nilai. Berikut

Statement 1

sintaknya �

Statement 1

For (kondisi_awal; kondisi_akhir; besaran)

{

// pernyataan yang akan diulang

}

Berikut ini contoh program tentang statement

for pada JavaScript dan hasilnya.<HTML>

<HEAD><TITLE>Contoh Statement FOr</TITLE></HEAD>

<BODY>


for (nilai = 1; nilai <= 8; nilai +=2)

{

document.write(“Nilai sekarang adalah : “+nilai+”<br>”)

}

</script>

</BODY>

</HTML>

Gambar 17.4 Hasil perulangan FOR

Penjelasan dari program diatas yaitu nilai awal =

1 dan nilai akhir = 8, dengan kenaikan sejumlah 2. Maka setiap kenaikan dihitung 1+2, 3+2, 5+2. Selama nilai masih diantara 1 – 8 maka proses akan terus berlangsung, sampai batas akhir terpenuhi. Contoh lain dari penggunaan for

Statement 1

seperti pada program dibawah ini, yaitu dengan kenaikan nilai sebesar 1.

Statement 1

<HTML>

<HEAD><TITLE>Contoh Statement FOr</TITLE></HEAD>

<BODY>


for (ang = 1; ang <= 10; ang +=1)

{

document.write(“Nilai angsuran kedit motor ke : “+ang+”<br>”)

}

</script>

</BODY>

</HTML>

Gambar 17.5 Hasil perulangan FOR

Statement for tersarang adalah pernyataan for dalam pernyataan for lain, disebut juga for nested atau for bertingkat. Berikut ini contohnya �<HTML>

<HEAD><TITLE>Contoh Penggunaan Statement FOr</TITLE></ HEAD>

<BODY>


for(x = 1; x <= 5; x++)

for (y = 1000; y <= 1000; y++)

{

document.write(“Angsuran ke “+x+” Dibayar Rp. “+y+”<br>”)

}

Statement 1

</script>

</BODY>

</HTML>

Gambar 17.6 Hasil FOR Nested

Setiap kali pernyataan for terluar dikerjakan maka variabel x akan dikerjakan sebanyak 5 kali. Setiap proses mengerjakan akan dicetak nilai x dan y.

17.7 Statement FOR…..IN

Pernyataan for………in digunakan untuk proses mengulang anggota suatu obyek. Sintanya sebagai berikut �

For (counter IN nama_obyek)

Pernyataan akan akan di loop

Keterangan :

Counter � jumlah counter/ properti dalam obyek

Nama_obyek� obyek yang akan di loop

Pernyataan � pernyataan yang akan dijalankan selama loop

Contoh potongan programnya adalah sebagai berikut �kendaraan.jenis = ”mobil”

Statement 1

kendaraan.merek = ”honda”

Statement 1

kendaraan.tipe = ”jazz”

for (counter in kendaraan)

(kendaraan += mobil(counter)+” “)

Penjelasan program di atas yaitu obyeknya kendaraan, propertinya adalah jenis, merek

dan tipe. Dan setiap properti memiliki indek yang dimulai dari 0.

Jadi obyek kendaraan diatas memiliki counter berikut �Kendaraan[0] = kendaraan.jenis

Kendaraan[1] = kendaraan.merek

Kendaraan[2] = kendaraan.tipe

Untuk program lengkap dan hasilnya akan dibahas secara rinci pada bab XVIII tentang obyek.

17.8 Statement WHILE

Digunakan untuk melakukan atau menjalankan suatu pernyataan berulang-ulang selama kondisi benar. Bila kondisi sudah tidak terpenuhi atau salah maka perulangan akan dihentikan. Sintaknya sebagai berikut �

While (kondisi)

(

// pernyataan yang akan dieksekusi

)

Contoh program berikut ini menjelaskan penggunaan statement while. Dan badingkan dengan program dibawahnya yang menggunakan statement for. Hasilnya sama namun perhatikan peletakan kondisinya yang berbeda.<HTML>

<HEAD><TITLE>Contoh Penggunaan Statement WHILE</TI-

Statement 1

TLE></HEAD>

Statement 1

<BODY>


var nilai = 1

while (nilai < 10)

{

document.write(“Nilainya sekarang : “+nilai+”<Br>”)

nilai += 1

}

</script>

</BODY>

</HTML>

<HTML >

<HEAD><TITLE>Contoh Penggunaan Statement WHILE</TI- TLE></HEAD>

<BODY>


for (nilai=1; nilai < 10; nilai+=1)

{

document.write(“Nilainya sekarang : “+nilai+”<Br>”)

}

</script>

</BODY>

</HTML>

Gambar 17.7 Hasil perulangan WHILE

Statement 1

Statement while juga dapat ditulis secara bertingkat atau nested. Contoh programnya sebagai berikut�<HTML>

<HEAD><TITLE>Contoh Penggunaan Statement WHILE</TI- TLE></HEAD>

<BODY>


x = 1

while (x < 4)

{

y = 1

while (y < 2)

document.writeln(“ “+x+” “+ y++ +”<br>”)

x++

}

</script>

</BODY>

</HTML>

Gambar 17.8 Contoh perulangan WHILE nested untuk matrik

17.9 Statement DO…..WHILE

Statement ini mulai diperkenalkan pada JavaScript

2.1 fungsinya hampir sama dengan statement while. Perbedaannya terletak pada pengujian kondisi pada akhir kalang. Perlu diperhatikan bahwa pernyataan dalam kalang do…..while selalu dieksekusi paling tidak satu kali (meskipun kondisi tidak terpenuhi). Sebaliknya

Statement 1 1

pernyataan dalam kalang while mungkin tidak pernah eksekusi (meskipun kondisi tidak terpenuhi). Berikut ini contoh penggunaan statement do…..while.<HTML>

<HEAD><TITLE></TITLE></HEAD>

<BODY>


x = 1

do

{

y = 1

do

{

document.writeln(“ “+x+” “+ y++ +”<br>”)

}

while (y < 3)

x++

}

while (x < 4)

</script></BODY></HTML>

Gambar 17.9 Hasil perulangan DO…WHILE

17.10 Statement BREAK dan CONTINUE

Dalam keadaan tertentu kadanganda menginginkan proses

perulangan berhenti ditengah jalan. Untuk keadaan yang demikian digunakan

Statement 1 1

1 0 Pemrograman WEB

JavaScript menyediakan statement break. Statement break dan continue dapat digunakan pada for atau while. Statement continue digunakan untuk mengembalikan

proses perulangan yang berhenti karena statement break. Berikut contoh program untuk statement break.<HTML>

<HEAD><TITLE>Contoh Statement BREAK dan CONTINUE</TI- TLE></HEAD>

<BODY>


var nilai = 0

while (nilai >= 0)

{

nilai = nilai + 1

document.write(“Hitungan ke : “+nilai+” <br>”)

if (nilai > 3)

{

break

}

}

document.write(“Hitungan terakhir keluar ....”+”<br>”)

</script>

</BODY>

</HTML>

Gambar 17.10 Hasil statement Break

Statement 1

Dari program diatas dapat dijelaskan sebagai berikut � jika dilihat kalang diatas tidak pernah berakhir karena nilai var nilai >= 0 artinya while akan menghitung terus sampai angka berapapun. Namun karena ada kondisi nilai > 3 dan menjumpai statement break maka proses berhenti pada perulangan terakhir dan keluar dari statement while. Contoh dari penggunaan statement continue sebagai berikut �<HTML>

<HEAD><TITLE>Contoh Statement BREAK dan CONTINUE</TI- TLE></HEAD>

<BODY>


for (i = 0; i < 15; i++)

{

if ((i % 2) != 0)

continue

document.write(“ “+i+”<br>”)

}

</script>

</BODY>

</HTML>

Alur program diatas yaitu kondisi dalam for akan melakukan perulangan sebanyak 15 kali dengan nilai I bertambah 1. Ketika I habis dibagi 2 dan tidak sama dengan nol, maka proses akan melanjutnya pernyataan document.write, karena menjumpai statement continue.

Statement 1

Gambar 17.11 Hasil statement Continue

17.11 Statement WITH

Digunakan untuk memberi tahu obyek yang sedang digunakan. Dan setiap referensi variabel dalam pernyataan berikutnya akan merujuk ke obyek tersebut. Sintak dari statement with sebagai berikut �

With (nama obyek)

{

//berisi pernyataan

}

Semua properti yang ada di dalam with akan merujuk kepada obyek bersangkutan. Sehingga anda tidak perlu menulis obyek dengan lengkap, seperti kendaraan.jenis, kendaraan.tipedansebagainya. Contoh program berikut ini menjelaskan.With (kendaraan)

{

jenis=”mobil”

merek=”honda”

tipe=”jazz”

}

Statement 1

17.12 Latihan

1. Buatlah script perulangan untuk membuat sebuah matrik 3 x 3 dengan menggunakan FOR NESTED.

2. Buatlah script untuk menghitung berapa kali angsuran jika diketahui besarnya pinjaman Rp. 5.000.000 dan setiap angsuran sebesar Rp. 200.000, tampilan yang diinginkan seperti Gambar 17.6

oo000oo

FUNCTION 1818.1 Tujuan Instruksional

1. Pembaca mengetahui manfaat fungsi pada Ja- vaScript.

2. Pembaca dapat membuat fungsi dan fungsi tersarang.

3. Pembaca dapat menggunakan fungsi.

18.2 Fungsi Buatan Sendiri

Fungsi adalah kumpulan kode-kode script yang mempunyai tugas tertentu. Pada JavaScript fungsi ada dua macam yaitu fungsi buatan sendiri dan fungsi bawaan (default). Fungsi disebut juga modul program.

Aturan Membuat Fungsi

Aturan membuat fungsi pada JavaScript yaitu �

1. Diawali kata function. Contoh �

2. Nama harus diikuti tanda ( ). Diusahakan nama fungsi menunjukkan isi dari fungsi. Contoh �Function menyapa()

3. Nama fungsi dapat diikuti parameter dan ditulis

Function 1

dalam tanda ( ). Contoh �Function rumus(x,y)

4. Isi fungsi ditulis dalam tanda kurung kurawal { }.

Contoh �Function gabungan()

{

var kata_1 = “saya bisa”;

var kata_2 = “membuat fungsi”;

var kata_3 = “pada JavaScript”;

var hasil = kata_1 + kata_2 + kata_3

document.write.(hasil)

}

Setiap akhir baris fungsi, untuk memisahkan setiap kelompok script atau baris dipisahkan tanda ; dan pada baris terakhir tidak perlu.

Sintak Dan Penggunaan Fungsi

Function nama_fungsi (parameter){ //pernyataan/ekspresi yang dikerjakan}

Letak fungsi terdapat dalam JavaScript, contoh �<HTML>

<HEAD><TITLE>Contoh Membuat Fungsi</TITLE></HEAD>

<BODY>


function tampil()

{

document.write(“belajar fungsi javascript”)

}

</script>

</BODY>

</HTML>

Fungsi tampil() diatas berisi teks “belajar fungsi JavaScript” yang diletakkan di

Function 1

antara <script

Function 1

language=”JavaScript”> dan </script>. Fungsi dapat dibuat tanpa parameter, seperti contoh diatas.

Parameter Dalam Fungsi

Parameter adalah variabel yang akan di proses oleh pernyataan-pernyataan dalam fungsi. Berikut ini contoh membuat fungsi dengan variabel x dan y dimana sebagai parameternya.<HTML>

<HEAD><TITLE>Contoh Fungsi Dengan Parameter</TITLE></ HEAD>

<BODY>


function hitung(x,y)

{

var hasil = x * y

document.write(“hasil fungsi hitung adalah : “+hasil+” “)

}

</script>

</BODY>

</HTML>

Menggunakan Fungsi

Cara menggunakan fungsi pada JavaScript ada tiga cara yaitu �

1. Fungsi dipanggil dari dalam JavaScript.

2. Fungsi dipanggil dari dalam fungsi itu sendiri, dise- but juga fungsi rekursif.

3. Fungsi dipanggil dari dalam fungsi yang lain.

Berikut ini contoh fungsi yang dipanggil dari dalam JavaScript yaitu, baik dengan parameter maupun tanpa parameter (menggunakan program sebelumnya).

Function 1

Dan fungsi pada JavaScript dapat dipanggil dari bagian

<head> dan bagian <body>.<HTML><HEAD><TITLE>Contoh Membuat Fungsi</TITLE></HEAD><BODY><script language="JavaScript">function tampil() { document.write("belajar fungsi javascript") } tampil()</script></BODY></HTML>

Gambar 18.1 Function dalam <body>.

<HTML><HEAD><TITLE>Contoh Membuat Fungsi</TITLE><script language="JavaScript">function tampil() { document.write("belajar fungsi javascript") } tampil()</script></HEAD><BODY></BODY></HTML>

Gambar 18.2 Function dalam <head>

Dari kedua contoh program diatas terlihat bahwa fungsi dapat diletakkan dan dipanggil pada bagian<head> seperti gambar 16.1 atau diletakkan dan dipanggil pada bagian <body> seperti Gambar 16.2. Hasil- nya akan sama seperti Gambar 16.3.

Function 1

Gambar 18.3 Hasil pemanggilan function

Function 1

Berikut ini contoh fungsi dengan parameter, dimana fungsi terletak pada bagian <head> dan fungsi dipanggil pada bagian <body> seperti gambar 16.4.

<HTML><HEAD><TITLE>Contoh Membuat Fungsi Dengan Parameter</TITLE><script language="JavaScript">function hitung(x,y) { var hasil = x * y document.write("hasil fungsi hitung adalah : "+hasil+" ") }</script></HEAD><BODY><script>

hitung(3,8)</script></BODY></HTML>

Gambar 18.4 Memanggil function pada <body>

18.3 Fungsi Dalam Fungsi

Memanggil fungsi dalam fungsi sering disebut rekursif atau berulang. Agar mudah memahami fungsi rekursif adalah contoh menghitung nilai faktorial yaitu hasil perkalian suatu angka dari 1 sampai angka terakhir. Nilai faktorial dari 0 dan 1 adalah 1. Rumus faktorial adalah x! = x * (x-1)! Artinya faktorial dari x adalah x dikalikan faktorial dari x-1. Contoh �

Nilai faktorial dari 2 � 1 x 2 = 2

Nilai faktorial dari 3 � 1 x 2 x 3 = 6

Nilai faktorial dari 4 � 1 x 2 x 3 x 4 = 24

Implementasi dari rumus rekursif diatas ke JavaScript adalah seperti program dibawah ini. Perlu anda perhatikan bahwa fungsi rekursif diletakkan pada bagian <head> dan dipanggil pada bagian <body>. Dan fungsi

Function 1

rekursif mempunyai parameter bernama x.


<HTML>

<HEAD><TITLE>Contoh Fungsi Memanggil Fungsi</TITLE>


function rekursif(x)

{

if ((x == 0) || (x == 1))

{

return 1

}

else

{

hasil=(x * rekursif(x-1))

return hasil

}

}

</script>

</HEAD>

<BODY>


for (ulangi = 0; ulangi < 5; ulangi++)

{

document.write(“Faktorial: “+ulangi+” : “+rekursif(ulangi)+”<br>”)

}

</script>

</BODY>

</HTML>

Gambar 18.5 Fungsi memanggil fungsi pada faktorial

1 0 Pemrograman WEB

Memanggil Fungsi Dalam Fungsi

Fungsi dapat dipanggil dalam fungsi. Berikut ini contoh programnya �<HTML>

<HEAD><TITLE>Contoh Membuat Fungsi Memanggil Fungsi</ TITLE>


function menyapa()

{

document.write(“selamat deh semoga berhasil”)

}

function membalas()

{

document.write(“saya sedang membuat fungsi dalam fungsi”,”<br>”);

menyapa()

}

membalas()

</script>

</HEAD>

<BODY>

</BODY>

</HTML>

Gambar 18.6 Memanggil fungsi dalam fungsi

18.4 Fungsi Built-In

JavaScript juga menyediakan fungsi built-in yang langsung bisa digunakan, fungsi-fungsi tersebut diantaranya �

Function 1 1

Function 1

FUNGSI parseInt()

Digunakan untuk mengkonversi nilai string menjadi integer/numerik dengan basis tertentu. Contoh �100

(basis 10), 100

(basis 3), 40

(basis 2). Sintaknya sebagai

berikut �

ParseInt(“nilai string”, nilai basis)

Jika parameter nilai basis tidak disebutkan maka otomatis akan dianggap basis 10. Dan bila nilai string tidak dapat di konversi maka fungsi parseInt akan mengembalikan nilai NaN. Berikut ini contoh programnya.

FUNGSI parseFloat()

Digunakan untuk mengkonversi nilai string menjadi nilai floating-point (angka pecahan atau angka ber- pangkat). Sintaknya sebagai berikut �

parseFloat(string)

Fungsi parseFloat mengembalikan angka real hasil pengkonversiannya. Jika nilai string tidak dapat dikonversi maka fungsi akan memberikan nilai NaN. Berikut contoh penggunaan fungsi parseFloat.<HTML>

<HEAD><TITLE>Contoh Fungsi parseInt dan parseFloat</ TITLE></HEAD>

<BODY>


{

document.write(“1000 basis 10 = “+parseInt(“1000”, 10)+”<br>”)


Function 1


document.write(“Hasil dari ‘10’ : “+parseFloat(“1

Function 1

0”)+”<br>”)

document.write(“Hasil dari ‘2 apa ‘ : “+parse- Float(“2 apa”)+” “)

}

</script>

</BODY>

</HTML>

Gambar 18.7 Implementasi fungsi parseFloat dan parseInt

FUNGSI isNaN()

isNaN kepanjangannya adalah is not a number. Digunakan untuk menentukan apakah suatu nilai bertipe numerik atau bukan. Bila nilaid saat diuji bertipe numerik maka menghasilkan nilai false, jika string maka bernilai true. Sintaknya sebagai berikut �

isNaN(nilaid)

Berikut ini contoh programnya.<HTML>

<HEAD><TITLE>Contoh Fungsi isNan</TITLE></HEAD>

<BODY>


{

document.write(“23 adalah angka ? “,isNaN(23),”<br>”)

document.write(“100 adalah angka ? “+isNaN(100)+”<br>”)

document.write(“’kami’ bukan angka ? “+isNaN(‘kami’)+”<br>”)

document.write(“’baca’ bukan angka ? “+isNaN(‘baca’)+”<br>”)

Function 1

}

</script>

</BODY>

Gambar 18.8 Hasil dari fungsi isNaN

FUNGSI eval()

Digunakan untuk mengeksekusi atau menguji suatu nilai aritmatika. Sintaknya adalah �

eval(pernyataan)

Contoh program dan hasilnya sebagai berikut �<HTML>

<HEAD><TITLE>Contoh Fungsi eval</TITLE></HEAD>

<BODY>


var x=prompt(“Maukkan pernyataan aritmatika”,””)

{

document.write(“Hasil dari proses eval() adalah : “+eval(x)+””)

}

</script>

</BODY>

</HTML>

Gambar 18.9 Proses input data pada eval()

Function 1

Gambar 18.10 Hasil fungsi eval()

FUNGSI escape() dan unscape()

Fungsi escape() digunakan untuk menghasilkan kode ASCII. Tujuannya adalah agar string dapat dibaca oleh setiap komputer. Fungsi escape() mengganti semua karakter non-alfanumerik ke bentuk “%xx”, dimana xx adalah nomor karakter ASCII. Sintaknya adalah �

escape(“karakter”)

<HTML>

<HEAD><TITLE>Contoh Fungsi escape dan unescape</TI- TLE></HEAD>

<BODY>


{

document.write(“Kode ASCII ‘%’ yaitu “+escape(“%”)+”<br>”)

document.write(“Kode ASCII ‘(E’ yaitu “+escape(“(E”)+”<br>”)

document.write(“Kode ASCII ‘%3D’ yaitu “+unescape( “%3D”)+”<br>”)

document.write(“Kode ASCII ‘%28E’ yaitu “+unescape(“%28E”)+””)

}

</script>

</BODY>

</HTML>

Fungsi unescape() untuk menghasilkan karakter dari kode ASCII. Sintaknya adalah �

unescape(“%string”)

Function 1

Gambar 18.11 Hasil dari fungsi escape dan Unescape

18.5 Latihan

1. Buatlah skrip untuk menguji perhitungan berikut�

hasil = 3 * 5 / 4 + 2 - 3.

2. Buatlah fungsi untuk menghitung pada soal no. 1, nama variabel ditentukan sendiri dan hasilnya dipanggil pada bagian <body>.

3. Berapakah hasil dari kebalikan nilai berikut ini�

(UE

%6H

=6

%#$

oo000oo

EVENT 1919.1 Tujuan Instruksional

1. Pembaca dapat mengetahui berbagai event dalam

Javascript.

2. Pembaca dapat menggunakan event sesuai fungsinya.

3. Pembaca mampu membuat fungsi yang mengandung event Javascript.

4. Pembaca mampu menciptakan event handler sendiri.

19.2 Daftar Event

Event adalah suatu kejadian atau aksi dari sebuah obyek. Jika sebuah event di proses maka akan menyebab- kan script melakukan aksinya. Beberapa contoh event adalah � memasukkan data pada kotak teks, melakukan penekanan tombol dan memilih teks. Event pada JavaScript bersifat non case sensitive, namun demikian sebaiknya tetap dibiasakan menulis event seperti dalam tabel. Berikut tabel 18 yang memuat beberapa macam event JavaScript.

Event 1

Tabel 19.1 Daftar event pada Javascript

Event KeteranganAbort Terjadi jika user menghentikan

pemuatan citra dengan <img> karena user menekan tombol stop atau klik elemen link.Blur Terjadi jika sebuah elemen form ditinggal fokus masukan karena user menekan tombol atau klik elemen form.change Terjadi jika isi input dari suatu elemen form diubah oleh user.

Click Terjadi jika user menekan sebuah tombol atau link.

dbClick Terjadi jika user menekan ganda sebuah elemen form atau link.

dragdrop Terjadi jika user melakukan drop sebuah obyek ke jendela browser.

error Terjadi jika ada kesalahan saat browser menampilkan dokumen atau citra.keyDown Terjadi jika user menekan tombol keyboard.

keyUp Terjadi jika user melepas tombol keyboard.

keyPress Terjadi jika user menekan tombol keyboard dan menahannya. Event ini akan diproses setelah event KeyDown bila penanganan onKeyDown mengembalikan nilai load Terjadi jika browser selesai menampilkan dokumen.

mouseDown Terjadi bila user menekan tombol mouse.mouseUp Teradi jika user melepas tombol mouse.mouseMove Terjadi jika user menggerakkan kursor mouse.

move Terjadi jika user menggerakkan jendela aau frame.

Event 1

mouseOut Terjadi jika kursor mouse keluar dari area link atau area citra.

mouseOver Terjadi jika kursor mouse berada di atas sebuah link, maka akan muncul keterangan pada status bar.

reset Terjadi jika user menekan tombol reset.select Terjadi jika user memilih sebagian atau se- luruh teks pada elemen form yang berupa textbox.

submit Terjadi jika user menekan tombol submit.unLoad Terjadi jika user keluar dari dokumen aktif.rezise Terjadi bila user atau skrip mengubah ukuran jendela atau frame.

19.3 Event Handler

Event handler artinya menanganikejadian. Maksudnya kode-kode

JavaScript yang akan dijalankan jika event dieksekusi. Sintak dari event handler yaitu �

onNamaEvent = “kode JavaScript”

Keterangan �

− onNamaEvent � jenis event JavaScript yang akan digunakan.

− Kode JavaScript � kode JavaScript yang akan dikerjakan jika event dieksekusi.

Contoh penulisan event handler sebagai

berikut � onBlur=”document.write(‘halo apa kabar’)” onMouseOver=tekan;

onFocus=”document.write(‘sudah bisa kah ja-vascript ?’)”

Event 1 1

yaitu �

Event handler dapat dipanggil dengan dua cara

1. Memanggil melalui fungsi.

2. Memanggil secara langsung.

Memanggil Melalui Fungsi

Memanggil event handler melalui fungsi sintaknya sebagai berikut �

onNamaEvent = “nama_fungsi(parameter)”

Parameter dalam fungsi bersifat opsional artinya harus ditulis jika ada parameternya atau tidak. Berikut ini contoh program dan hasilnya memanggil event handler dari fungsi.<HTML>

<HEAD><TITLE>Contoh Memanggil Event Handler</TITLE></ HEAD>

<BODY>


function tampil()

{

document.write(“SELAMAT ANDA SUDAH BERHASIL”)

}

</script>

<h3>Silahkan tekan tombol link</h3>

<ahref=”http://www. fi refox.com ”onClick=”tampil()”>Klik disini...

</a>

</BODY>

</HTML>

1 0

Gambar 19.1 Hasil script event yang memanggil fungsi

Pemrograman WEB

http://www.firefox.com/

Gambar 19.2 Hasil fungsi yang dipanggil event

Penjelasan program diatas adalah jika link klik disini… ditekan, maka event handler onClick memanggil fungsi tampil() dan akan ditampilkan pada browser.

Memanggil Secara Langsung

Memanggil event handler secara langsung sintaknya adalah �

OnNamaEvent = “kode JavaScript”

Berikut ini contoh program sederhana dan hasilnya memanggil event handler secara langsung.<HTML>

<HEAD><TITLE>Contoh Penggunaan Event Handler</TI- TLE></HEAD>

<BODY>

<h3><center>MEMANGGIL EVENT HANDLER SECARA LANGSUNG</center></h3>

<br>

<a href=”http://www.firefo x.com” onclick=”document. write(‘Haloo ?’)”>

Klik disini donk.....

</a>

<br>

<a href=”http://www.firefox.com” onclick=”document. write(‘Haloo juga’)”>

Klik disini juga.... ya...

</a>

</script>

http://www.firefox.com/

http://www.firefo/

</BODY></HTML>

Gambar 19.3 Contoh memanggil event secara langsung

Gambar 19.4 Hasil setelah event dikerjakan

Jika link pertama di pilih klik disini donk… maka event handler akan menjalankan program dalam document.write seperti gambar 17.3. Bila link kedua di pilih klik disini juga …ya… maka event handler akan menjalankan program dalam document.write.

19.4 Implementasi Event

Event onFocus

Program dibawah inimengimplementasikan

penggunaan event onFocus pada daftar pengunjung. Setiap kali meletakkan kursor mouse pada elemen textbox, maka pada status bar akan ditampilkan sebuah keterangan dari textbox tersebut. Berikut ini contoh program dan hasilnya.

<HTML>

<HEAD><TITLE>Implementasi Event</TITLE></HEAD>

<BODY>

1 Pemrograman WEB

Event 1

<h3><center><u>ISIAN DAFTAR PENGUNJUNG</u></center></h3>

<pre>

<form name=”contoh”>

Nama depan : <input type=textbox name=”Nm_awal”

onFocus=”window.status=’Ketik nama depan anda’ “>

<br>

Nama akhir : <input type=textbox name=”Nm_akhir”

onFocus=”window.status=’Ketik nama akhir anda’ “>

<br>

Alamat asal : <input type=textbox name=”almt”

onFocus=”window.status=’Ketik alamat lengkap’ “>

<br>

Pesannya : <input type=textbox name=”pesan” onFocus=”window.status=’Ketik

pesan anda’ “>

</form>

</BODY>

</HTML>

Gambar 19.5 Hasil event onFocus

Event onClick

Event ini biasanya digunakan untuk melakukan suatu proses pada elemen tombol atau link. Event onClick digunakan untuk elemen reset, submit, button, file. Masih menggunakan contoh program sebelumnya berikut ini program dan hasilnya.<HTML>

<HEAD><TITLE>Implementasi onClick()</TITLE>


Event 1

function kirim()

{

alert(“Aplikasi telah terkirim \n”+ document.contoh.awal.value+”

“+document.contoh.akhir.value)

window.open(“http://www.mozilla.com”)

}

function kembali()

{

alert(“Data isian telah dihapus”)

document.clear()

}

</script></HEAD>

<BODY>

<h3><center><u>ISIAN DAFTAR PENGUNJUNG</u></center></h3>

<form name=”contoh”>

Nama depan : <input type=textbox name=”awal” maxlength=20 size=22

onFocus=”window.status=’Ketik nama depan anda’ “>

<br>

Nama akhir : <input type=textbox name=”akhir” maxlength=20 size=22

onFocus=”window.status=’Ketik nama akhir anda’ “>

<br>

Alamat asal : <input type=textbox name=”almt” maxlength=40 size=42

onFocus=”window.status=’Ketik alamat lengkap’ “>

<br>

Pesannya : <textarea name=”pesan” cols=35 rows=5

onFocus=”window.status=’Ketik pesan anda’ “> </textarea>

<br><br>

<input type=”submit” value=”Kirim.....” onClick=”kirim()”>

<input type=”reset” value=”Kembali” onclick=”kembali()”>

</form>

</BODY>

</HTML>

Event 1

Gambar 19.6 Tampilan jika fungsi kembali() dipanggil

Gambar 19.7 Tampilan jika fungsi kirim() dipanggil

Penjelasan program di atas, yaitu saat tombol kirim diklik maka fungsi kirim() akan dipanggil dan hasilnya seperti gambar 17.7, jika tombol kembali ditekan maka fungsi kembali() akan dipanggil dan hasilnya seperti gambar 17.6.

Event onMouseOver

Penggunaan event onMouseOver dapat dilihat pada potongan program di bawah yang telah dimodifikasi dari program sebelumnya.Pesannya : <textarea name=”pesan” cols=35 rows=5

onFocus=”window.status=’Ketik pesan anda’ “> </textarea>

<br><br>

<input type=”submit” value=”Kirim.....” onClick=”kirim()”>

<input type=”reset” value=”Kembali” onclick=”kembali()”>

</form>

<hr>

<a href=”mailto:[email protected]” subject=”Mohon kirim brosur”

mailto:mailto:[email protected]

Event 1

onMouseOver=”window.status=’Kirim brosur’ “>

email: [email protected]

</a>

</BODY>

</HTML>

Gambar 19.8 Hasil dari event onMouseIver

19.5 Latihan

Desainlah sebuah form isian tentang Pendaftaran Mahasiswa Baru dengan memanfaatkan event handler yang ada pada Javascript maupun event handler buatan sendiri yang dikombinasikan dengan fungsi. Di mana setiap fungsi yang dipanggil mengeksekusi suatu statement. Pada form tersebut harus mengandung Tombol Kirim, Tombol Informasi, Tombol Kembali dan Tombol Login.

oo000oo

mailto:[email protected]

OBJECT 2020.1 Tujuan Instruksional

1. Pembaca mengetahui elemen pembentuk obyek.

2. Pembaca dapat memahami properti dan metode pada obyek.

3. Pembaca dapat mengetahui tahap-tahap menciptakan obyek.

4. Pembaca mampu menciptakan obyek.

20.2 Pendahuluan

JavaScript adalah salah satu bahasa pemrograman yang mendukung OOP (object oriented programming). Konsep obyek sebenarnya adalah perluasan dari tipe data primitif. Dengan obyek anda dapat mengelompokkan atau mengkapsulkan beberapa variabel bersamaan dengan fungsi ke dalam satu kesatuan. Variabel dalam obyek disebut dengan properti dan fungsi dalam obyek disebut dengan metode. JavaScript menggunakan obyek-obyek ini untuk memanipulasi tampilan browser serta untuk melakukan perhitungan yang terdapat pada JavaScript.

Object 1

Properti

Setiap obyek memiliki properti. Properti adalah sifat yang melekat pada obyek. Sebagai contoh �

1. Obyek kendaraan propertinya warna biru, merk honda, jenis mpv, tipe jazz.

2. Obyek textbox propertinya warna putih, bentuk kotak persegi.

Metode

Metode adalah tindakan atau perbuatan yang dilakukan oleh obyek saat dieksekusi. Sebagai contoh �

1. Obyek kendaraan mempunyai metode berputar, maju, mundur dan berhenti.

2. Obyek textbox mempunyai metode menerima, menghapus dan menampilkan teks.

Untuk memudahkan dalam memahami obyek Ja- vaScript, kita ambil contoh obyek sepeda motor. Setiap obyek sepeda motor memiliki properti �

Merek � suzuki, honda, yamaha, kawasaki.

Warna � hitam, biru, merah, kuning.

Tipe � kharisma, shogun, vega, yupiter, supra.

Tahun pembuatan � 2000, 2001, 2002.

Dan setiap sepeda motor memiliki metode �

Object 1

Berjalan � maju, mundur, berputar dan berhenti.

Object 1

Contoh lainnya, obyek manusia. Setiap manusia memiliki properti/ sifat yaitu �

Jenis kelamin � laki-laki.

Warna kulit � hitam, putih, sawo matang, kuning langsat.

Jenis rambut � lurus, keriting, ikal.

Gaya berbicara � lembut, kasar.

Umur manusia � 20 th, 55 th, 40 th.

Setiap obyek orang memiliki metode/ perbuatan/

aksi yaitu �

Berjalan, berbicara, berteriak, bekerja, tidur, makan, minum.

20.3 Mendefinisikan Obyek

Untuk mendefinisikan obyek menggunakan kata function. Sintaknya adalah �Function nama_obyek(properti1,properti2,properti3,…..)

{

this.properti1=properti1;



}

Misal anda ingin mendefinisikan obyek mahasiswa yang terdiri dari properti nama, alamat, jurusan dan ip_kum. Maka untuk mendefinisikan obyek tersebut yaitu �

Object 1 1

function mahasiswa(nama,alamat,jurusan,ip_kum)

{

this.nama=nama;

this.alamat=alamat;

this.jurusan=jurusan;

this.ip_kum=ip_kum;

}

Selanjutnya struktur fungsi diatas disebut dengan konstruktor, karena mengkonstruksikan sebuah obyek dengan function mahasiswa(). Empat pernyataan dalam konstruktor diatas digunakan untuk memberikan nilai ke setiap properti obyek mahasiswa.

This merupakan properti penunjuk ke obyek yang bersangkutan. Properti this diperlukan karena pernyataan diatas hanya berisi definisi obyek. Anda belum menciptakan obyek. Untuk menciptakan obyek digunakan perintah new yang dibahas pada subbab berikut ini.

20.4 Menciptakan Obyek

Setelah obyek didefinisikan langkah berikutnya adalah menciptakan obyek. Untuk membuat obyek sintaknya adalah �

Nama_instance=new nama_obyek(isi_properti)

Contoh menciptakan obyek �Fajar = new mahasiswa(“Fajar”,”Semarang”,”Akuntansi”,”2.67”)

Nanik = new mahasiswa(“Nanik”,”Surabaya”,”Informatik a”,”3.01”)

Dari contoh di atas berdasarkan pada definisi obyek mahasiswa, maka sekarang setiap obyek mahasiswa telah memiliki properti.

1 0 Pemrograman WEB

20.5 Menentukan Isi Obyek

Setelah mendefinisikan dan menciptakan obyek, langkah selanjutnya adalah menentukan isi obyek. Sin- taknya sebagia berikut �

Nama_obyek.properti = isi_properti

atau nama_obyek.[urutan_definisi_obyek] =

isi_properti setiap properti memiliki nomor urut

yang di mulai darinol “0”, berdasarkan urutan saat mendefinisikan. Con-toh�mahasiswa.nama = “Fajar”

mahasiswa.alamat = “ Semarang”

mahasiswa.jurusan = “Auntansi”

mahasiswa.ip_kum = “2.67”

mahasiswa.nama = “Nanik”

mahasiswa.alamat = ”Surabaya”

mahasiswa.jurusan = ”Informatika”

mahasiswa.ip_kum = ”3.01”

Bentuk diatas dapat juga ditulis menggunakan urutan definisi, misalnya sebagai berikut �mahasiswa.[0] = “Fajar”

mahasiswa.[1] = “ Semarang”

mahasiswa.[2] = “Auntansi”

mahasiswa.[3] = “2.67”

mahasiswa.[0] = “Nanik”

mahasiswa.[1] = “ Surabaya”

mahasiswa.[2] = “Informatika”

mahasiswa.[3] = “3.01”

Untuk contoh lengkap program dan hasilnya pada

JavaScript sebagai berikut �

Object 1

<HTML>

<HEAD><TITLE>Contoh Menciptakan Obyek</TITLE></HEAD>

<BODY>


// mendefinisikan obyek mahasiswa


{

this.nama=nama

this.alamat=alamat

this.jurusan=jurusan

this.ip_kum=ip_kum

}

//membuat obyek

fajar = new mahasiswa(“Fajar”,”Semarang”,”Akuntansi”,”2.67”)

nanik = new mahasiswa(“Nanik”,”Surabaya”,”Informatik a”,”3.01”)

//menentukan isi obyek

function tampil(nm_obyek,string)

{

document.write(“<b>”+string+”</b>”+”<br>”)

document.write(“Nama Mhs : “+nm_obyek.nama+”<br>”)

document.write(“Alamat : “+nm_obyek. alamat+”<br>”)

document.write(“Jurusan : “+nm_obyek. jurusan+”<br>”)

document.write(“IP Kum. : “+nm_obyek.ip_kum+”<br><br>”)

}

//menampilkan obyek

tampil(fajar,”Ini obyeknya mahasiswa fajar :”)

tampil(nanik,”Ini obyeknya mahasiswa nanik :”)

</script>

</BODY>

</HTML>

Object 1

Gambar 20.1 Menciptakan obyek pada Javascript

20.6 Statement For…In

Pada Bab 15 telah disinggung tentang statement for…in yaitu digunakan untuk melakukan perulangan berdasarkan properti

obyek. Untuk memperjelas bagaimana menciptakan obyek dan penggunaan for…..in disini akan diberikan contoh program lengkap modifikasi dari program sebelumnya.<HTML>

<HEAD><TITLE>Menciptakan Obyek dan Statement FOR.. IN</TITLE></HEAD>

<BODY>




{

this.nama=nama

this.alamat=alamat


this.ip_kum=ip_kum

}

// membuat obyek

fajar = new mahasiswa(“Fajar”,”Semarang”,”Akuntansi”

Object 1

,”2.67”)

Object 1


// menentukan isi obyek pada for...in

function buat(obyek)

{

for (var x in obyek)

document.write(“ “+obyek[x]+”<br>”)

document.write(“ “+”<br>”)

}

// menampilkan obyek

buat(fajar,”Ini obyeknya mahasiswa fajar :”)

buat(nanik,”Ini obyeknya mahasiswa nanik :”)

</script>

</BODY>

</HTML>

Gambar 20.2 Menciptakan obyek dengan For..In

20.7 Membuat Metode

Sebuah obyek terdiri dari properti dan metode. Pada JavaScript metode didefinisikan sebagai function. Jadi caranya sama dengan membuat fungsi. Sin- tak untuk membuat metode yaitu �

Object 1

Ke t e r angan �

Nama_metode() � nama fungsi yang dijadikan sebuah metode

Nama_obyek() � nama obyek yang mengandung metode terkait.

Properti � nama properti yang mengandung fungsi metode.

Contoh metode adalah �Function metode_mesin(kapasitas)

{

if (kapasitas == “100 cc”)

{

harga = 10500000

}


{

harga = 11500000

{


{

harga == 12250000

}

}

Metode diatas mengandung sebuah fungsi yang akan menentukan kapasitas mesin sepeda motor. Pada saat mendefinisikan obyek, metode tersebut juga harus disertakan sebagai bagian dari propertinya. Perhatikan definisi obyek berikut ini �Function sepeda_motor(merk, tipe, warna,kapasitas)

{

this.merk = merk

Object 1

this.tipe = tipe

this.warna = warna

this.kapasitas = kapasitas

}

Berikut ini contoh dari program sebelumnya yang telah dimodifikasi, dan ada metodenya sehingga obyek mampu melakukan aksi atau perbuatan.<HTML>

<HEAD><TITLE>Menciptakan Obyek dan Statement FOR.. IN</TITLE></HEAD>

<BODY>



function mahasiswa(nama,alamat,jurusan,ip_kum,keterangan)

{

this.nama=nama

this.alamat=alamat


this.ip_kum=ip_kum

this.keterangan=metode_hasil(ip_kum)

}

// membuat obyek

fajar = new mahasiswa(“Fajar”,”Semarang”,”Akuntansi”,”2.67”)


// membuat metode

function metode_hasil(ip_kum)

{

if (ip_kum >= 3.00)

{

var keterangan = “Lulus”

}

if (ip_kum <= 3.00)

{

var keterangan = “Belul Lulus”

}

Object 1

return keterangan

}

// menentukan isi obyek pada for...in

function buat(obyek)

{

for (var x in obyek)

document.write(“ “+obyek[x]+”<br>”)

document.write(“ “+”<br>”)

}

// menampilkan obyek

buat(fajar,”Ini obyeknya mahasiswa fajar :”)

buat(nanik,”Ini obyeknya mahasiswa nanik :”)

</script>

</BODY>

</HTML>

Dari program di atas jika dibandingkan dengan program sebelumnya, maka tampak bahwa obyek yang mengandung metode ternyata mampu melakukan aksi yaitu berupa hasil/ status seorang mahasiswa. Sedang- kan pada obyek sebelumnya hanya mampu mempunyai properti atau sifat dari setiap mahasiswa tersebut. Lihat gambar 20.3 bahwa mahasiswa bisa lulus atau tidak lulus.

Gambar 20.3 Obyek dengan metode

Object 1

20.8 Latihan

Buatlah sebuah obyek tentang penjualan sepeda motor Merek A harga Rp. 11.500.000, Merek B harga Rp.11.800.000 dan Merek C harga 10.750.000 dengan data bebas. Tentukan properti dan metode yang melekat pada obyek tersebut. Serta setiap obyek mempunyai metode, sehingga dapat diperoleh status Diskon dan Ti- dak Diskon. Jika status Diskon mendapat potongan 5% dari harga jual.

oo000oo

OBJECT BUILT-IN 2121.1 Tujuan Instruksional

1. Pembaca mengetahui berbagai fungsi Built-In

Javascript.

2. Pembaca mampu menggunakan fungsi-fungsi

Built-In Javascript.

21.2 Pendahuluan

JavaScript menyediakan obyek bawaan (object built-in) yang langsung dapat digunakan untuk memanipulasi elemen pada JavaScript. Obyek built-in mempunyai banyak properti dan metode yang dapat dilihat pada lampiran. Obyek built-in tersebut adalah �

1. Obyek Array

2. Obyek Boolean

3. Obyek Date

4. Obyek Function

5. Obyek Math

6. Obyek Number

7. Obyek String

Object Built-in 1 1

21.3 Obyek Array

Adalah obyek yang digunakan untuk menangani jenis bilangan array. Kelebihan obyek array adalah mempunyai dimensi satu, dua dan dimensi tiga. Ukuran array JavaScript dapat berubah secara dinamis. Contoh � Mo- tor[3] = “Motor A”

Artinya array motor mempunyai tiga elemen yaitu motor[0], motor[1] dan motor[2]. Namun hanya satu elemen yang sudah ada nilainya, elemen lain masih bernilai NULL. NULL tidak sama dengan nol. NULL artiya bahwa data boleh kosong atau tidak diisi, dan sewaktu-waktu dapat di update untuk diisi data. Elemen array juga dapat diberi nilai pada saat array diciptakan. Contoh �var motor = new array(“”,”CepatMoto”,”HebatMoto”)

Karena array pada JavaScript tidak mendukung tipe data secara eksplisit, maka array juga bisa diciptakan dengan elemen berisi nilai yang berbeda. Contoh �var motor = new array(“Motor A”,”2003”,”hitam”,”100 cc”)

Contoh di atas menciptakan sebuah array dengan empat elemen. Tiga elemen bertipe string. Satu elemen bertipe numerik. Seperti telah disebutkan diatas bahwa array adalah jenis bilangan yang memiliki dimensi satu sampai tiga. Berikut ini penjelasannya �

Array Dimensi Satu

Misal � Motor[0] : CepatMoto

Object Built-in 1 1

1 0 Pemrograman WEB

Motor[0,1] : HebatMoto

Motor[1,0] : AsyikMoto

Array Dimensi Dua

Adalah array yang memiliki baris dan kolom seperti tabel. Penentuan nilai berdasarkan pertemuan baris dan kolom. Lihat tabel 18.1 berikut �

Tabel 21.1 Array berdimensi dua

0 1

0 AsyikMoto CepatMoto

1 MediumMoto HebatMoto

Motor[0,0]: AsyikMoto

Motor[0,1]: CepatMoto

Motor[1,0]: MediumMoto

Motor[1,1]: HebatMoto

Array Dimensi Tiga

Array yang memiliki struktur data seperti kubus. Menentukan nilai berdasarkan pertemuan tiga buah sumbu a, b, dan c. Berikut ini contohnya � Motor[0,0,0]: AsyikMoto

Motor[0,0,1]: CepatMoto

Motor[0,1,0]: MediumMoto

Motor[0,1,1]: HebatMoto

Sintak dari array adalah �Nama_array = new array(panjang_array)

Nama_array = new array(elemen-0,elemen-1,…,elemen-n)

Object Built-in 1

Ke t e r angan �

Nama_array � nama obyek array yang dibuat. Panjang_array � panjang atau besarnya array. Elemen � elemen dari obyek array. Contoh �

Mhs = new array(3)

Mhs = new (“fajar”,”nanik”,”ahmad”)

Metode Obyek Array

Metode yang terdapat pada obyek array seperti yang tercantum pada tabel 18.2.

Tabel 21.2 Daftar Metode Obyek Array

Metode Keterangan

join Menggabungkan elemen array ke dalam sebuah string tunggal.

reverse Membalik elemen array, sehingga elemen pertama menjadi terakhir dan sebaliknya.sort Digunakan untuk mengurutkan elemen array.

concat Digunakan untuk menggabungkan dua array kemudian menghasilkan sebuah array baru.slice (x,[y]) Mengembalikan array baru yang el- emennya sama dengan elemen array tersebut, mulai dari awal sampai akhir.

Berikut contoh-contoh program penggunaan metode obyek array secara lengkap.

Object Built-in 1

<HTML>

<HEAD><TITLE>Contoh Obyek Array</TITLE></HEAD>

<BODY>


//deklarasi nilai awal

mhs = new Array(“fajar”,”nanik”,”ahmad”)

document.write(“<h4>”+”Nilai awal aray”+”</h4>”)

for (i = 0; i < 3; i++)

{

document.write(“Mhs[“+ i +”] = “+mhs[i]+”<br>”)

}

//dengan metode join

document.write(“<br><b>”+”Hasil dari Metode Join”+”</b><br>”)

mhs_baru = mhs.join()

document.write(mhs_baru+”<br>”)

</script>

</BODY>

</HTML>

<HTML>

Gambar 21.1 Hasil Obyek Array Metode Join


<BODY>





for (i = 0; i < 3; i++)

{


}

//dengan metode reverse

document.write(“<br><b>”+”Hasil dari Metode Re- verse”+”</b><br>”)

mhs_baru = mhs.reverse()

for (i = 0; i < 3; i++)

{


}

</script>

</BODY>

</HTML>

<HTML>

Gambar 21.2 Hasil Obyek Array Metode Reverse


<BODY>





for (i = 0; i < 3; i++)

{


}

//dengan metode sort

document.write(“<br><b>”+”Hasil dari Metode Sort”+”</b><br>”)

mhs_baru = mhs.sort()

for (i = 0; i < 3; i++)

{


}

</script>

</BODY>

</HTML>

<HTML>

Gambar 21.3 Hasil Obyek Array Metode Sort


<BODY>


//deklarasi array pertama


//deklarasi array kedua

pegawai = new Array(“rudi”,”andi”,”hasan”)

//dengan metode concat

document.write(“<br><b>”+”Hasil dari Metode Con- cat”+”</b><br>”)

gabungan = pegawai.concat(mhs)

for (x = 0; x < 3; x++)

{

document.write(“gabungan[“+x+”] =

“+gabungan[x]+”<br>”)

}

document.write(“<br>”+gabungan+”<br>”)

</script>

</BODY>

</HTML>

Gambar 21.4 Hasil Array Metode Concat

Jika baris program diatas nama array dibalik maka hasilnya seperti gambar 18.5. Maka dapat disimpulkan bahwa nama array yang disebutkan lebih dulu maka hasilnya akan disebutkan lebih dulu pula.

<HTML>

Gambar 21.5 Hasil Membalik Nama Array

<HEAD><TITLE>Contoh Metode Array</TITLE>


pegawai = new Array(“rudi”,”andi”,”hasan”,”fajar”,”na

nik”,”ahmad”)

for (var i = 0; i < 6; i++)

document.write(“hasilnya : [“+i+”] = “+pegawai[i]+”<br>”)

</script>

</HEAD>

<BODY>


document.write(“<br><b>”+”Hasil dari Metode Slice”+”</b><br>”)

pegawai = pegawai.slice(1,3)

document.write(pegawai+”<br>”)

</script>

</BODY>

</HTML>

Gambar 21.6 Hasil Array Metode Slice

Metode sort dapat digunakan untuk mengurutkan array bertipe string. Kemudian cobalah untuk mengurutkan data numerik berikut � 16, 3, 27, 45, 7. Hasilnya�<HTML>

<HEAD><TITLE>Contoh Metode Array</TITLE>


angka = new Array(16, 3, 27, 45, 7)

document.write(“<b>”+”Data awal adalah :”+”</b><br>”)

for (var i = 0; i < 5; i++)

document.write(“hasilnya : [“+i+”] = “+angka[i]+”<br>”)

</script>

</HEAD>

<BODY>


hasil = angka.sort()

document.write(“<br>”+hasil+”<br>”)

</script>

</BODY>

</HTML>

Gambar 21.7 Hasil Metode Sort Untuk Array Numerik

Ternyata hasilnya tidak diurutkan. Mengapa demikian?, karena JavaScript menganggap semua elemen array bertipe string termasuk angka. Maka untuk mengurutkan data angka dibutuhkan pembanding. Misal x = angka positif dan y = angka negatif, maka y < x demikian sebaliknya. Untuk itu diperlukan sebuah fungsi pembanding. Setelah terbentuk, tahap selanjutnya memanggil Metode Sort dengan memberikan parameter fungsi pembanding tersebut. Berikut contohnya �<HTML>

<HEAD><TITLE>Contoh Metode Array</TITLE></HEAD>

<BODY>


//deklarasi array

angka = new Array(16, 3, 27, 45, 7)

//metode sort

document.write(“<b><br>”+”Hasil setelah diurutkan”+”</

b>”)

hasil = angka.sort()

document.write(“<br>”+hasil+”<br>”)

//buat fungsi pembanding

function urutkan(x,y)

{

return x - y

}

//panggil fungsi pembanding dan metode sort

document.write(“<b><br>”+”Setelah dibandingkan dan urut”+”</b><br>”)

hasil = angka.sort(urutkan)

document.write(hasil+”<br>”)

</script>

</BODY>

</HTML>

Gambar 21.8 Hasil Metode Sort dengan Pembanding

Properti Obyek Array

Ada dua properti untuk obyek array yaitu �

Tabel 21.3 Datar Properti Obyek Array

Properti Keteranganlength Jumlah elemen errayprototype Unhtuk menambah suatu properti ke

obyek array agar nantinya semua properti tersebut dapat digunakan oleh semua obyek

Object Built-in 01

Berikut ini contoh program penggunaan propertilength pada JavaScript.<HTML>


<BODY>


datanya = new Array(“fajar”,”nanik”,”rudi”,”hasan”,”ahmad”)

document.write(“Hasilnya ada : “+datanya.length+” array”)

</script>

</BODY>

</HTML>

Gambar 21.9 Contoh Penggunaan Properti Obyek Array

Array dua dimensi merupakan array yang terdiri dari baris dan kolom. Misal array satu dimensi adalah �

X = new Array(3)

Artinya parameter 3 menunjukkan bahwa ukuran array adalah 3 elemen. Sedangkan untuk membuat array dua dimensi setiap elemen array diisi penunjuk ke array baru. Misal �

X[0] = new Array(3)

X[1] = new Array(3)

X[2] = new Array(3)

X[3] = new Array(3)

Dengan pernyataan di atas sekarang

Object Built-in 01

mempunyaiarray berukuran 3 x 3. Untuk mengakses setiap array digunakan penulisan seperti berikut �

Object Built-in 01

<HTML>

<HEAD><TITLE>Contoh Array Dua Dimensi</TITLE></HEAD>

<BODY>


var baris = window.prompt(“Ketikkan jumlah baris : “,”0”)

var kolom = window.prompt(“Ketikkan jumlah kolom : “,”0”)

//menentukan array i x j

hasil = new Array(baris)

for (i = 0; i <= baris; i++)

{

hasil [i]= new Array(kolom)

for (j = 0; j <= kolom; j++)

{

hasil[i][j] = “ “+ i +” “,” “+ j +” “

}

}

document.write(“<b>”+”Hasil Array Dua Dimensi”+”</b><br>”)

//tampilkan hasil array

for (i = 0; i < baris; i++)

{

var akhir = “Baris “+ i +” = “

for (j = 0; j < kolom; j++)

{

akhir += hasil [i][j]

}

document.write(akhir,”<br>”)

}

</script>

</BODY>

</HTML>

Object Built-in 0

Gambar 21.10 Hasil Array Dua Dimensi

21.4 Obyek Boolean

Digunakan untuk mengubah nilai bukan boolean menjadi nilai boolean. Sintak obyek boolean sebagai berikut �

Nama_boolean = new boolean(nilai)

Ke t e r angan �

Nama_boolean � nama obyek boolean yang akan dibuat.

Nilai � nilai yang akan diubah menjadi boolean.

Contoh �<HTML>

<HEAD><TITLE>Contoh Obyek Boolean</TITLE></HEAD>

<BODY>


x1 = new Boolean(“kabar baik”)

x2 = new Boolean(2300)

x3 = new Boolean(“2300”)

x4 = new Boolean(0)

x5 = new Boolean(null)

x6 = new Boolean(“”)

Object Built-in 0

x7 = new Boolean(false)

x8 = new Boolean(true)

document.write(“<b>”+”Hasil Obyek Boolean”+”</b><br>”)

document.write(“Hasil boolean ‘kabar baik’ : “+ x1 +”<br>”)

document.write(“Hasil boolean 2300 : “+ x2 +”<br>”)

document.write(“Hasil boolean ‘2300’ : “+ x3 +”<br>”)

document.write(“Hasil boolean 0 : “+ x4 +”<br>”)

document.write(“Hasil boolean NULL : “+ x5 +”<br>”)

document.write(“Hasil boolean ‘ ‘ : “+ x6 +”<br>”)

document.write(“Hasil boolean false : “+ x7 +”<br>”)

document.write(“Hasil boolean true : “+ x8)

</script>

</BODY>

</HTML>

Gambar 21.11 Contoh Obyek Boolean

Dari hasil gambar 18.11 menunjukkan bahwa jika diisi parameter dengan nilai 0, null, “ “ atau tanpa parameter maka JavaScript mengganggap false.

Tabel 21.4 Daftar Properti Prototype

Properti Keteranganprototype Untuk menambah suatu properti ke obyek

array agar nantinya semua properti tersebut dapat digunakan oleh semua obyek.

Object Built-in 0

21.5 Obyek Date

Obyek data digunakan untuk memanipulasi tanggal dan jam. Misal, ingin menyimpan informasi yang berbentuk tanggal dan jam. Untuk membuat obyek date pertama harus dibuat obyek date dengan operator new. Berikut sintaknya �

Nama_date = new date(parameter)

Parameter pada obyek date dapat berisi salah satu berikut ini �

1. Jika parameter tidak diisi, maka obyek date menggunakan tanggal dan jam komputer. Misal � tgl_ hasil = new date().

2. Parameter dapat diisi “bulan, tanggal, tahun dan am�menit�detik”. Pada obyek date menentukan bulan dan hari dimulai bulan 0 = januari dan hari 0 = minggu. Misal � tgl_hasil = new date(“January, 24, 1972 14:15:03”).

3. Parameter dapat diisi = (tahun, bulan, tanggal).

Misal � tgl_hasil = new date(72, 1, 24).

4. Parameter dapat diisi = (tahun, bulan, tanggal, jam, menit, detik). Misal � tgl_hasil = new date(72, 1, 24,14, 15, 3).

Pada JavaScript batas minimum tanggal dari obyek date adalah 1 Januari 1970. Untuk contoh program lengkapnya sebagai berikut �</HTML>

</HEAD><BODY>


//menetukan obyek date()

Object Built-in 0

jam_sekarang = new Date()

//menampilkan obyek date()

document.write(“<b>”+”Hasil dari obyek date()”+”</b><br>”)

document.write(“Waktu : “+jam_sekarang+” “)

</script>

</BODY>

</HTML>

Gambar 21.12 Hasil Obyek Data

Metode Obyek Date

Metode pada obyek date dapat dibagi ke dalam empat kategori yaitu �

1. Metode yang berhubungan dengan setting tangal dan waktu. Metodenya diawali dengan set. Misal, getMonth untuk mensetting bulan.

2. Metode yang berhubungan dengan pengambilan tanggal dan waktu. Metodenya diawali dengan get. Misal, getMinutes untuk mengambil menit.

3. Metode yang berhubungan pengambilan tanggal dan waktu ke tipe string. Metodenya diawali dengan to. Contoh, toGTMString mengkonversi tanggal ke tipe string.

4. Metode yang berhubungan dengan penguraian tanggal (parsing). Ada dua teknik parsing yaitu parse dan UTC. Kedua teknik ini bersifat statik artinya bisa

Object Built-in 0

dipanggil langsung. Misal, date.parse(…..) ataudate.UTC(…..).

Berikut ini tabel 18.5 yang memuat daftar metode pada obyek date.

Tabel 21.5 Daftar Metode Pada Obyek Date

Metode KeterangangetDate ( ) Menghasilkan tanggal dalam nilai

integer 1getDay ( ) Menghasilkan hari dalam nilai integer

dari 0getHours ( ) Menghasilkan jam dalam nilai integer

darigetMinutes ( )

Menghasilkan menit dalam nilai integer dari 0 – 59.

getMonth ( ) Menghasilkan bulan dalam nilai integer dari

getSeconds ( )

Menghasilkan detik dalam nilai integer dari

getTimezo- neOffset ( )

Menghasilkan perbedaan antar waktu lokal dengan waktu GMT dalam nilai integer yang mewakili jumlah menit.getYear ( ) Menghasilkan tahun dalam nilai dua digit yang mewakili tahun sebelum 1900.parse (tang-

gal)Menghasilkan jumlah milidetik antara 1Januari 1970 pada jam 00�00�00 dan tanggalyang ditentukan pada tanggal.

setDate (tanggal)

Menset tanggal dlam nilai integer dari 1

setHours (jam)

Menset jam dalam nilai integer dari 0 – 23.

setMinutes (menit)

Menset menit dalam nilai integer dari 0

setMonth (bulan)

Menset bulan dalam nilai integer dari 0

Object Built-in 0

setSeconds (detik)

Menset detik dalam nilai integer dari 0 – 59.

setTime (waktu)

Menset nilai dalam nilai integer yang mewakili umlah milidetik seak 1 Januari 1970 jam 00�00�00.

setYear (tahun)

Menset tanggal dalam nilai integer yang lebih besar dari 1900.

toGMTString ( )

Menghasilkan nilai dalam GMT sebagai string untuk menggunakan aturan di internet. Format � Day, DD Mon YYYY HH�MM�SS GMT.

toLocalString ( )

Menghasilkan nilai dengan waktu lokal dan aturan lokal.

UTC (tahun, bulan, tanggal, jam, menit, detik)

Menghasilkan jumlah milidetik antara 1Januari 1970 pukul 00�00�00 GMT.

get.

Berikut ini contoh program menggunakan metode

<HTML>

<HEAD><TITLE>Contoh Obyek Date</TITLE></HEAD>

<BODY>


tgl_lhr = new Date(“January 1, 2003 13:00:03”)

document.write(“Lahir pada tanggal : “+tgl_lhr+”<br>”)

document.write(“Harinya : “+tgl_lhr.getDay()+” <br>”)

document.write(“Tgl/bln/th : “+tgl_lhr.getDate()+

“-”+tgl_lahir.getMonth()+”-”+tgl_lhr. getYear()+”<br>”) “<br>”

document.write(“Pukul:”+tgl_lhr.getHours()+”:”+tgl_lhr.getMinutes()+

“:”+tgl_lhr.getSeconds())

</script>

</BODY>

</HTML>

Gambar 21.13 Hasil Penggunaan Metode Get Pada Obyek Date


set.<HTML>


<BODY>


tgl_lhr = new Date()

tgl_lhr.setDate(10)

tgl_lhr.setMonth(0)

tgl_lhr.setYear(2003)

tgl_lhr.setHours(13)

tgl_lhr.setMinutes(00)

tgl_lhr.setSeconds(03)

document.write(“Lahir pada tanggal : “+tgl_lhr+”<br>”)

document.write(“Harinya : “+tgl_lhr.getDay()+” <br>”)

document.write(“Tgl/bln/th : “+tgl_lhr.getDate()+

“-”+tgl_lhr.getMonth()+”-”+tgl_lhr. getYear()+”<br>”)

“<br>”

document.write(“Pukul : “+tgl_lhr.getHours()+”:”+tgl_lhr.getMinutes()+

“:”+tgl_lhr.getSeconds())

</script>

</BODY>

</HTML>

Gambar 21.14 Hasil Penggunaan Metode Set Pada Obyek Get

Berikut ini contoh program lain dengan obyek

date.<HTML>


<BODY>


bulan = new Array(11)

bulan[0] = “Januari”

bulan[1] = “Februari”

bulan[2] = “Maret”

bulan[3] = “April”

bulan[4] = “Mei”

bulan[5] = “Juni”

bulan[6] = “Juli”

bulan[7] = “Agustus”

bulan[8] = “September”

bulan[9] = “Oktober”

bulan[10] = “November”

bulan[11] = “Desember”

var tanggal = new Date()

var tgl = tanggal.getDate()

var bln = bulan[tanggal.getMonth()]

var th = tanggal.getYear()

hr = new Array(6)

hr[0] = “Minggu”

hr[1] = “Senin”

hr[2] = “Selasa”

hr[3] = “Rabu”

Object Built-in 11

hr[4] = “Kamis”

hr[5] = “Jumat”

hr[6] = “Sabtu”

var hari = tanggal.getDate()

var hasil = hr[tanggal.getDay()]

document.write(“Hari ini adalah : “+tgl+”-”+bln+”-”+th+”<br>”)

document.write(“Harinya : “+hasil)

</script>

</BODY>

</HTML>

Gambar 21.15 Contoh Penggunaan Obyek Date

21.6 Obyek Function

Digunakan untuk mengubah program HTML menjadi sebuah fungsi. Sintaknya �nama_fungsi = new function(parameter, “isi fungsi”)

Contoh �biodata = new function(“document.write(‘wahju’)”)

Ataufunction biodata()

{

document.write(“wahju”)

}

Program lengkapnya sebagai berikut �<HTML>

<HEAD><TITLE>Contoh Obyek Function</TITLE>


Object Built-in 11

10 Pemrograman WEB

function biodata1()

{

document.write(“Wahju Tjahjo S”)

}

function biodata2()

{

document.write(“Jl. Wates Km9.7 Jogjakarta”)

}

function biodata3()

{

document.write(“He..hee... Ketemu lagi”)

}

</script>

</HEAD>

<BODY>

<b>Klik tombol yang anda suka</b><br><hr>

<input type=button name=”bio1” value=”Klik disini ok...”

onclick=”biodata1()”>

<input type=button name=”bio2” value=”Klik juga lho...”


<input type=button name=”bio3” value=”Klik saja ya...”


</BODY>

</HTML>

Gambar 21.16 Hasil obyek function

Object Built-in 1

21.7 Obyek Math

Digunakan untuk melakukanperhitungan matematika yang

rumit. Misal logaritma, trigonometri, pembulatan dan lainnya. Sintak obyek math yaitu �

math.[properti|metode(operan)]

Fungsi trigonometri JavaScript mengembalikan sudut dalam satuan radian bukan derajat.

Properti Obyek Math

Tabel 21.6 Daftar properti obyek Math

Properti KeteranganE Nilai konstanta Euler (2.718) digunakan

sebagai dasar logaritma natural.LN10 Nilai logaritma natural dari 10 yaitu 2.302.NIL2 Nilai logaritma natural dari 2 yaitu 0.639.PI Nilai besaran PI, yang digunakan untuk

menghitung lingkaran yaitu 3.14.SQRT1 Nilai akar kuadrat dari setengah yaitu

0.707.SQRT2 Nilai akar kuadrat daru dua yaitu 1.414.

Metode Obyek Math

Tabel 21.7 Daftar obyek Math

Metode Keterangan

abs(x) Mengembalikan nilai absolut dari x.

acos(x) Mengembalikan nilai arc-kosinus dari x dalam radian.

asin(x) Mengembalikan nilai arc-sinus dari x dalam radian.

atan(x) Mengembalikan nilai arc-tangen dari x dalam radian.

Object Built-in 1

atan2(x,y) Mengembalikan nilai arc-tangen dari x dalam radianMengembalikan sudut dalam radian dari sumbu x ke titik (x,y).

ceil(x) Mengembalikan bilangan bulat terdekat yang lebih besar atau sama dengan x.

cos(x) Mengembalikan nilai kosinus dari x dalam radian.

exp(x) Mengembalikan nilai E pangkat x.

floor(x) Mengembalikan bilangan bulat yang kurang dari x atau sama dengan x.

log(x) Mengembalikan nilai logaritma dari x.

max(x,y) Mengembalikan nilai yang lebih besar di antara x dan y.

min(x,y) Mengembalikan nilai yang lebih kecil di antara x dan y.

pow(x,y) Mengembalikan nilai xy.

random() Mengembalikan bilangan real acak antara 0 sampai 1. Metode ini bekerja pada platform UNIX.round(x) Mengembalikan bilangan bulat yang terdekat dengan x.

sin(x) Mengembalikan nilai sinus dari x.

sgrt(x) Mengembalikan akar kuadrat dari x.

tan(x) Mengembalikan tangen dari x.

Contoh program lengkap dari penggunaan properti obyek math adalah �<HTML>

<HEAD><TITLE>Contoh Obyek Math</TITLE></HEAD>

<BODY>


document.write(“Nilai properti E adalah : “+Math. E+”<br>”)

document.write(“Nilai properti LN10 adalah : “+Math. LN10+”<br>”)

document.write(“Nilai properti LN2 adalah : “+Math. LN2+”<br>”)

document.write(“Nilai properti PI adalah : “+Math.

Object Built-in 1

PI+”<br>”)

document.write(“Nilai properti SQRT1 adalah : “+Math. SQRT1+”<br>”)

document.write(“Nilai properti SQRT2 adalah : “+Math. SQRT2+”<br>”)

</script>

</BODY>

</HTML>

Contoh program lengkap dari penggunaan metode obyek math adalah �<HTML>

<HEAD><TITLE>Contoh Obyek Math</TITLE></HEAD>

<BODY>


document.write(“Pembulatan 93.6321 : “+Math. round(93.6321)+”<br>”)

document.write(“Absolut dari -93.6321 : “+Math.abs(-93.6321)+”<br>”)

document.write(“Pembulatan ke atas 93.6321 : “+Math. ceil(93.6321)+”<br>”)

document.write(“Pembulatan ke bawah 93.6321 :

“+Math.floor(93.6321)+”<br>”)

document.write(“Hasil cos(45)+”<br>”)

cos(45) : “+Math.

document.write(“Hasil sin(45)+”<br>”)

sin(45) : “+Math.

document.write(“Hasil tan(45)+”<br>”)

tan(45) : “+Math.

document.write(“Hasil acos(1)+”<br>”)

acos(1) : “+Math.

document.write(“Hasil asin(1)+”<br>”)

asin(1) : “+Math.

document.write(“Hasil atan(2)+”<br>”)

atan(2) : “+Math.

document.write(“Hasil atan2(1,8) : “+Math.atan2(1,8)+”<br>”)

document.write(“Hasil exp(45.12345) : “+Math. exp(45.12345)+”<br>”)

document.write(“Hasil log(10) : “+Math. log(10)+”<br>”)

Object Built-in 1

document.write(“Hasil max(4,5)+”<br>”)

max(4,5) : “+Math.

document.write(“Hasil min(4,5)+”<br>”)

min(4,5) : “+Math.

document.write(“Hasil pow(4,5)+”<br>”)

pow(4,5) : “+Math.

document.write(“Hasil sqrt(45)+”<br>”)

sqrt(45) : “+Math.

document.write(“Hasil random() : “+Math.random())

</script>

</BODY>

</HTML>

21.8 Obyek Number

Digunakan untuk memproses bilangan numerik. Sintaknya �

number.properti

Semua properti milik obyek number bersifat statik, artinya anda tinggal menggunakannya saja. Berikut ini daftar properti milik obyek number.

Tabel 21.8 Daftar properti obyek number

PropertI KeteranganMAX_VALUE Nilai bilangan yang paling besar.MIN_VALUE Nilai bilangan yang paling kecil.NAN Bukan bilangan.POSITIVE_INFINITY Bilangan tak terhingga yang

paling besar.NEGATIVE_INFINITY Bilangan tak terhingga yang

paling kecil.

Berikut contoh program penggunaan properti milik obyek number.<HTML>

<HEAD><TITLE>Contoh Obyek Number</TITLE></HEAD>

<BODY>

Object Built-in 1


document.write(“Bilangan terbesar : “+Number.MAX_ VALUE+”<br>”)

document.write(“Bilangan terkecil : “+Number.MIN_ VALUE+”<br>”)

document.write(“Bukan bilangan : “+Number.NaN+”<br>”)

document.write(“Bilangan tak terhingga terbesar :

“+Number.POSITIVE_INFINITY+”<br>”)

document.write(“Bilangan tak terhingga terkecil :

“+Number.NEGATIVE_INFINITY+”<br>”)

</script>

</BODY>

</HTML>

Gambar 21.17 Contoh penggunaan obyek Number

21.9 Obyek String

Digunakan untuk memproses atau manipulasi terhadap string. Sintaknya �

nama_string = new string(string)

Keterangan �

Nama_string � nama obyek string yang akan dibuat. String � karakter yang akan diubah menjadi

string.

Object Built-in 1

Properti Obyek String

Tabel 21.9 Daftar properti obyek String

Properti Keteranganlength Menghitung jumlah karakter pada suatu

string.Contoh programnya sebagai berikut �<HTML>

<HEAD><TITLE>Contoh Obyek String</TITLE></HEAD>

<BODY>


nama = “wahju tjahjo saputro”

alamat = “jl. wates km 9.7 jogakarta”

document.write(“Jumlah huruf dalam nama : “+nama. length+”<br>”)

document.write(“Jumlah huruf dalam alamat : “+alamat. length+”<br>”)

</script>

</BODY>

</HTML>

Gambar 21.18 Contoh penggunaan obyek string

Metode Obyek String

Metode obyek string dapat dibagi menjadi dua kategori yaitu �

1. Metode yang melakukan pemformatan terhadap string menurut perintah HTML tertentu.

2. Metode yang mengembalikan variasi dari string.

Object Built-in 1

Tabel 21.10 Daftar metode obyek String

Metode Keterangananchor(x) Menghasilkan string yang

menunjukkan bagian dokumen bernama x.big(x) Menghasilkan string dengan huruf besar.blink(x) Menghasilkan string yang berkedip-kedip.bold() Menghasilkan string dengan huruf tebal.charAt(index) Menghasilkan karakter pada lokasi yang ditentukan oleh index.

fixed() Menghasilkan string dengan font FIXED.fontColor(x) Menghasilkan string dengan warna font color x.

fontSize(x) Menghasilkan string dengan ukurn font x.indexOf

(findString, startingIn- dex)

Menghasilkan index dari pemunculan findstring yang pertama, dan memulai pencarian pada posisi starting index.

Italics() Menghasilkan string dengan huruf miring.lastIndexOf

(findString, startingIn- dex)

Menghasilkan index dari pemunculan findstring yang terakhir. Dilakukan dengan mencari mundur dari posisi starting index.

link(href) Menghasilkan string yang menunjuk ke alamat pada href.

small() Menghasilkan string dengan ukuran huruf kecil.

strike() Menghasilkan string dengan huruf dicoret.sub() Menghasilkan string subscript.

substring (firstIndex, lastIndex)

Menghasilkan sebagian string yang dimulai dari karakter firsindex dan diakhiri pada karakter sebelum lastindex.sup() Menghasilkan string superscript.

toLowerCase() Menghasilkan string dengan huruf kecil.toUpperCase() Menghasilkan string dengan huruf besar.

Contoh programnya sebagai berikut �<HTML>

<HEAD><TITLE>Contoh Obyek String</TITLE></HEAD>

Object Built-in 1

<BODY>

<script language=”JavaScript”> contoh

= “belajar javascript”

document.write(“hasil metode anchor :

“+contoh.anchor(“bottom”)+”<br>”)

document.write(“hasil metode small : “+contoh. small()+”<br>”)

document.write(“hasil metode big : “+contoh. big()+”<br>”)

document.write(“hasil metode fixed : “+contoh. fixed()+”<br>”)

document.write(“hasil metode bold : “+contoh. bold()+”<br>”)

document.write(“hasil metode italics : “+contoh. italics()+”<br>”)

document.write(“hasil metode strike : “+contoh. strike()+”<br>”)

document.write(“hasil metode sub : “+contoh. sub()+”<br>”)

document.write(“hasil metode sup : “+contoh. sup()+”<br>”)

document.write(“hasil metode toLowerCase :

“+contoh.toLowerCase()+”<br>”)

document.write(“hasil metode toUpperCase :

“+contoh.toUpperCase()+”<br>”)

document.write(“hasil metode chartAt : “+contoh. charAt(3)+”<br>”)

document.write(“hasil metode substring :

“+contoh.substring(2,7)+”<br>”)

document.write(“hasil metode indexOf :

“+contoh.indexOf(‘r’,2)+”<br>”)

document.write(“hasil metode lastIndexOF :

“+contoh.lastIndexOf(‘r’,2)+”<br>”)

document.write(“hasil metode link : “+contoh. link(“top”))

</script>

</BODY>

</HTML>

Object Built-in 1

Gambar 21.19 Contoh penggunaan metode obyek String

21.10 Obyek Screen

Digunakan untuk menyimpan informasi tentang resolusi tampilan dan jumlah warna tampilan. Semua properti obyek screen bersifat statik. Berikut ini daftar tabel yang memuat properti obyek screen.

Tabel 21.11 Daftar obyek Screen

Properti KeteranganavailHeight Menentukan tinggi layar monitor

dikurangi antar muka user yang bersifat transparan atau semi transparan. Untuk Windows XP/9x tinggi layar dikurangi tinggi taksbar.availWidth Menentukan lebar layar monitor dikurangi antar muka user yang bersifat transparan atau semi transparan. Untuk Windows XP/9x lebar layar dikurangi lebar taksbar.colorDepth Menentukan jumlah warna yang mungkin ditampilkan. Jumlah warna ditentukan dari pallet atau pixeldepth.

height Menentukan tinggi layar.pixelDepth Menentukan jumlah bit per pixel pada

tampilan.width Menentukan lebar layar.

Object Built-in 1

Berikut contohnya �<HTML>

<HEAD><TITLE>Contoh Obyek Screen</TITLE></HEAD>

<BODY>


document.write(“Width : “+screen.width+”<br>”)

document.write(“height : “+screen.height+”<br>”)

document.write(“availheight: availheight+”<br>”)

“+screen.

document.write(“availwidth availwidth+”<br>”)

: “+screen.

document.write(“pixeldepth pixeldepth+”<br>”)

: “+screen.

document.write(“colordepth : “+screen.colordepth)

</script>

</BODY>

</HTML>

Gambar 21.20 Contoh penggunaan obyek Screen

21.11 Latihan

1. Ada 5 buah Merk sepeda motor dengan data seperti tabel di bawah ini

Merk Motor Harga Satuan Kapasitas MesinA 10.500.000 100

B 10.750.000 110

C 11.500.000 110

D 11.750.000 125

E 12.500.000 125

Pemrograman WEB


2. Lengkapi web anda dengan informasi screen yang digunakan, tannggal dan jam sehingga menjadi lebih dinamis.

oo000oo

OBYEK BROWSER 2222.1 Tujuan Instruksional

1. Pembaca dapat mengetahuimanfaatobyek browser.

2. Pembaca mampu menggunakan obyek browser pada desain web.

3. Pembaca mampu melengkapi web dengan memanfaatkan metode dan properti obyek browser.

22.2 Pendahuluan

Obyek JavaScript tidak dapat diturunkan (inheri- tance) seperti pada C++ atau Java, meskipun demikian obyek browser mudah untuk dipahami sebagai struktur hirarki obyek, seperti gambar 22.1.

Gambar 22.1 Hirarki obyek browser

Obyek Browser

Dari gambar 22.1 di atas dapat dikelompokkan dalam dua kategori yaitu �

1. Obyek browser terdiri dari � window, document,

history, location dan navigator.

2. Obyek HTML terdiri dari � semua obyek yang berada dibawah document. Seperti anchor, applet, area, form dan lainnya.

Gambar 22.1 diatas menunjukkan bahwa suatu obyek dibawahnya adalah properti bagi obyek di atas- nya. Misal, obyek document memiliki properti anchor, applet, area. Contoh lain obyek window memiliki properti document, history, location dan navigator. Maka untuk mengakses properti tersebut dapat ditulis �

window.document

window.history

window.location

Pada bab 20 ini yang akan dibahas adalah obyek browser. Sedangkan obyek HTML dibahas pada bab 21. Properti dan metode yang dimiliki oleh obyek window sangat banyak, maka yang dibahas pada bab 20 ini hanya sebagian properti dan beberapa metode saja. Untuk daftar lengkapnya dapat dilihat pada tabel daftar properti dan tabel daftar metode.

22.3 Obyek Window

Adalah obyek yang digunakan untuk memanipulasi jendela browser. Obyek window merupakan obyek yang luas karena dapat menampung teks, gambar, form,

Obyek Browser

frame dan lainnya. Dan merupakan obyek tingkat top level object atau obyek tingkat paling atas.

Properti Obyek Window

Properti yang terdapat pada obyek window adalah �

Tabel 22.1 Daftar properti obyek window

Properti Keterangan

closed Mengecek jendela tertutup atau tidak. Jika tertutup properti closed bernilai true dan jika terbuka properti closed bernilai false.defaultStatus Menunjukkan nilai default yang ditampilkan pada status bar.

Frames

innerHeight Menentukan dimensi vertikal dari area isi jendela.

innerWidth Menentukan dimensi horisontal dari area isi jendela.

length Jumlah frame yang tercantum pada jendela induk.

locationbar Obyek yang memungkinkan bisa menampilkan atau menyembunyikan menubar dari window.menubar Obyek yang memungkinkan menampilkan atau menyembunyikan menubar dari window.name Nama internal yang didefinisikan saat window dibuka dengan metode window. open().

opener Nama window yang memanggil window tersebut. Properti ini hanya akan diisi jika window diciptakan dengan metode open().outerheight Menentukan dimensi vertikal dari bingkai luar jendela.

Obyek Browser

outerWidth Menentukan dimensi horisontal dari luar jendela.

Obyek Browser

pageXOffset Menentukan posisi x dari halaman yang aktif.

pageYOffset Menentukan posisi y dari halaman yang aktif.

parent Jendela induk, jika jendela saat ini merupakan subjendela dalam <frameset>.personalbar Obyek yang memungkinkan ditampilkan atau disembunyikan toolbar directories dari jendela.

scrollbars Obyek yang memungkinkan menampilkan atau menyembunyikan penggulung dari jendela.self Jendela aktif.

status Menampilkan pesan pada status bar.

statusbar Obyek yang memungkinkan menampilkan atau menyembunyikan status dari jendela.toolbar Obyek yang memungkinkan menampilkan atau menyembunyikan toolbar dari jendela.top Jendela paling atas yang memiliki semua frame.

Beberapa properti diatas sengaja tidak disertai contoh programnya, dan anda bisa mencobanya sebagai latihan. Berikut ini contoh penggunaan properti status dan defaultStatus.<HTML>

<HEAD><TITLE>Contoh Obyek Window</TITLE></HEAD>

<BODY>


window.defaultStatus = “belajar obyek window”

</script>

<input type=button name=”tombol” value=”Tombol 1”

onclick=”window.status=’Halloo apa kabar di tombol 1’”>

<input type=button name=”tekan” value=”Tombol 2”

onclick=”window.status=’Halloo apa kabar di tombol 2’”>

Obyek Browser

</BODY>

</HTML>

Jika kursor mouse sedang bebas, maka baris status menampilkan pesan default yang disebutkan pada window.defaultStatus. Jika kursor mouse berada pada sebuah tombol dan melakukan penekanan maka baris status menampilkan pesan yang disebutkan pada window.status. Lihat gambar 20.1.

Gambar 22.2 Properti obyek Window menampilkan status

Metode Obyek Window

Metode yang terdapat pada obyek window adalah �

Tabel 22.2 Dafar metode obyek window

Metode Keteranganalert(“x”) Menampilkan kotak dialog.back() Memuat URL yang merupakan

entri sebelumnya pada daftar history. Memang- gil metode ini sama saja dengan meng- klik tombol back pada toolbar.blur() Menghilangkan fokus masukan dari jendela aktif.

captureevents

(kejadian)Menangkap semua kejadian pada jendela aktif.

clearinterval Mematikan waktu yang telah di set oleh metode setinterval().

cleartimeout

(timeoutid)Membatalkan pengevaluasian waktu yang di set melalui metode settimeout. TimeoutID adalah mengenal yang dikembalikan oleh metode

Obyek Browser

close() Menutup jendela.confirm(“pesan”) Menampilkan kotak dialog berisi

OK dan Cancel. Memberikan nilai true jika pilih OK dan false jika pilih Cancel.disableexternal

capture()Mematikan penangkapan keadian yang diset oleh metode enableexternalcap- ture.

enableexternal

capture()Memungkinkan jendela dengan frame menangkap kejadian pada halaman yang dimuat daris erver lain.find([“string”]

[,truefalse]

[‘truefalse])

Mencari teks yang telah ditentukan pada jendela aktif. Bila parameter kedua bernilai true pencarian bersifat case sensitive. Jika parameter ketiga bernilai true, pencarian dilakukan dari posisi saat ini ke belakang.focus() Memberikan fokus masukan ke jendela.forward() Memuat URL yang merupakan entri berikutnya pada daftar history. Memanggil metode ini sama dengan menekan tombol forward pada toolbar.home() Memuat URL yang merupakan homep- age user di set melalui menu edit | pref- erences. Memanggil metode ini sama dengan menekan tombol home pada toolbar.moveby(horisontal,

vertikal)Menggeser jendela sebanyak horisontal dan vertikal dengan satuan pixel.moveto(x,y) Menggeser jendela ke posisi (x,y), dimana x dan y dalam satuan pixel.open(“url”,”nama”,

[“pil1,

pil2,pil3,…”])

Membuka jendela klien baru yang diberi identitas, kemudian memuat URL yang diberikan.

print() Mencetak isi jendela ke printer. Me- manggil metode ini sama dengan menekan tombol print pada toolbar.prompt(pesan,

[masukandefault])Menampilkan kotakdialog “prompt” yaitu kotak dialog untuk meminta masukan data dari pengguna.

Obyek Browser

releaseevents

(kejadian)Membebaskan penangkapan kejadian.

resizeby(x,y) Mengubah ukuran jendela dengan cara menggerakkan titik kanan bawah dari jendela sejauh x pixel dan y pixel.resizeto(p,q) Mengubah ukuran jendela sehingga ukurannya menjadi p x q.routeevent

(kejadian)Melewatkan kejadian yang ditangkap ke hirarki penangan keadian default.scroll(x,y) Menggulung jendela saat ini ke koordi- nat x, y.

scrollby(x,y) Menggulung jendela sejauh x dan y pixel.

scrollto(x,y) Menggulung jendela sehingga titik x, y menjadi titik kiri atas pada jendela aktif.setinterval

(ekspresi,

milidetik)

Mengevaluasi ekspresi setiap sekian waktu milidetik.

settimeout()

(ekspresi,

milidetik)

Mengevaluasi ekspresi setelah sekian waktu milidetik.

stop() Menghentikan proses download. Me- manggil metode ini sama dengan menekan tombol stop pada toolbar.

Keterangan dari metode open() sebagai berikut � URL � alamat URL file yang diakes.Nama � nama jendela yang buka.

Atribut � atribut-atribut tambahan untuk menetukan jendela yang akan dibuka.

Atribut tersebut adalah �

toolbar=[yes/no] � jendela memiliki toolbar.

location=[yes/no] � jendela memiliki field location.

0 Pemrograman WEB


directories=[yes/no] � jendela mengandung tombol direktori.

status=[yes/no] � jendela mengandung status bar.

menubar=[yes/no] � jendela mengandung menu.

scrollbar=[yes/no] � jendela mengandung baris penggulung.

resizable=[yes/no] � jendela bisa diubah ukurannya.

width=pixels � lebar jendela dalam pixel.height=pixels � tinggi jendela dalam pixel.

Tidak semua metode pada buku ini diberikan contoh program, mengingat banyak sekali metode yang dimiliki obyek window. Anda dapat mencobanya sebagai latihan. Berikut ini contoh penggunaan metode alert().

<HTML>


<BODY>


function tampil()

{

window.alert(“Selamat belajar javascript”)

}

</script>

<input type=button name=”contoh” value=”Tekan disini”

onclick=”tampil()”)

</BODY>

</HTML>

Gambar 22.3 Contoh penggunaan metode alert

Berikut ini contoh penggunaan metode con-

firm().

<HTML>


<BODY>


function coba(ambil)

{

if (window.confirm(“Apakah anda yakin ?”) == true)

{

document.write(“ “+ambil+” “)

}

else

{

return false

}

}

</script>

<form onSubmit=”coba(this.teks.value)”>

<input type=text name=”teks”>

<input type=submit name=”contoh” value=”Tekan disini”>

</BODY>

</HTML>

Gambar 22.4 Contoh penggunaan Metode Confirm

Obyek Browser 1

Obyek Browser

Gambar 22.5 Hasil setelah tombol “Tekan Disini” ditekan

Jika tombol OK di klik maka tulisan dalam textbox akan ditampilkan. Jika pilih tombol Cancel maka isi dari textbox akan dihilangkan. Berikut ini contoh program menggunakan metode prompt().<HTML>


<BODY>


var dataku = prompt(“Silahkan tulis nama anda.”+””)

document.write(“ “+dataku+” “+”selamat belajar javascript”)

</script>

</BODY>

</HTML>

Gambar 22.6 Penggunaan metode prompt

Jika prompt pada gambar 20.5 diisi data, dan ditekan OK, maka hasilnya akan digabung dengan teks yang telah ditulis dalam program. Berikut ini contoh metode prompt yag lain.

Obyek Browser

<HTML>


<BODY>


var soal = “Siapakah Presiden Indonesia Pertama ?”

var jawab = “Soekarno”

var benar = “Anda benaaarr !!”

var salah = “Silahkan pilih : Phone a friend; 50 : 50; audience ?”

var hasil = prompt(“soal”,” “)

if (hasil == jawab)

{

document.write(benar)

}

else

{

document.write(salah)

}

</script>

</BODY>

</HTML>


close() dan open().<HTML>


<BODY>


function buka_pertama()

{

window.open()

}

function tutup()

{

window.close()

}

Obyek Browser

</script>

<input type=button value=”Warung Makan Citra Murah”

onclick=”buka_pertama()”>

<input type=button value=”Tutup” onclick=”tutup()”>

</BODY>

</HTML>

Berikut program menggunakan metode set- Timeout() dan clearTimeout().<HTML>

<HEAD><TITLE>Contoh Obyek Window</TITLE>


function selesai()

{

window.alert(“Kamu kok tidak tekan tombol, melamun ya ?”)

}

function tekan()

{

window.alert(“Selamat anda berhasil”)

}

</script>

</HEAD>

<BODY onLoad=”batasnya=setTimeout(‘selesai()’,2000)”>

<center><h4>Tekan tombol atau tunggu 2 detik</h4></center>

<hr>

<input type=button value=”Silahkan di tekan”

onclick=”clearTimeout(selesai); tekan()”>

</BODY>

</HTML>

Obyek Browser

Gambar 22.7 Contoh penggunaan setTimeout() dan

clearTimeout()

Penjelasan dari program diatas yaitu jika selama

2000 milidetik/2 detik tombol tidak ditekan maka muncul pesan seperti gambar 20.6. Jika tombol di tekan sebelum 2 detik fungsi maka fungsi tekan akan dikerjakan dan fungsi selesai akan dibatalkan oleh metode clearTimeout().

Event Handler Obyek Window

Event handler adalah kode JavaScript yang akan dijalankan jika anda membuka dokumen HTML. Letak penulisan event handler pada bagian <body>. Sekilas event handler ini telah digunakan pada contoh program sebelumnya. Lihat kembali program dari gambar 20.6. Event handler pada obyek window cukup banyak, namun disini hanya diberikan beberapa contoh saja. Event handler yang lain dapat anda coba sebagai latihan.<HTML>


<BODY onLoad=”alert(‘Apa kabar ?. Baik-baik saja ?.’)”;

Obyek Browser

onUnload=”alert(‘Selesai’)”>

<h3><center>PT. KARYA CITRA SEJAHTERA</center></h3>

<hr>

Obyek Browser

</BODY>

</HTML>

Berikut ini daftar penanganan kejadian pada obyek window.

Tabel 22.3 Daftar event pada obyek window

Kejadian KeteranganonBlur Menangani kejadian yang

membangkitkan bila jendela kehilangan fokus.onDragdrop Menangani kejadian yang dibangkitkan bila pengguna men-drop sesuatu ke jendela aktif.onError Menangani kejadian yang dibangkitkan bila terjadi kesalahan saat memuat dokumen atau citra.onFocus Menangani kejadian yang dibangkitkan bila jendela menerima fokus .

onLoad Menangani kejadian yang dibangkitkan setelah browser selesai memuat dokumen.onMove Menangani kejadian yang dibangkitkan bila pengguna mengubah letak jendela aktif.onResize Menangani kejadian yang dibangkitkan bila pengguna mengubah ukuran jendela aktif.onUnload Menangani kejadian yang dibangkitkan saat user keluar dari dokumen aktif.

22.4 Obyek Location

Obyek location memuat informasi URL (uniform resource locator) yang sedang dibuka. URL dapat berupa http atau www. Selain itu dapat berupa alamat file. Letak obyek location pada browser adalah �

Gambar 22.8 Letak obyek location pada browser

Obyek Browser

Properti Obyek Location

Href

Digunakan untuk menampilkan informasi alamat lengkap dari dokumen yang sedang dibuka. Misal �location.href = “http://www.yahoo.co.id”

location.href = “file:/d:/dataku/page_pertama.html”

href juga dapat digunakan untuk membuka jendela baru dengan alamat yang sudah ditentukan. Misal�location.href = “http://www.yahoo.co.id”

window.open(location.href,”namanya”,”atributnya”)

Berikut contoh program lengkapnya.<HTML>

<HEAD><TITLE>Contoh Obyek Location</TITLE></HEAD>

<BODY>


function koneksi()

{

document.write(location.href)

}

</script>

alamatnya :


koneksi()

</script>

<br><hr>

<input type=button value=”Klik di sini” onclick=”location.href =

‘contoh4.html’ “>

<input type=button value=”Klik di sini” onclick=”location.href =

‘http://www.yahoo.co.id’ “>

</BODY>

</HTML>

http://www.yahoo.co.id/

http://www.yahoo.co.id/

Obyek Browser

Gambar 22.9 Contoh penggunaan href

Host, Hostname Dan Port

Host digunakan untuk menghasilkan nama host dan nomor port dokumen yang sedang dibuka. hostname digunakan untuk menghasilkan nama host dokumen yang dibuka. Sedangkan properti port digunakan untuk menghasilkan nomor port dokumen yang sedang dibuka. Jadi properti hostname menyimpan nama host dari URL. Properti ini dapat berisi domain atau IP Address.

Karena orang lebih mudah menghafal nama, maka alamat situs dapat ditulis dengan huruf. Misal � www. citrakarya.co.id, yang seharus dapat ditulis dalam bentuk IP Address misal 192.161.2.1. Jika tidak ada nomor port maka properti host sama dengan hostname. Contoh di bawah ini menjelaskan tentang masing-masing properti diatas.

Nama host-nya � location.host = “ ww w .cit r a_ k a r y a. co.id”

Nomor port-nya� 80 (default web server)

Nama hostname � location.hostname = “ ww w .cit r a_

karya.co.id�80

http://www.citra_/

http://www.citra_karya/

Obyek Browser

Pathname

Digunakan untuk menghasilkan path lengkap dari dokumen yang sedang dibuka. Biasanya terdiri dari nama direktori dan nama file. Jadi anda dapat meletakkan dokumen ke jendela browser. Namun dokumen yang dimuat harus terletak di host yang sama dengan dokumen yang sedang dimuat. Berikut contoh programnya.<HTML>


<BODY>


document.write(“Lokasi dari dokumen ini : “+location. pathname)

</script>

</BODY>

</HTML>

Gambar 22.10 Penggunaan properti pathname

Protokol

Digunakan untuk menghasilkan protokol yang dipakai guna menampilkan dokumen yang sedang dibuka. Untuk dokumen HTML properti ini bernilai “http”. Jika dokumen terletak pada file lokal bernilai “file:/”. Perlu diperhatikan jika brwoser menggunakan Nescape URL-nya � file:///d\buku_web\contoh_1.html, sedangkan IE URL-nya � d:\buku_web\contoh_1.html, terlihat keduanya berbeda. Berikut ini

Obyek Browser

contohnya.

Obyek Browser 1

<HTML>


<BODY>


document.write(“Protokol dokumen ini : “+location. protocol)

</script>

</BODY>

</HTML>

Protokol lain yang digunakan

adalah � location.protocol = “ftp:”

location.protocol = “http:”

location.protocol = “gopher:”

location.protocol = “file:”

Hash

Digunakan untuk menyimpan nama anchor dari

dokumen yang sedang dimuat pada URL. Anchor adalah nama bagian dokumen yang dapat langsung dituju. Pada dokumen HTML anchor ditunjukkan dengan <a name = “…”> apa kabar </a>. Misalnya �

http://www.citra_karya.co.id/index .

html#networking

location.hash = “netwoking” file://d:/direktori/file.html#anchor-1

location.hash = “anchor-1”

Search

Digunakan untuk menghasilkan string pencarian dari dokumen yang sedang dibuka. Parameter pencarian selalu diletakkan setelah

http://www.citra_karya.co.id/index

Obyek Browser 1

tanda tanya “?” dan biasa-

nya dipakai pada dokumen HTML yang memiliki elemen form. Setelah tombol submit ditekan, URL yang ada di browser akan mengikuti format �

http://www.domain.net/direktori/program?da

ta1=nilai1&data2=nilai2&…

Perlu diketahui pada bagian data1&nilai1&da ta2=nilai2, menyatakan URL mengirimkan dua data yang dicari atau dibutuhkan. Jadi form yang dikirim harus mengikuti format data1&nilai1&data2=nilai2&………. Dan form yang dibuat dengan perintah <form>

atribut method harus bernilai “GET” atau “POST” maka saat form dikirim data akan diletakkan pada bagian akhir URL dipisahkan tanda “?”. Contoh � http://www.

citra_karya.co.id/index.html?networking.

22.5 Obyek History

Adalah obyek yang menyimpan semua tempat alamat situs yang telah dikunjungi. Alamat yang dikunjungi dapat berupa �

1. URL (berupa www atau http).

2. File lokal pada host.

3. Semua file yang dibuka dengan browser.

http://www.domain.net/direktori/program

Obyek browser mengandung informasi �

1. Judul dokumen.

2. Lokasi dokumen berada.

Obyek Browser

3. Waktu membuka dokumen pertama kali

4. Waktu membuka dokumen terakhir kali.

5. Berapa banyak dokumen telah dibuka.

Properti Obyek History

Tabel 22.4 Daftar properti obyek History

Properti Keteranganlength Jumlah item di dalam daftar history.

Properti length akan menghitung jumlah do-

kumen web yang pernah di kunjungi sejak browser dijalankan. Berikut contoh programnya �<HTML>

<HEAD><TITLE>Contoh Obyek History</TITLE></HEAD>

<BODY>

<script language=”Javascript”>

var website = history.length

document.write(“Daftar website yang pernah diakses : “+website)

</script>

</BODY>

</HTML>

Gambar 22.11 Contoh penggunaan obyek history

Obyek Browser

Metode Obyek History

Tabel 22.5 Daftar metode obyek history

Metode Keteranganback() Mundur ke dokumen sebelumnya.forward() Maju ke dokumen berikutnya.go(lokasi) Menuju ke dokumen yang ditentukan

oleh parameter lokasi. Parameter dapat bertipe string atau numerik.

Berikut contoh programnya.<HTML>

<HEAD><TITLE>Contoh Obyek History</TITLE></HEAD>

<BODY>

<script language=”Javascript”>

function mundur()

{

history.back()

}

function maju()

{

history.forward()

}

function maju1()

{

history.go(1)

}

function mundur_1()

{

history.go(-1)

}

</script>

<input type=button value=”MUNDUR” onclick=”mundur()”>

<input type=button value=”MAJU” onclick=”maju()”>

<input type=button value=”MAJU 1” onclick=”maju1()”>

<input type=button value=”MUNDUR 1” onclick=”mundur_1()”>

</BODY>

</HTML>

Obyek Browser

Untuk dapat menjalankan program diatas, anda harus menjalankan beberapa dokumen melalui browser di komputer, agar saat tombol ditekan terlihat aksi dari tombol tersebut.

22.6 Obyek Document

Yang dimaksud adalah dokumen web yang saat ini sedang aktif. Dokumen web berisi elemen seperti text, button, textarea, link, radio dan lainnya.

Properti Obyek Document

bgcolor dan fgcolor

Digunakan untuk menentukan warna teks dan

latar belakang dokumen. Berikut contoh programnya.<HTML>

<HEAD><TITLE>Contoh Obyek Document</TITLE></HEAD>

<BODY>

<center><h3>PT. KARYA JATI PERSADA</h3></center>

<hr><br>

<input type=button name=”biru” value=”Merubah warna depan”

onclick=”document.fgcolor=’blue’ “>

<input type=button name=”hijau” value=”Merubah warna belakang”

onclick=”document.bgcolor=’green’ “>

</BODY>

</HTML>

Linkcolor, Alinkcolor dan Vlinkcolor

Obyek Browser

1. Linkcolor digunakan untuk mengatur warna link yang belum pernah dikunjungi.

Obyek Browser

2. Alinkcolor digunakan untuk mengatur warna link yang sedang aktif.

3. Vlinkcolor digunakan untuk mengatur warna link yang sudah dikunjungi.

Berikut ini contoh programnya.<HTML>


<BODY>


document.linkcolor=”blue”

document.alinkcolor=”cyan”

document.vlinkcolor=”green”

</script>

<center><h3>PT. KARYA JATI PERSADA</h3></center>

<hr><br>

<a href=”http://www.mail.yahoo.co.id”>Koneks i ke yahoo.co.id</a><br>

<a href=”http://www.lycos.com”>Koneks i ke lycos.com</a><br>

<a href=”http://www.plasa.com”>Koneks i ke plasa.com</a>

</BODY>

</HTML>

Title

Digunakan untuk menentukan judul dari doku-

men web yang sedang aktif. Properti ini tanpa anda sadari sebetulnya sering digunakan. Lihat program dibawah, dimana properti title digunakan.<HTML>


<BODY>


http://www.plasa.com/

http://www.plasa.com/

http://www.lycos.com/

http://www.lycos.com/

http://www.mail.yahoo.co.id/

http://www.mail.yahoo.co.id/

Obyek Browser

document.linkcolor=”blue”

Location

Digunakan untuk menentukan alamat dari dokumen yang sedang aktif. Properti ini sama dengan properti href pada obyek location). Berikut contoh programnya.<HTML>


<BODY>


document.write(“alamat yang aktif saat ini :”+document.location)

</script>

</BODY>

</HTML>

Gambar 22.12 Contoh properti location

Referer

Digunakan untuk menentukan dokumen yang memanggil dokumen aktif. Berikut contoh programnya.<HTML>


<BODY>


document.write(“Dokumen ini dipanggil dari : “+document.referrer)

</script>

</BODY>

</HTML>

lastModifed

Digunakan untuk menentukan tanggal terakhir dokumen diperbaiki. Berikut contoh programnya.<HTML>


<BODY>


document.write(“Informasi terakhir dokumen diperbaiki :

“+document.lastModified)

</script>

</BODY>

</HTML>

Gambar 22.13 Penggunaan properti lastModified

Metode Obyek Document

Beberapa metode obyek document dapat diliat pada tabel 35. Beberapa metode dapat anda coba sendiri sebagai latihan.

Tabel 22.6 Daftar metode obyek document

Metode Keteranganwrite() Menulis teks ke dalam dokumen.

writeln() Menulis teks ke dalam dokumen, dan diikuti karakter baris baru.

clear() Menghapus tampilan jendela dokumen.close() Menutup dokumen yang aktif.

open

(mimetype)Membuka aliran yang mengizinkan metode write() dan writeln() menulis pada jendela dokumen. Parameter mimeType adalah string yang menetukan jenis dokumen yang didu- kung navigator text/html, image,gif.

Berikut ini contoh penggunaan metode obyek

document.<HTML>


<BODY>


function hilang()

{

document.clear()

}

function selesai()

{

document.close()

}

</script>

<input type=button value=”Bersihkan Dokumen” onclick=”hilang()”>

<input type=button value=”Selesai” onclick=”selesai()”>

</BODY>

</HTML>

22.7 Latihan

Tambahkan pada disain web anda dari tugas Bab

19 dengan beberapa fasilitas dibawah, gunakan obyek yang tersedia pada Bab 20.

1. Mampu menampilkan status jika mouse berada pada sebuah obyek.

2. Mengandung pesan yang di bangun dari metode alert.

3. Mampu menampilkan alamat lengkap dari dokumen aktif.

4. Mampu menampilkan jumlah pengunjung yang mengakses website.

5. Mampu menampilkan informasi kapan terakhir dokumen diupdate.

oo000oo

OBYEK HTML 2323.1 Tujuan Instruksional

1. Pembaca memahami manfaat obyek HTML.

2. Pembaca mampu menggunakan elemen form obyek HTML.

3. Pembaca mampu menentukan properti dan metode obyek HTML.

4. Pembaca dapat membuat event handler pada obyek

HTML.

23.2 Pendahuluan

Obyek Form adalah obyek yang digunakan untuk mengambil input dari pemakai sehingga user dapat berinteraksi dengan server. Fungsi obyek form biasanya digunakan untuk membuat buku tamu, polling dan data isian. Pada saat mempelajari HTML anda sudah pernah menggunakan perintah <form>. Semua elemen yang didefinisikan dalam <form> ….. </form> merupakan bagian dari form tersebut.

Menentukan Elemen Form

Form adalah obyek dari obyek document, sehingga form dalam dokumen merupakan properti dari obyek

Obyek HTML

document. Misal berikut ini contoh dokumen dengan satu buah form �<form>

<input type=text name=”contoh” maxlength=25 size=26>

<input type=button name=”proses” value=”Kirim …”>

</form>

Contoh di atas merupakan struktur dari HTML untuk JavaScript anda bisa menunjuk ke setiap elemen sebagai berikut �Document.forms[0].elements[0]

Document.forms[1].elements[1]

Dimana elemens[0] adalah text dan elemens[1] adalah button. Dalam sebuah dokumen pun dapat terdiri lebih dari satu obyek form. Berikut ini contohnya �<form>

<input type=text name=”nm” maxlength=25 size=26>

<input type=text name=”almt” maxlength=35 size=36>

<input type=text name=”kota” maxlength=12 size=13>

</form>

<form>


<input type=reset name=”kembali” value=”Kembali”>

</form>

Pada potongan program di atas dokumen mengandung dua buah obyek form. Pada JavaScript dapat ditulis sebagai berikut �//milik form pertama dengan tiga elements

document.forms[0].elements[0]



Obyek HTML

// milik form kedua dengan dua elements



Menentukan Properti Elemen Obyek Form

Setiap properti elemen form dapat ditentukan pada JavaScript. Misal �<form>


</form>

Dari contoh di atas, dalam JavaScript setiap properti elemen dapat ditulis �document.forms[0].elements[0].name

document.forms[0].elements[0].value

Selain cara seperti di atas dapat pula ditulis menggunakan properti this untuk merujuk ke isi properti form yang digunakan. Contoh �<input type=text name=”nm” maxlength=25 size=26

onClick=proses(this.nm.value)>

23.3 Properti Obyek Form

Action

Digunakan untuk menentukan dokumen yang akan dibuka atau dituju oleh form yang dikirim. Misal �window.form[0].action=”http://www.wahju.blogspot.com/index.html”

Method

Digunakan untuk menentukan cara mengirimkan form. Ada dua nilai yaitu �

Obyek HTML

Get � guna mengirimkan form

Post � guna mengambil hasil dari form

Misal �<form name=”contoh” method=”post”

action=”mailto:[email protected]?subject=kenalan”>

Target

Digunakan untuk menentukan jendela atau frame yang akan dituju. Contoh �document.forms[0[.elements[0].target=”bagian_2”

Elements

Digunakan untuk menentukan urutan array setiap elemen pada obyek form. Contoh �document.forms[0].elements[0].value==” ”

document.forms[0].elements[1].value==” ”

document.forms[0].elements[2].value==” ”

23.4 Metode Obyek Form

Hanya ada satu metode yaitu submit(), digunakan untuk mengirimkan form ke lokasi yang telah di- tunjuk. Contoh �<form>

<input type=button value=”Kirim …”

onclick=”document.forms[0].elements[0].submit()”>

</form>

Obyek HTML

23.5 Event Handler Obyek Form

Event handler obyek form adalah onSubmit, digunakan untuk menentukan kode JavaScript yang akan dijalankan bila form dikirimkan. Berikut contoh lengkapnya.<HTML>

<HEAD><TITLE>contoh</TITLE>


function coba()

{

window.alert(“Proses kirim selesai”)

}

</script>

</HEAD>

<BODY>

<form method=post action=”http://www.yahoo.com” onSubmit=”coba()”>

<input type=submit name=”proses” value=”Kirim ...”>

</form>

</BODY>

</HTML>

Gambar 23.1 Contoh event handler obyek form

=== 0 ===

http://www.yahoo.com/

20120511 Javascript

Documents

Transcript of 20120511 Javascript