JavaScript Tutorial
JavaScript Tutorial
Pada awalnya, JavaScript mulai diperkenalkan di browser Netscape Navigator 2. Namun waktu itu namanya bukan JavaScript, namun LiveScript. Mengingat pada waktu itu teknologi Java sedang panas-panasnya atau sedang tren, maka pihak Netscape memutuskan untuk mengganti namanya menjadi JavaScript, yang sepertinya nama tersebut lebih marketible dibandingkan LiveScript. Selanjutnya pihak Microsoft (rival Netscape) pun mulai ikut-ikutan memfasilitasi web browser buatannya, Internet Explorer, supaya bisa mendukung JavaScript. Namun mungkin karena gengsi, pihak Microsoft memberi nama bahasa yang lain, yaitu Jscript. Mulai saat itu, Netscape dan Microsoft mulai berlombalomba mengembangkan bahasa tersebut dalam versi yang berlainan. Oleh sebab persaingan itulah terkadang suatu JavaScript mungkin bisa bekerja dengan baik di browser Netscape, tapi tidak demikian halnya di IE, begitu pula sebaliknya. Berikut ini tabel kompatibilitas versi-versi Javascript pada Netscape dan IE Versi Javascript Versi Netscape Navigator Versi IE yang mendukung yang mendukung 3.x N/A 4.x N/A 5.0 6.x and 7.x 5.5 and 6.0
JavaScript 1.0 (ekivalen 2.x dengan JScript 1.0) JavaScript 1.1 3.x JavaScript 1.2 (ekivalen 4.04.05 dengan JScript 3.0) JavaScript 1.3 JavaScript 1.4 (ekivalen dengan JScript 5.0) JavaScript 1.5 4.06+
http://blog.rosihanari.net
Javascript Tutorial
Netscape, Firefox, Opera dan lain-lain. Sehingga dapat kita asumsikan bahwa kebanyakan orang membuka halaman web dengan web browser yang telah mendukung Javascript. Sedangkan untuk VBScript, bahasa ini hanya bisa dijalankan pada browser IE dan harus menggunakan platform Windows. Selain itu, Javascript juga bersifat fleksibel artinya bahwa ia tidak hanya digunakan di web browser, namun juga dapat digunakan oleh sistem operasi Windows untuk otomatisasi administration tasks. Dalam file PDF, Javascript juga digunakan untuk mengatur tampilan halaman PDF di web.
http://blog.rosihanari.net
contoh1.htm
<html> <head> <title>Contoh Javascript</title> </head> <body bgcolor="white"> <p>Paragraph 1</p> <script language="JavaScript" type="text/javascript"> document.bgColor = "red"; </script> </body> </html>
http://blog.rosihanari.net
Javascript Tutorial
Apabila kita perhatikan pada bagian Javascript, maka pada akhir statement diakhiri dengan tanda semi colon atau titik koma. Untuk mengubah warna halaman web sendiri, kita menggunakan perintah
document.bgColor = "red";
Apa yang kita sebut dengan halaman adalah merupakan document, sehingga terdapat perintah document pada perintah di atas. Selanjutnya document memiliki banyak properti, termasuk di dalamnya adalah bgcolor yang digunakan untuk mengatur warna background halaman. Sekarang, kita lanjutkan contoh kedua. Pada contoh kedua ini kita akan melihat flow proses dari Javascript terkait dengan adanya beberapa blok yang digunakan. contoh2.htm
<html> <head><title>Contoh Javascript</title></head> <body bgcolor="white"> <p>Paragraph 1</p> <script language="JavaScript" type="text/javascript"> // blok script 1 alert("blok script 1 sedang dijalankan"); </script> <p>Paragraph 2</p> <script language="JavaScript" type="text/javascript"> // blok script 2 document.bgColor = "RED"; alert("blok script 2 sedang dijalankan");
http://blog.rosihanari.net
Javascript Tutorial
</script> <p>Paragraph 3</p> </body> </html>
Apabila script di atas dijalankan, maka berikut ini beberapa screen shot tampilannya:
Tampilan gambar pertama, adalah ketika script blok 1 dijalankan. Gambar kedua ketika blok script 2 dijalankan. Sedangkan gambar paling bawah adalah tampilan setelah semua http://blog.rosihanari.net 5
Javascript Tutorial
script blok dijalankan. Dari contoh ini dapat disimpulkan bahwa apabila dalam suatu halaman web terdiri dari beberapa blok Javascript, maka jalannya script mulai dari blok paling atas, selanjutnya sampai paling bawah. Catatan: Function alert() digunakan untuk menampilkan pesan peringatan.
http://blog.rosihanari.net
Contoh penggunaan:
http://blog.rosihanari.net
Javascript Tutorial
"Hello, World \n I Love Javascript" Tipe data boolean Apabila suatu value bertipe data boolean, maka value tersebut hanya bernilai true atau false saja.
Deklarasi Variabel
Seperti yang telah diberikan di awal, bahwa variabel digunakan untuk keperluan penyimpanan value atau data di dalam memori komputer. Setelah value atau data ini disimpan dalam memori, selanjutnya dapat diload kembali untuk diproses. Dalam Javascript, setiap kali kita akan menggunakan variabel, langkah pertama yang harus dilakukan adalah mendeklarasikan keberadaan nama variabel. Hal ini perlu dilakukan karena dengan adanya deklarasi nama variabel, komputer akan menyediakan beberapa bagian memori untuk menyimpan value pada nama variabel tersebut. Berikut ini adalah statement untuk mendeklarasikan nama variabel bernama variabelku.
var variabelku;
Setelah nama variabel dideklarasikan, selanjutnya dapat dilakukan proses assignment. Assignment adalah proses penyimpanan value pada memori melalui nama variabel yang telah dideklarasikan. Contoh:
variabelku = 102;
Maksud statement di atas adalah menyimpan value 102 dalam variabel bernama variabelku. Dalam contoh ini, tipe data value yang disimpan adalah berupa numerik. Sedangkan berikut ini contoh proses assignment pada value bertipe string dan boolean.
a = "Hello World"; b = true;
Berikut ini contoh script dalam mendeklarasikan variabel dan proses assignment contoh3.htm
<html> <head>
http://blog.rosihanari.net
Javascript Tutorial
<title>Contoh Javascript</title> </head> <body> <script language="JavaScript" type="text/javascript"> var variabelku; variabelku = "Hello"; // bertipe string alert(variabelku); variabelku = 54321; alert(variabelku); </script> </body> </html> // bertipe numerik
Catatan penting !! Dalam Javascript berlaku sifat case sensitive, artinya penulisan huruf besar dan kecil dalam nama variabel adalah dibedakan. Sebagai contoh adalah misalkan diberikan dua buah nama variabel a dan A. Meskipun dalam pembacaannya adalah sama, namun oleh Javascript, keduanya dianggap berbeda.
http://blog.rosihanari.net
Javascript Tutorial
Jangan gunakan Reserved Word atau kata tercadang sebagai nama variabel. Kata tercadang adalah kata yang sudah built in dalam Javascript yang sudah bermakna khusus. Pelanggaran hal ini akan mengakibatkan error.
http://blog.rosihanari.net
10
Dalam kode di atas, terdapat kesalahan sintaks karena penggunaan nama variabel yang diambil dari reserved word (with). Apabila code tersebut dijalankan di Firefox, maka tidak akan muncul apa-apa. Namun apabila kita lihat pada menu TOOL > ERROR CONSOLE, maka akan muncul pesan sbb:
http://blog.rosihanari.net
11
Javascript Tutorial
Sedangkan untuk melihat pesan kesalahan sintaks pada IE, terlebih dahulu kita harus mengaktifkan panel untuk menampilkan pesan kesalahan. Caranya adalah klik menu TOOLS > INTERNET OPTIONS > ADVANCED lalu beri tanda CEK pada option DISPLAY A NOTIFICATION ABOUT EVERY SCRIPT ERROR. Apabila script yang error sebelumnya dijalankan di IE, maka berikut ini pesan kesalahannya:
Perhatikan tampilan pesan kesalahan pada kedua jenis browser di atas. Keduanya menunjukkan adanya kesalahan pada baris ke-9 (Line : 9), sehingga kita harus segera memperbaiki pada baris tersebut. Tips: Gunakan teks editor yang menampilkan nomor baris setiap perintah. Hal ini akan membantu kita dalam proses debugging sintaks error. Dalam hal ini, penulis merekomendasikan Notepad++ (bukan Notepad biasa) sebagai teks editornya.
http://blog.rosihanari.net
12
contoh4.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var hasil; // deklarasi dan assignment dapat dilakukan sekaligus var bilPertama = 15; var bilKedua = 10; hasil = bilPertama + bilKedua; alert(hasil); // menampilkan hasil 15 hasil = bilPertama - bilKedua; alert(hasil); // menampilkan hasil 5 hasil = bilPertama * bilKedua; alert(hasil); // menampilkan hasil 150 hasil = bilPertama / bilKedua; alert(hasil); // menampilkan hasil 1.5 </script> </body> </html>
contoh5.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var bilangan; var hasil; bilangan = 5; bilangan += 4; // ekuivalen dengan statement bilangan = bilangan + 4; alert(bilangan); // menampilkan 9
http://blog.rosihanari.net
13
Javascript Tutorial
hasil = bilangan + 2 - 1 * 4; alert(hasil); // menampilkan 7 </script> </body> </html>
Perhatikan statement
bilangan += 4;
Dalam Javascript juga dikenal beberapa jenis operator khusus yang lain, misalnya ++, -=,
*=, dan /=
Contoh:
bilangan++; bilangan--; bilangan -= 2; bilangan *= 2; bilangan /= 2;
{ekuivalen dengan perintah bilangan {ekuivalen dengan perintah bilangan {ekuivalen dengan perintah bilangan {ekuivalen dengan perintah bilangan {ekuivalen dengan perintah bilangan
= = = = =
+ * /
1; 1; 2; 2; 2;
} } } } }
contoh6.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var harga = prompt("Masukkan harga mula-mula (Rp) : "); var hargaDiskon; hargaDiskon = harga - 0.2 * harga; document.write("Harga setelah didiskon : Rp. " + hargaDiskon); </script> </body> </html>
Pada contoh di atas, user diminta memasukkan harga mula-mula, lalu Javascript akan menampilkan harga setelah didiskon 20% ke dalam halaman web.
http://blog.rosihanari.net
14
Javascript Tutorial
Tampilan scriptnya adalah sebagai berikut:
Catatan: Perintah prompt() digunakan untuk menampilkan kotak dialog yang meminta user memasukkan input. Selanjutnya input tersebut akan diassign ke dalam variabel. Sedangkan perintah document.write() digunakan untuk menuliskan string ke dalam halaman web.
http://blog.rosihanari.net
15
http://blog.rosihanari.net
16
selanjutnya misalkan dilakukan lagi proses assignment pada variabel myVariable dengan nilai 30
myVariable = 30;
maka akibatnya nilai sebelumnya (45) akan ditimpa dengan nilai yang baru (30). Itu adalah efek penggunaan variabel biasa, yaitu apabila diassign dengan nilai yang baru pada variabel yang sama, maka nilai yang lama akan tertimpa atau terhapus. Dengan variabel bertipe array, kita dapat mengassign kedua nilai atau lebih dalam satu variabel. Adapun cara mendeklarasikan variabel bertipe data array adalah sebagai berikut:
var myVariable = new Array();
atau
var myVariable; myVariable = new Array();
Selanjutnya cara melakukan assignment pada variabel bertipe data array adalah sebagai berikut:
myVariable[0] myVariable[1] myVariable[2] myVariable[3] myVariable[4] myVariable[5] = = = = = = "Agus"; 345; "Amir"; 112; "Acong"; 99;
atau
var myVariable = new Array("Agus",345,"Amir",112,"Acong",99);
http://blog.rosihanari.net
17
Javascript Tutorial
Perhatikan contoh script berikut ini tentang pendeklarasian variabel array, assignment, mengganti value elemen array serta menampilkan elemen array. contoh8.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var mhs = new Array(); // deklarasi array // assignment mhs[0] = "Amalia"; mhs[1] = "Faza"; mhs[2] = "Nada"; // menampilkan elemen array document.write("mhs[0] = " + mhs[0] + "<br>"); document.write("mhs[2] = " + mhs[2] + "<br>"); document.write("mhs[1] = " + mhs[1] + "<br>"); // mengubah value elemen mhs[1] = "Ari"; document.write("mhs[1] diubah menjadi " + mhs[1]); </script> </body> </html>
http://blog.rosihanari.net
18
Javascript Tutorial
http://blog.rosihanari.net
19
atau
if (syarat) { Statement jika syarat terpenuhi (bernilai TRUE) } else { Statement jika syarat tidak terpenuhi (bernilai FALSE) }
if (bil > 10) { status = "Anda telah memasukkan bilangan lebih besar dari 10"; } document.write(status); </script> </body> </html>
http://blog.rosihanari.net
20
Javascript Tutorial
Pada script di atas, keterangan hanya akan muncul apabila bilangan yang dimasukkan adalah lebih besar dari 10. Selanjutnya perhatikan script yang telah diperbaiki berikut ini
<html> <body> <script language="JavaScript" type="text/javascript"> var bil; var status; bil = prompt("Masukkan sebarang bilangan : ");
if (bil > 10) { status = "Anda telah memasukkan bilangan lebih besar dari 10"; } else if (bil < 10) { status = "Anda telah memasukkan bilangan lebih kecil dari 10"; } else { status = "Anda telah memasukkan bilangan sama dengan 10"; } document.write(status); </script> </body> </html>
Pada script di atas terdapat beberapa alternatif syarat, yaitu jika bilangan yang dimasukkan lebih besar 10, jika bilangan yang dimasukkan lebih kecil 10. Jika dari kedua syarat tersebut tidak ada yang memenuhi, maka pilihan terakhir adalah sama dengan 10. Untuk menyatakan syarat, kita dapat menggunakan beberapa operator relasional sebagai berikut
> < >= <= == !=
menyatakan lebih besar dari menyatakan lebih kecil dari menyatakan lebih besar atau sama dengan menyatakan lebih kecil atau sama dengan menyatakan sama dengan menyatakan tidak sama dengan
http://blog.rosihanari.net
21
Javascript Tutorial
&& || !
http://blog.rosihanari.net
22
Javascript Tutorial
Script di atas digunakan untuk mengkonversi nilai angka ke nilai huruf dengan aturan konversi sebagai berikut 80 100 70 79 60 69 50 59 0 49 A B C D E
Apabila nilai yang dimasukkan tidak 0 100 maka akan muncul keterangan nilai yang dimasukkan tidak valid. Sebagai catatan, bentuk IF pada contoh10.htm dapat dimodifikasi menjadi syarat yang lebih sederhana. Perhatikan script berikut ini
<script language="JavaScript" type="text/javascript"> var nilaiAngka; var nilaiHuruf; nilaiAngka = prompt("Masukkan nilai angka 0 - 100 // mengecek apakah nilai yang dimasukkan 0 -100 if (nilaiAngka >= 0) && (nilaiAngka <= 100) { if (nilaiAngka >= 80) { nilaiHuruf = "A"; } else if (nilaiAngka >= 70) { nilaiHuruf = "B"; } else if (nilaiAngka >= 60) { nilaiHuruf = "C"; } else if (nilaiAngka >= 50) { nilaiHuruf = "D"; } else if (nilaiAngka >= 0) { nilaiHuruf = "E"; } } else { : ");
http://blog.rosihanari.net
23
Javascript Tutorial
nilaiHuruf = "Nilai angka tidak valid"; } document.write("Nilai huruf : " + nilaiHuruf); </script>
http://blog.rosihanari.net
24
Proses dari SWITCH di atas adalah melakukan cek pada value variabel. Apabila valuenya sama dengan option1 maka statement yang dilakukan adalah statement1. Apabila valuenya sama dengan option2 maka statement2 yang dijalankan, begitu seterusnya. Namun apabila tidak ada value yang sama, maka statementx lah yang dijalankan. Oya tipe data dari variabel yang akan dicek haruslah ordinal, misalnya integer. Dalam hal ini tipe data riil tidak dapat digunakan. Untuk memastikan bahwa nilai yang akan dicek pada variabel adalah bertipe integer, sebaiknya gunakan perintah parseInt(). Perhatikan contoh berikut ini: contoh11.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var nilaiAngka; var nilaiHuruf; nilaiAngka = parseInt(prompt("Masukkan sebuah bil bulat 1 s/d 5 : ")); switch(nilaiAngka) { case 1 : document.write("Anda memasukkan bilangan 1"); break;
http://blog.rosihanari.net
25
Javascript Tutorial
case 2 : document.write("Anda memasukkan bilangan 2"); break; case 3 : document.write("Anda memasukkan bilangan 3"); break; case 4 : document.write("Anda memasukkan bilangan 4"); break; case 5 : document.write("Anda memasukkan bilangan 5"); break; default : document.write("Bilangan yang Anda masukkan tidak 1 s/d 5"); break; } </script> </body> </html>
Script di atas akan meminta user untuk memasukkan sebuah bilangan bulat 1 s/d 5. Selanjutnya script akan menampilkan status bilangan yang dimasukkan user. Apabila perintah parseInt() tidak digunakan, maka hasilnya akan salah.
http://blog.rosihanari.net
26
Maksud dari sintaks di atas adalah, bahwa bagian Statement akan terus diulang selama nilai syarat bernilai TRUE, dengan suatu nilai awal tertentu. Sebagai contoh, perhatikan script berikut ini: contoh12.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var counter; for(counter=1; counter<=5; counter++) { document.write("<font size='" + counter + "'> Ini adalah font berukuran " + counter + "</font><br>"); } </script> </body> </html>
Dalam contoh di atas, perulangan FOR terjadi mulai dari nilai awal counter = 1, dengan kenaikan nilainya adalah 1 (lihat counter++). Selama nilai counter 5, maka perulangan akan terus dilakukan. Sehingga hasilnya adalah:
http://blog.rosihanari.net
27
Javascript Tutorial
Dalam FOR, tidak selalu dalam bentuk increment, namun juga dapat berbentuk decrement. Perhatikan contoh berikut ini. contoh13.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var counter; for(counter=5; counter>=1; counter--) { document.write("<font size='" + counter + "'> Ini adalah font berukuran " + counter + "</font><br>"); } </script> </body> </html>
Hasilnya adalah:
http://blog.rosihanari.net
28
Javascript Tutorial
Suatu increment tidak selalu harus dengan tingkat kenaikan 1, begitu pula dengan decrement. Sebagai contoh, perhatikan statement FOR berikut ini yang memiliki tingkat kenaikan 2 untuk incrementnya. contoh14.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var counter; for(counter=1; counter<=5; counter+=2) { document.write("<font size='" + counter + "'> Ini adalah font berukuran " + counter + "</font><br>"); } </script> </body> </html>
http://blog.rosihanari.net
29
Dalam sintaks di atas, bagian statement akan terus diulang selama syarat bernilai TRUE. Sebagai contoh, perhatikan statement dalam FOR dan WHILE berikut ini. Kedua statement adalah ekuivalen atau sama (perhatikan perintah dengan warna yang sama).
for(counter=1; counter<=5; counter++) { document.write("Hello World <br>"); } -------------------------------------------------counter = 1; while(counter<=5) { document.write("Hello World <br>"); counter++; }
Meskipun semua statement FOR dapat juga dinyatakan sebagai WHILE, namun tidak berlaku kebalikannya. Tidak semua statement WHILE dapat dinyatakan dalam FOR. Nah inilah kelebihan WHILE. Kelebihan WHILE dibandingkan FOR adalah bahwa WHILE dapat digunakan apabila jumlah perulangan tidak diketahui. Sedangkan untuk FOR harus diketahui jumlah perulangannya. Sebagai contoh perumpaan, misalkan ada statement begini: Saya akan terus makan selama saya masih lapar. Statement tersebut adalah juga termasuk konsep perulangan dalam kehidupan sehari-hari. Dalam hal ini, jumlah berapa kali harus makan tidak diketahui, melainkan hanya syarat makannya saja yang diketahui, yaitu selama masih lapar.
http://blog.rosihanari.net
30
Javascript Tutorial
Nah perhatikan contoh berikut ini. Script ini akan terus meminta user untuk mengisikan sebuah angka, selama angka yang dimasukkan bukan 5. contoh15.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var angka; while(angka != 5) { angka = prompt("Masukkan sebuah angka : "); } document.write("Anda telah memasukkan angka 5"); </script> </body> </html>
Perhatikan syarat (yang dicetak biru) pada script di atas. Syarat tersebut bermakna, selama nilai angka tidak sama dengan 5, maka user akan selalu diminta memasukkan angka. Sehingga dalam kasus ini tidak diketahui berapa jumlah perulangan yang harus dilakukan, namun perulangannya tergantung dari syarat. Nah untuk kasus seperti ini, kita tidak bisa membuatnya dengan FOR.
http://blog.rosihanari.net
31
Dalam hal ini, parameter dalam function tidak harus ada. Perhatikan contoh function berikut ini yang digunakan untuk menghitung diskon 50% dari harga mula-mula, dimana harga mula-mula merupakan parameternya. contoh16.htm
<html> <head> <script language="JavaScript" type="text/javascript"> function diskon(hargaAwal) { var diskon; diskon = 0.5 * hargaAwal; hargaDiskon = hargaAwal - diskon; return hargaDiskon; } </script> </head> <body> <script language="JavaScript" type="text/javascript"> var harga = prompt("Masukkan harga mula-mula (Rp) : "); document.write("Harga stlh diskon 50% : Rp. " + diskon(harga)); </script> </body> </html>
Dalam contoh di atas, function diletakkan pada bagian <head>, namun dapat pula kita meletakkannya dalam <body>, seperti berikut ini
http://blog.rosihanari.net
32
Javascript Tutorial
<html> <head> </head> <body> <script language="JavaScript" type="text/javascript"> function diskon(hargaAwal) { var diskon; diskon = 0.5 * hargaAwal; hargaDiskon = hargaAwal - diskon; return hargaDiskon; } var harga = prompt("Masukkan harga mula-mula (Rp) : "); document.write("Harga stlh diskon 50% : Rp. " + diskon(harga)); </script> </body> </html>
Proses pada script di atas adalah sebagai berikut: Mula-mula user diminta memasukkan harga mula-mula, harga ini diassign ke dalam variabel harga, misalnya 1000. Selanjutnya script mencetak harga setelah didiskon. Dalam hal ini, script akan memanggil function diskon(harga) atau diskon(1000). Karena function diskon memiliki parameter hargaAwal, maka nilai dari hargaAwal ini sama dengan nilai dari variabel harga, pada contoh ini adalah bernilai 1000. Selanjutnya akan dihitung nilai diskon yaitu 0.5 * 1000 = 500, dan hargaDiskon yaitu 1000 500 = 500. Perintah return hargaDiskon, artinya akan mengembalikan nilai hargaDiskon (500) ke function yang memanggilnya, yaitu diskon(harga), lihat tanda panah pada script di atas. Sehingga akan tercetak Harga stlh diskon 50% : Rp. 500. Suatu function tidak harus terdapat return value. Perhatikan contoh berikut ini. contoh17.htm
<html> <head> <script language="JavaScript" type="text/javascript"> function cetakTeks(teks) { document.write(teks + "<br>"); }
http://blog.rosihanari.net
33
Javascript Tutorial
</script> </head> <body> <script language="JavaScript" type="text/javascript"> var kata = "Hallo"; var i; for(i=0; i<=5; i++) { cetakTeks(kata); } </script> </body> </html>
http://blog.rosihanari.net
34
atau dapat pula berbentuk seperti di bawah ini, apabila langsung disebutkan elemennya. 35
http://blog.rosihanari.net
Javascript Tutorial
var myArray = new Array("Joko", "Amir", "Budi");
Perintah di atas pada dasarnya adalah membuat obyek. Dalam hal ini namaVariabel adalah suatu obyek berbentuk Array(). Secara umum, perintah untuk membuat obyek dalam Javascript adalah
var namaObyek = new bentukObyek();
Dalam pemrograman berbasis obyek, bentukObyek() dinamakan constructor. Selain obyek berbentuk Array(), terdapat obyek lain dalam Javascript, yaitu Date(), String(), Math(), dan beberapa lagi yang lain. Berikut ini contoh membuat obyek berbentuk Date().
var tanggal = new Date("1 Jan 2000");
Javascript Tutorial
Script di atas menunjukkan cara menggunakan method sort() pada obyek berbentuk Array(). Method ini berfungsi untuk mengurutkan/sorting elemen array. Perhatikan, bahwa dalam urutan elemen arrayKu adalah A, C, E, D, B. Selanjutnya akan kita lihat hasil scriptnya di browser.
http://blog.rosihanari.net
37
Javascript Tutorial
shift()
http://blog.rosihanari.net
38
Javascript Tutorial
Method slice() sort() splice() toString() Mulai Digunakan Deskripsi Pada JavaScript Jscript 3.0 JavaScript Jscript 2.0 JavaScript 1.2 JavaScript Jscript 2.0 1.2 Mengembalikan subarray dari suatu array. 1.1 Sorting elemen array Menambahkan, menghapus dan mengganti elemen suatu array. Tidak didukung di IE. 1.1 Mengkonversi obyek array menjadi string
Nama Obyek : Date Methods Method getDate() getDay() getFullYear() getHours() getMilliseconds() getMinutes() getMonth() getSeconds() getTime() : Introduced JavaScript Jscript 1.0 JavaScript Jscript 1.0 JavaScript Jscript 3.0 JavaScript Jscript 1.0 JavaScript Jscript 3.0 JavaScript Jscript 1.0 JavaScript Jscript 1.0 JavaScript Jscript 1.0 JavaScript Jscript 1.0 Description 1.0 Mendapatkan tanggal dari obyek date (1-s/d 31) 1.0 Mendapatkan hari dalam seminggu (1 s/d 7). 1 = Senin, 2 = Selasa, dst 1.3 Mendapatkan tahun 1.0 Mendapatkan jam (00 s.d 23) 1.3 Mendapatkan jumlah milisekon 1.0 Mendapatkan jumlah menit (0 s/d 59) 1.0 Mendapatkan bulan (0 s/d 11), 0 = Januari, 1 = Pebruari, dst 1.0 Mendapatkan jumlah detik (0 s/d 59). 1.0 Mendapatkan jumlah milisecon January 1 1970 00:00:00 sejak
Perhatikan contoh script berikut yang menggunakan beberapa method untuk obyek Date.
http://blog.rosihanari.net
39
Javascript Tutorial
contoh20.htm
<html> <body> <script language="JavaScript" type="text/javascript"> var hariIni = new Date(); hari = hariIni.getDay(); if (hari = 1) else if (hari else if (hari else if (hari else if (hari else if (hari else if (hari namaHari = "Senin"; = 2) namaHari = "Selasa"; = 3) namaHari = "Rabu"; = 4) namaHari = "Kamis"; = 5) namaHari = "Jumat"; = 6) namaHari = "Sabtu"; = 7) namaHari = "Minggu";
tanggal = hariIni.getDate(); bulan = hariIni.getMonth() + 1; tahun = hariIni.getFullYear(); document.write("Hari ini adalah " + namaHari + ", Tanggal " + tanggal + "/" + bulan + "/" + tahun); </script> </body> </html>
Script di atas akan menampilkan nama hari ini, dan tanggalnya (tanggal/bulan/tahun). Berikut ini adalah outpurnya
http://blog.rosihanari.net
40
Javascript Tutorial
Masih banyak obyek lain dalam Javascript yang dapat digunakan, namun karena keterbatasan kemampuan penulis, maka untuk bab ini hanya dipilih beberapa obyek saja. Pembahasan obyek yang lain akan dilanjutkan pada bab tersendiri.
http://blog.rosihanari.net
41
Obyek Window
Obyek window terkait dengan frame window tempat halaman web ditampilkan. Beberapa properti yang dapat kita gunakan dalam obyek ini misalnya, ukuran window browser, jenis browser yang digunakan user, ukuran screen user dan banyak lagi. Obyek window ini merupakan obyek global, artinya kita tidak perlu menyebutnya dalam script, akan tetapi langsung disebutkan nama method atau propertinya. Sebagai contoh adalah penggunaan perintah alert(). Method alert() ini sebenarnya adalah method dalam obyek window, namun kita langsung dapat menggunakannya tanpa menuliskan nama obyek, misal:
alert("Hello World");
Selanjutnya kita akan mencoba properti di obyek window, yaitu defaultStatus. Properti ini digunakan untuk mengubah status browser. Biasanya status ini terletak di bagian kiri bawah window browser. contoh21.htm
<html> <head> <script language="JavaScript" type="text/JavaScript"> window.defaultStatus = "Hello and Welcome"; </script> </head>
http://blog.rosihanari.net
42
Javascript Tutorial
</html>
Karena obyek window adalah global obyek, kita dapat juga menuliskan script di atas seperti berikut
<html> <head> <script language="JavaScript" type="text/JavaScript"> defaultStatus = "Hello and Welcome"; </script> </head> </html>
Apabila Anda perhatikan, seolah-olah defaultStatus adalah sebuah variabel. Tapi ingat !!! ini bukanlah suatu nama variabel, namun suatu properti dari obyek window Sehingga apabila kita menambahkan var defaultStatus;, hasilnya tidak seperti yang diharapkan.
<script language="JavaScript" type="text/JavaScript"> var defaultStatus; defaultStatus = "Hello and Welcome"; </script>
Dengan penambahan var seperti di atas, status browser tidak akan berubah atau tidak ada efeknya sama sekali.
http://blog.rosihanari.net
43
Javascript Tutorial
Beberapa properti dari obyek window, juga merupakan suatu obyek. Misalnya history, document, navigator, screen dan location.
Obyek History
Obyek ini sebenarnya adalah properti dari obyek window. Obyek history digunakan untuk mengakses history halaman web yang telah dibuka/dikunjungi. Beberapa method yang dapat digunakan dalam obyek ini adalah back() dan forward(). Penggunaan kedua method tersebut mirip dengan tombol BACK dan FORWARD dalam browser, yaitu kembali ke halaman berikutnya serta menuju ke halaman berikutnya. Contoh
<script language="JavaScript" type="text/JavaScript"> history.back(); </script>
Terdapat pula method go() dalam obyek history ini. Contoh penggunaan:
history.go(2);
Perintah di atas digunakan untuk menuju ke 2 halaman berikutnya (sama hal nya seperti menekan tombol FORWARD 2x)
history.go(-1);
Perintah di atas sama hal nya seperti menekan tombol BACK sekali). Ingat!! Karena pada prinsipnya obyek history merupakan properti dari window, maka kita pun dapat menambahkana nama obyek window di awal perintah history, misal:
window.history.go(-1); window.history.back();
Berikut ini contoh script yang menampilkan tombol untuk BACK dan FORWARD. contoh23.htm
<html> <head> <script language="JavaScript" type="text/JavaScript"> function kembali() { history.back(); }
http://blog.rosihanari.net
44
Javascript Tutorial
function lanjut() { history.forward(); } </script> </head> <body> <input type="button" name="back" value="BACK" onclick="kembali()"> <input type="button" name="forward" value="FORWARD" onclick="lanjut()"> </body> </html>
Pada contoh script di atas, kita sudah menggunakan event handler, dalam hal ini adalah onclick, artinya apabila ada suatu komponen diberikan event ini sebagai atributnya, maka kita dapat membuat action ketika komponen tersebut diklik. Lebih lanjut tentang macammacam event handler akan dijelaskan pada bab lain.
Obyek Location
Dengan obyek ini, kita bisa melakukan navigasi ke halaman-halaman web lain. Untuk melakukan navigasi dengan obyek ini, terdapat method dan properti yang dapat kita gunakan, yaitu
location.replace("target"); location.href = "target";
Keterangan: target adalah nama halaman web yang ingin dituju. Lantas apa perbedaan dari method dan properti di atas? Apabila kita menggunakan replace() maka halaman yang sedang aktif akan dihapus dari data history dan diganti dengan halaman target. Sedangkan properti href tidak akan menghapus data history halaman yang sedang aktif, dan menyimpan halaman target ke dalam data history yang baru. Sebagai contoh:
location.replace("myPage.htm"); location.href = "myPage.htm";
Karena obyek window bersifat global, dan location sebenarnya adalah properti dari window, maka dapat kita tuliskan sebagai berikut
window.location.replace("myPage.htm"); window.location.href = "myPage.htm";
http://blog.rosihanari.net
45
Javascript Tutorial
Obyek Screen
Untuk obyek screen , terdapat 2 properti yang dapat kita gunakan untuk mengetahui size dari screen browser, yaitu width dan height. Berikut ini contoh penggunan properti ini untuk menampilkan informasi ukuran browser, melalui sebuah klik tombol. contoh24.htm
<html> <head> <script language="JavaScript" type="text/JavaScript"> function sizeBrowser() { var panjang, lebar; panjang = screen.width; lebar = screen.height; alert("Panjang browser Anda: " + panjang + " px \n Size lebar browser Anda: " + lebar + " px" ); } </script> </head> <body> <input type="button" name="klik" value="Klik Di Sini Untuk Mengetahui Ukuran Browser" onclick="sizeBrowser()"> </body> </html>
Berikut ini hasil tampilan di browser dan juga informasi ukuran browsernya.
http://blog.rosihanari.net
46
Javascript Tutorial
http://blog.rosihanari.net
47
Untuk membaca value yang diinputkan melalui komponen dalam form menggunakan JavaScript menggunakan obyek document dengan sintaks berikut ini: document.namaform.namakomponen.value; Sebagai contoh, script berikut ini adalah script untuk membaca value yang diinputkan user melalui komponen text lalu menampilkan sebagai alert. contoh26.htm
<html> <head> <script language="JavaScript" type="text/JavaScript"> function baca() { var nilai = document.formku.input.value; alert("Anda telah memasukkan input : " + nilai); } </script> </head> <body> <h1>Baca Input</h1> <form name="formku">
http://blog.rosihanari.net
48
Javascript Tutorial
Masukkan sebuah input <input type="text" name="input"> <input type="button" name="button" value="OK" onclick="baca()"> </form> </body> </html>
Selanjutnya, perhatikan contoh berikut ini. Pada contoh ini, akan dibuat semacam kalkulator sederhana yang mengoperasikan penjumlahan, pengurangan, perkalian dan pembagian dari dua buah bilangan. contoh27.htm
<html> <head> <script language="JavaScript" type="text/JavaScript"> function hitung() { var bilangan1 = parseFloat(document.formku.bil1.value); var bilangan2 = parseFloat(document.formku.bil2.value); var op = document.formku.operasi.value; var hasil; if (op == "jumlah") hasil = bilangan1 + bilangan2; else if (op == "kurang") hasil = bilangan1 - bilangan2; else if (op == "kali") hasil = bilangan1 * bilangan2; else if (op == "bagi") hasil = bilangan1 / bilangan2;
http://blog.rosihanari.net
49
Javascript Tutorial
document.formku.hasil.value = hasil; } </script> </head> <body> <h1>Kalkulator Sederhana</h1> <form name="formku"> Bil Pertama <input type="text" name="bil1"> <select name="operasi" onchange="hitung()"> <option value="jumlah">Dijumlahkan</option> <option value="kurang">Dikurangkan</option> <option value="kali">Dikalikan</option> <option value="bagi">Dibagi</option> </select> Bil Kedua <input type="text" name="bil2"> = <input type="text" name="hasil"> </form> </body> </html>
Pada contoh ini, hasil operasi akan muncul setelah user memilih jenis operasi yang diinginkan pada combobox. Untuk itu event yang digunakan pada contoh ini adalah onchange. Event tersebut diberikan pada combobox. Selanjutnya, perhatikan pada perintah
var bilangan1 = parseFloat(document.formku.bil1.value); var bilangan2 = parseFloat(document.formku.bil2.value);
Mungkin Anda bertanya, mengapa harus ada parseFloat()? Jawabannya adalah karena apabila tidak menggunakannya, maka input value dari bilangan pertama dan kedua dianggap sebagai string. Sehingga apabila tidak menggunakan perintah parseFloat()
http://blog.rosihanari.net
50
Javascript Tutorial
akibatnya adalah mengoperasikan string. Misalkan akan menjumlahkan bilangan pertama adalah 5 dan bilangan kedua adalah 7, maka hasilnya adalah 57 (penjumlahan string).
http://blog.rosihanari.net
51
Mouse Events
Event onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup Introduced Description JavaScript 1.0 JavaScript 1.2 JavaScript 1.2 JavaScript 1.2 JavaScript 1.1 JavaScript 1.0 JavaScript 1.2 Muncul ketika user mengklik elemen/komponen Muncul ketika user mengklik ganda pada elemen/komponen Muncul ketika user menekan tombol pada mouse Muncul ketika user menggerakkan pointer mouse Muncul ketika user menggerakkan pointer mouse keluar dari elemen/komponen control. Muncul ketika user menggerakan pointer mouse melalui/melewati elemen/komponen Muncul ketika user melepas tombol mouse
Keyboard Events
Event onkeydown onkeypress onkeyup Introduced Description JavaScript 1.2 Muncul ketika user menekan sebuah tombol pada keyboard JavaScript 1.2 Muncul ketika user menekan sebuah tombol keyboard dan akan terus muncul sampai user melepas tombol JavaScript 1.2 Muncul ketika user melepas tombol yang telah ditekan
http://blog.rosihanari.net
52
Javascript Tutorial
HTML Control Events
Event onblur onchange onfocus onreset onselect onsubmit Introduced JavaScript 1.0 JavaScript 1.0 JavaScript 1.0 JavaScript 1.1 JavaScript 1.0 JavaScript 1.0 Description Muncul ketika HTML control kehilangan focus. Muncul ketika HTML control kehilangan focus and nilainya telah berubah. Muncul ketika HTML control sedang focus Muncul ketika user menekan tombol reset dalam form Muncul ketika user memilih teks pada HTML control. Muncul ketika user melakukan submit form
Window Events
Event onload onresize onunload Introduced JavaScript 1.0 JavaScript 1.2 JavaScript 1.0 Description Muncul ketika window telah selesai loading Muncul ketika user mengubah ukuran window Muncul ketika user keluar dari halaman/dokumen web
http://blog.rosihanari.net
53
Javascript Tutorial
Obyek Link</a> </h1>
Script di atas menunjukkan efek penggunaan event onmouseover dan onmouseout pada suatu obyek berbentuk link. Apabila obyek link didekati kursor mouse, maka akan muncul keterangan pada texearea. Begitu pula ketika kursor mouse dijauhkan. Untuk mengubah-ubah keterangan pada textarea dalam contoh ini menggunakan obyek document. Penjelasan lebih lanjut tentang obyek ini akan disampaikan di lain waktu.
http://blog.rosihanari.net
54