JAVA SCRIPT
1. Pengenalan Javascript
Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan “LiveScript” yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman “Java” ) pada masa itu, maka Netscape memberikan nama “JavaScript” kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai “Jscript” di browser Internet Explorer 3.
Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatudokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.
Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.
Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. Di Javascript kita tidak mungkin menyembunyikan kode skrip yang kita tulis, kode langsung di tulis di dalam dokumen HTML dan sangat mudah terlihat, sedangkan di Java, kode sudah berbentuk setengah terkompilasi (dalam bentuk applet) dan tidak mungkin terlihat dari dalam dokumen HTML, satu mesin virtual di sisi user yang bertanggung jawab untuk menterjemahkan program di dalam applet tersebut setiap kali halaman HTML yang memuat applet tersebut dipanggil oleh browser. Dibandingkan dengan applet java yang cukup lambat dibuka oleh browser, bisa kita katakan bahwa Javascript cukup cepat di panggil(di load) oleh navigator. JavaScript sendiri merupakan bahasa yang mudah dipahami, dalam artian diperlukan skill novice atau dasar untuk mengerti bahasa ini, jika anda sudah terbiasa dan mengenal konsep bahasa pemrograman visual, maupun Java ataupun C, akan sangat mudah untuk memahami konsep Javascript.
JavaScript adalah bahasa yang “case sensitive” artinya membedakan penamaan variabel dan fungsi yang menggunakan huruf besar dan huruf kecil, contoh variabel atau fungsi dengan nama TEST berbeda dengan variabel dengan nama test. Dan yang terakhir seperti bahasa Java ataupun C, setiap instruksi diakhiri dengan karakter titik koma (;).
1.1 Bentuk skrip dari Javascript
Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator anda, karena diantara tag (kalau anda mengerti HTML pasti tahu dengan istilah ini) tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript.
1.2 Memberikan komentar (dan membuat skrip tidak tereksekusi)
Sering kali pada navigator versi lama, sebelum adanya JavaScript, tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. Contoh kode diatas tidak akan terlihat di navigator kita, akan tetapi dia akan menampilkan jendela peringatan (berupa kotak dialog) karena skrip tersebut tidak lengkap dan akan merusak dokumen HTML yang sudah kita buat dengan bagusnya. Untuk itu maka kita tambahkan tag komentar agar supaya skripnya tidak dibaca sebagai skrip, akan tetapi di baca sebagai komentar dan tidak akan dieksekusi sebagai program. Contohnya adalah sebagai berikut :
Seperti dalam banyak bahasa pemrograman lainnya, sangat dianjurkan untuk menambahkan komentar komentar di dalam skrip atau kode program yang kita bikin. kegunaannya antara lain adalah :
• Mengingatkan kita akan bagian bagian khusus di dalam skrip tersebut, jika kita ingin merubah sesuatu di dalamnya, mungkin beberapa bulan kemudian dan kita sudah lupa dengan detail dan alur dari skrip tersebut.
• Membuat orang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk petunjuk yang anda bikin melalui komentar komentar, kecuali anda tidak mau mensharing program yang anda miliki .. Untuk menulis komentar di JavaScript, kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa C/C++ ataupun Java.
• Untuk menulis komentar dalam satu baris kita gunakan karakter dobel slash.
// semua karakter di belakang // tidak akan di eksekusi
• Untuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter /* dan */
/* Semua baris antara 2 tanda tersebut
tidak akan di eksekusi oleh
kompilator */
Perhatikan perbedaan tag komentar untuk bahasa HTML (diantaranya untuk menyembunyikan skrip dari beberapa browser versi lama) dan tag komentar JavaScript (untuk keperluan dokumentasi skrip).
2. Obyek
2.1 Tentang Obyek
Untuk selanjutnya mari kita masuk kebagian berikutnya, yaitu bagian yang berbicara tentang obyek, tujuan dari bagian ini tidaklah muluk muluk sampai ke pengetahuan tentang pemrograman orientasi obyek akan tetapi sekedar pengenalan tentang obyek, dan memberikan ide kepada anda apakah yang disebut obyek itu ? ,yang merupakan konsep penting di dalam pembuatan kode JavaScript.
JavaScript memperlakukan elemen elemen yang tampil di jendela navigator kita sebagai suatu obyek , yang artinya adalah elemen yang :
• Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa mengetahui dimana letak/lokasi obyek itu sebenernya.
• Dimana kita mengasosiasikan dengan kondisi atau sifat sifat khusus (properti)
2.2 Obyek dari navigator (browser)
JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek, dengan tujuan untuk memudahkan kita untuk mengakses salah satu dari mereka dan memanipulasinya dengan cara
merubah sifat/kondisi (properti) mereka.
Kita mulai dari obyek yang paling besar diantara semuanya (yang berisi semua obyek lainnya), kemudian kita turun berdasarkan tingkatan atau hirarkinya sampai kepada obyek yang kita inginkan.
• Obyek paling besar adalah obyek jendela (window) dari navigator.
• Di dalam obyek jendela, ada satu obyek yang ditampilkan dalam bentuk sebuah halaman, kita sebut obyek dokumen atau document
• Halaman itu berisi banyak obyek seperti, formula, text, image dan lain lainya..
Tombol checkbox mempunyai nilai kondisi(properti) checked , yang akan memberikan nilai 1 jika tombol itu di pilih (checked), dan nilai 0 pada kasus sebaliknya dan fungsi JavaScript yang berhubungan dengan checkbox tersebut adalah ..
2.3 Obyek standart JavaScript
Selain obyek navigator di subbab 2.2, kita juga mengenal obyek standart dari JavaScript. Obyek obyek ini distandarisasikan oleh asosiasi ECMA (European Computer Manufacturer Association).
2.3.1 obyek Array
obyek array adalah satu obyek yang memungkinkan kita untuk membuat dan memanipulasi tabel, berikut ini adalah sintaks untuk membuat tabel :
var x = new Array(elemen1[, elemen2, ...]);
jika tidak ada elemen yang disebutkan dalam parameter, tabel itu akan menjadi tabel kosong pada saat pembuatannya, sebaliknya jika elemen diisi, maka isi tabel akan di inisialisasi oleh nilai dari elemen tersebut. Sebagai tambahan obyek array mempunyai dua karakteristik property yaitu properti input dan length.
2.3.2 obyek Boolean
obyek boolean adalah obyek standart dari JavaScript yang memungkinkan kita untuk memanipulasi nilai nilai jenis boolean. Berikut ini adalah sintaks yang digunakan untuk membuat obyek booelan :
var x = new Boolean(parameter)
parameter bisa berupa bisa berupa satu nilai (True atau False) atau bisa juga satu ekspresi, yang mana ekspressi akan di perhitungkan sebagai nilai boolean. Jika tidak ada nilai parameter yang
dilewatkan atau nilai 0 atau string kosong atau null atau undefined atau juga NaN(Not a Number), nilai boolean akan diinisialisaikan ke False. Sebaliknya obyek boolean akan mempunyai nilai True
2.3.3 obyek date
obyek date memungkinkan kita untuk bekerja dengan semua variabel yang berhubungan dengan penanggalan dan juga manajemen waktu (durasi waktu). Sintaks sintaks untuk membuat obyek date adalah berikut ini :
• Nama_dari_obyek = new Date()
sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam saat ini.
• Nama_dari_obyek = new Date(“hari, bulan tanggal tahun jam:menit:detik”)
parameter berbentuk string dengan batas batas pemisah sepeti format diatas.
• Nama_dari_obyek = new Date(tahun, bulan, hari)
parameter adalah 3 integer yang dipisahkan oleh tanda koma
• Nama_dari_obyek = new Date(tahun, bulan, hari, jam, menit, detik[,perseribudetik]) parameter adalah 6 integer yang dipisahkan oleh tanda koma
JavaScript menyimpan tanggal dalam bentuk string yang berisi hari, bulan, tahun, jam, menit, dan detik. Meskipun demikian sangat sulit bagi kita untuk bisa mengakses satu elemen waktu diatas dengan menggunakan obyek string (sub bab 2.3.5), karena setiap elemen mempunyai ukuran yang berbeda beda.. Sebaliknya obyek date memungkinkan kita untuk mengakses dan memodifikasi satu elemen tersebut.
2.3.4 obyek math
obyek math adalah suatu obyek yang mempunyai banyak metoda dan properti untuk memanipulasi bilangan bilangan dan juga fungsi fungsi matematika. Apapaun metoda atau properti yang digunakan kita harus memulainya dengan kata Math, contohnya adalah sebagai berikut :
Math.cos(1);
2.3.5 obyek string
obyek string adalah satu obyek yang berisi beberapa metoda dan properti untuk memanipulasi
data jenis string. Obyek string sendiri hanya mempunyai satu properti yaitu properti length untuk memperoleh panjang dari variabel data string. Sintaks dari properti ini adalah sebagai berikut :
x = nama_variabel_string.length;
x = ('sembarang teks').length;
metoda dari obyek string memungkinkan kita untuk memperoleh satu potongan/bagian dari data string dan juga memodifikasinya. Berikut ini adalah tabel beberapa metoda standard dari obyek
string :
Berikut ini adalah bebrapa contoh penggunaan metoda obyek string :
var test= 'ilmu komputer' ;
• var hasil = charAt(test,6); //hasilnya 'k'
• var hasil = ("ilmu komputer").charAt(7); //hasilnya 'o'
• var hasil = charAt(test,-1); //hasilnya ''
• var hasil = test.substring(1,5); //hasilnya 'lmu k'
• var hasil = test.toUpperCase(); //hasilnya 'ILMU KOMPUTER'
3. Event
Event adalah aksi dari user yang bisa menghasilkan interaktifitas, pada kenyataannya event di dalam JavaScript adalah klik dari tombol mouse (merupakan satu satunya aksi yang dapat diatur oleh HTML). JavaScript memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode seperti lewatnya mouse pointer diatas zona tertentu, perubahan nilai, dan lain sebagainya.
Event administrator adalah yang memperbolehkan kita untuk mengasosiasikan satu aksi ke dalam sebuah event. Sintaks dari event administrator tersebut adalah sebagai berikut :
OnEvenement = "Aksi_Javascript_atau_Fungsi();"
3.1 Contoh penggunaan event
cara terbaik untuk mengerti tentang penggunaan event adalah dengan cara berlatih menulis program kecil kecilan. Sebagai inspirasi anda, mungkin anda bisa mencoba melihat source code dari beberapa halaman web, akan tetapi marilah kita tidak langsung melakukan copy & paste terhadap skrip itu dan membiasakan diri untuk menghormati hasil kerja orang lain dengan meminta ijin terlebih dahulu kepada si pembuat skrip tersebut, kecuali memang skrip tersebut tersedia secara free, seperti banyak tersedia di beberapa site yang menyediakan source code dari JavaScript.
Berikut ini kita akan mencoba satu contoh sederhana cara menampilkan kotak dialog yang berisi tulisan ‘teks anda’ (dengan tanda satu petik di depan dan di belakang kata) sesudah anda melakukan klik terhadap satu link yang mentrigger event untuk mengaktifkan kotak dialog tersebut.
onClick="window.alert(‘\’teks anda\’’);">
klik disini !
analisa skrip diatas :
• Event administrator onClick dimasukkan didalam tag links dari hiperteks
• Tujuan dari skrip ini adalah menampilkan satu kotak dialog, jadi kita tidak ingin kalau link tersebut akan membawa kita ke halaman yang lain, oleh karena itu kita masukkan kode "javascript:;" didalam atribut href untuk memberi tahu navigator kalau kita ingin tetap berada di halaman yang sedang di proses tersebut.
• Perhatikan penggunaan \’ di dalam kalimat \’teks anda\’ . tanda antislash (\) di depan tanda petik untuk memperingatkan navigator kalo dianggap sebagai karakter biasa dan bukan di intepretasi sebagai pembatas string.
Selanjutnya contoh kedua adalah contoh penggunaan event onMouseover untuk membuat menu interaktif yang akan berubah tampilan imagenya pada saat kursor mouse lewat diatasnya, kita bahkan bisa menambahkan event onMouseout untuk mengembalikan image ke asalnya pada saat kursor sudah tidak diatas image lagi. Karena di sini kita tidak bisa mencoba secara live, anda bisa mencoba sendiri di rumah dengan mengcopy paste skrip ini dan mengganti file image1.gif dan image2.gif dengan sembarang file yang anda punya .
onMouseOver="document.img_1.src='image2.gif';"
onMouseOut="document.img_1.src='image1.gif';">
analisa skrip diatas :
• Untuk bisa mengasosiasikan image dengan event tersebut, maka kita harus harus membuat image itu sebagai suatu link, sehingga kita memakai tag diantara tag dan
• Event onMouseover dan onMouseout terbatas penggunaannya untuk JavaScript versi 1.1 keatas
3.2 Event Handler
Event Handler merupakan kodekode javascript yang akan dijalankan apabila event tersebut dipicu.
Untuk menjalankan event tersebut maka digunakan sintaks :
On NamaEvent = “ kode JavaScript ”
Contoh :
OnMouseOver =”fungsi_data (a,b)”
3.3 Memanggil Event Handler
Metode pemanggilan event handler dapat menggunakan dua metode, yaitu :
1. Memanggil melalui fungsi
Event Handler dapat dijalankan dengan cara memanggil fungsi.
Sintaknya adalah :
OnNamaEvent = “namafungsi (parameter)”
3.4 Macam-Macam Event Handler
3.4.1 Event Handler onClick
• Biasanya digunakan untuk menampilkan pesan singkat jika seseorang melakukan tindakan tertentu. Dengan pesan tersebut, maka user akan tahu akibat dari tindakannya.
• Misal peringatan dengan Tombol. Penekanan dengan tombol sering digunakan untuk memberikan efek interaktif dengan user
3.4.2 Event Handler onMouseOver
Event handler onMouseOver ini gunanya untuk mengatur apa yang akan terjadi saat mouse kita
gerakkan ke atasnya.
Dengan menggunakan onMouseOver juga dapat mengubah property lain. Misalnya akan mengubah
warna latar dokumen, yaitu dengan menggunakan document.bgColor .
Untuk menggabung dua efek di atas, perubahan window.status dan document.bgColor - hmm tidak
terlalu sulit, cukup memisahkan kedua efek tersebut dengan koma (,) seperti script berikut.
Perintah onMouseOver yang kedua berada di antara tanda petik (") untuk membuat efeknya terjadi
secara simultan.
3.4.3 Event Handler onMouseOver & onMouseOut
3.4.5 Event Handler onSelect dan onSubmit
1. Event handler ini bekerja saat user memilih (memblok) isi kotak.
2. Event Handler onSubmit, bekerja saat user mengklik tombol submit.
4. Tipe Data Java Script
• Bilangan bulat atau desimal
– Integer(bilangan bulat), basis-nya :
• basis desimal : integer di tuliskan dalam urutan unit bilangan (dari 0 sampai dengan 9), permulaan bilangan tidak boleh dimulai oleh angka 0
• basis heksadesimal : dituliskan dalam urutan unit bilangan dari 0 sampai dengan 9 atau urutan huruf dari A sampai dengan F (atau a sampai dengan f), permulaan bilangan dimulai oleh 0x atau 0X
• basis oktal : dituliskan dalam urutan unit angka dari 0 sampai dengan 7, permulaan bilangan dimulai dengan angka 0
– Float (bilangan desimal): bilangan yang disebut juga bilangan pecahan atau bilangan yang dituliskan dengan tanda koma.
• bilangan bulat desimal : 895
• bilangan dengan tanda koma : 895,12
• bilangan pembagian : 27/11
• bilangan eksponensial : bilangan dengan tanda koma , kemudian diikuti oleh huruf e(atau E), kemudian diikuti oleh bilangan bulat yang artinya pangkat dari bilangan 10 (+ atau -, pangkat postitif atau negatif), contoh :
var a = 2.75e-2;
var b = 35.8E+10;
var c = .25e-2;
– String, adalah kumpulan dari karakter, kita deklarasikan variabel string menggunakan tanda (') atau (").
• Ada beberapa karakter spesial yang bisa kita gunakan untuk mensimulasikan bagian dari karakter yang tidak terlihat (non visual) dan juga untuk menghindarkan kemungkinan navigator "mengalami kebingungan" dalam membedakan antara string dan skripnya sendiri, karakter spesial ini menggunakan simbol antislash (\), beberapa contoh karakter spesial tersebut :
• \n : kembali ke baris awal
• \r : menekan tombol ENTER
• \t : tab
• \" : tanda petik ganda
• \' : tanda petik tunggal
• \\ : karakter antislash
Contoh :
var a = "Hallo";
var b = 'Sampai Ketemu Lagi !';
Judul = "Ada apa di dalam \"c:\\windows\\\"";
– Booleans, adalah satu variabel khusus yang berguna untuk mengevalua si suatu kondisi tertentu, oleh karenanya boolean mempunyai dua nilai :
• True : diwakili oleh nilai 1
• False : diwakili oleh nilai 0
5. CLASS
User-Defined Classes
1. Dapat mendefinisikan class baru, tetapi dengan notasi yang awkward
* Pendefinisian sederhana sebuah fungsi yang bertindak sebagai constructor
* Menentukan data fields & methods menggunakan this
* Tidak ada data yang disembunyikan : tidak dapat melindungi data atau methods
2. Object dan Class
• Dapat menggunakan Notasi Literal
• Objek dat dibuat menggunakan notasi “literal” pada form
{ field1:val1, field2:val2, …, fieldN:valN }
• Sebagai contoh, berikut ini memberikan nilai equivalent pada object1 dan object2
var object1 = new Object();
object1.x =3;
object1.x =4;
object1.x =5;
object2.x = { x:3, y:4, z:5};
3. Methods adalah Function-Valued Properties
• Tidak ada sintaks khusus untuk mendefinisikan method dari object
• Berikutnya adalah property yang dimiliki oleh document
5.1 Date Class
• String & Array adalah class yg paling sering digunakan pada JavaScript
§ special purpose classes & objects juga ada
• Date class dapat digunakan untuk mengakses date dan time
§ Utk membuat Date object, gunakan new & supply year/month/day/… yg diinginkan
today = new Date(); // sets to current date & time
newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM
o methods yang termasuk adalah :
newYear.getYear()
newYear.getMonth()
newYear.getDay() dapat mengakses komponen
newYear.getHours() individual dari sebuah date
newYear.getMinutes()
newYear.getSeconds()
newYear.getMilliseconds()
