MAKALAH JAVASCRIPT

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. !emudian se"alan dengan sedang giatnya ker"asama antara Netscape dan Sun #pengembang bahasa pemrograman Java $ pada masa itu maka Netscape memberikan nama JavaScript kepada bahasa tersebut pada tanggal % desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai Jscript di browser &nternet '(plorer ). Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya ber"alan pada suatu dokumen *+,- sepan"ang se"arah internet bahasa ini adalah bahasa skrip pertama untuk web. .ahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa *+,- dengan mengi"inkan 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 sa"a terselip di dalam dokumen *+,-. Javascript "uga tidak memerlukan kompilator atau penter"emah khusus untuk men"alankannya #pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut$. -ain halnya dengan bahasa /Java0 #dengan mana Java1cript selalu di banding bandingkan$ yang memerlukan kompilator khusus untuk menter"emahkannya di sisi user2klien. Javascript merupakan suatu bahasa yang perkembangannya lambat di bandingkan dengan Java yang berkembang sangat cepat. 3i Javascript kita tidak mungkin menyembunyikan kode skrip yang kita tulis kode langsung di tulis di dalam dokumen *+,- dan sangat mudah terlihat sedangkan di Java kode sudah berbentuk setengah terkompilasi #dalam bentuk applet$ dan tidak mungkin terlihat dari dalam dokumen *+,- satu mesin virtual di sisi user yang bertanggung "awab untuk menter"emahkan program di dalam applet tersebut setiap kali halaman *+,- yang memuat applet tersebut dipanggil oleh browser. 3ibandingkan dengan applet "ava yang cukup lambat dibuka oleh browser bisa kita katakan bahwa Javascript cukup cepat di panggil#di load$ oleh navigator.

Java1cript sendiri merupakan bahasa yang mudah dipahami dalam artian diperlukan skill novice atau dasar untuk mengerti bahasa ini "ika anda sudah terbiasa dan mengenal konsep bahasa pemrograman visual maupun Java ataupun 4 akan sangat mudah untuk memahami konsep Javascript. Java1cript 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. 3an yang terakhir seperti bahasa Java ataupun 4 setiap instruksi diakhiri dengan karakter titik koma #5$.

1.1

entu! S!rip "ari Ja#ascript

1krip dari Java1cript terletak di dalam dokumen *+,-. !ode tersebut tidak akan terlihat dari dalam "endela navigator anda karena diantara tag #kalau anda mengerti *+,- pasti tahu dengan istilah ini$ tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari Java1cript. 4ontoh dari skrip yang menun"ukkan bahwa skrip tersebut adalah skrip dari Java1cript adalah sebagai berikut 6 7148&P+ language9:Javascript:; letakkan script anda disini 72148&P+;

1. $ Me%&eri!an !o%entar '(an %e%&uat s!rip ti(a! tere!se!usi)

1ering kali pada navigator versi lama sebelum adanya Java1cript tidak mengenal tag tersebut dan akan melewatkannya untuk di baca. 4ontoh kode diatas tidak akan terlihat di navigator kita akan tetapi dia akan menampilkan "endela peringatan #berupa kotak dialog$ karena skrip tersebut tidak lengkap dan akan merusak dokumen *+,- yang sudah kita buat dengan bagusnya. <ntuk 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. 4ontohnya adalah sebagai berikut 6 7148&P+ language9:Javascript:; *+,, letakkan script anda disini
2

-- ,,. 72148&P+; 1eperti dalam banyak bahasa pemrograman lainnya sangat dian"urkan untuk menambahkan komentar komentar di dalam skrip atau kode program yang kita bikin. kegunaannya antara lain adalah 6 = ,engingatkan kita akan bagian bagian khusus di dalam skrip tersebut "ika kita ingin merubah sesuatu di dalamnya mungkin beberapa bulan kemudian dan kita sudah lupa dengan detail dan alur dari skrip tersebut. = ,embuat orang yang tidak mengerti skrip anda men"adi mengerti dengan petun"uk petun"uk yang anda bikin melalui komentar komentar kecuali anda tidak mau mensharing program yang anda miliki .. <ntuk menulis komentar di Java1cript kita bisa menggunakan cara yang sama dengan aturan yang ada di bahasa 424>> ataupun Java. = <ntuk menulis komentar dalam satu baris kita gunakan karakter dobel slash. 22 semua karakter di belakang 22 tidak akan di eksekusi = <ntuk menulis komentar yang terdiri dari beberapa baris kita gunakan karakter 2? dan ?2 2? 1emua baris antara 2 tanda tersebut tidak akan di eksekusi oleh kompilator ?2 Perhatikan perbedaan tag komentar untuk bahasa HTML (diantaranya untuk menyembunyikan skrip dari beberapa browser versi lama) dan tag komentar JavaScript (untuk keperluan dokumentasi skrip)

1./ Conto0 pro1ra% Ja#aScript

Pada contoh berikut ini adalah contoh skrip Java1cript didalam suatu dokumen *+,- disini kita akan membuat satu program untuk menampilkan satu kotak dialog #di"elaskan lebih lan"ut di bab 1@$ pada saat kita membuka dokumen *+,7*+,-; 7*'A3; 7+&+-';4ontoh Program Javascript72+&+-'; 72*'A3; 7.B3C; *SCRIPT 2an1ua1e34Ja#ascript4. *+,, a2ert'4Ha22o +4)5 -- ,,. *-SCRIPT. 72.B3C;
3

72*+,-;

1.6 Me2eta!!an Ja#aScript (a2a% (o!u%en

Ada beberapa cara untuk meletakkan kode Java1cript di dalam dokumen2halaman *+,= Men11una!an ta1 !S"#$PT% 3engan menggunakan cara ini pada saat mengakses satu halaman *+,- kita harus menunggu sampai proses pemanggilan halaman itu selesai sepenuhnya sebelum kita men"alankan program Java1cript tersebut. Proses eksekusi kode *+,- untuk menampilkan satu halaman dilakukan dari atas ke bawah semakin banyak user yang mengakses halaman ini #dan seringnya gak sabar ...$ dapat menganggu proses pemanggilan tersebut. Pada kasus dimana pemanggilan suatu fungsi Java1cript ter"adi sebelum proses pemanggilan kode Java1cript selesai dilakukan oleh navigator maka akan timbul pesan error. Bleh karena itu untuk menghindari ke"adian diatas maka pada umumnya kita meletakkan tag <SCRIPT> diantara bagian kepala dari dokumen *+,- yaitu bagian antara tag <HEAD> dan </HEAD>. Pemanggilan fungsi Java1cript #atau disebut "uga event$ diletakkan di bagian badan dokumen *+,- atau bisa kita sebut diantara tag <BOD > dan </BOD >. !eterangan tambahan di dalam tag <SCRIPT> menun"ukkan "enis bahasa yang digunakan dan versinya contohnya JavaScript! JavaScript"."!JavaScript".# untuk bahasa Java1cript atau bahasa lainnya contohnya $BScript. Jika kita ingin menggunakan beberapa versi Java1cript di dalam satu halaman *+,- #untuk menyesuaikan dengan kompatibilitas navigator$ maka kita hanya perlu meletakkan kode kode Java1cript tersebut #berdasarkan versinya$ kedalam beberapa tag <SCRIPT> dengan mencantumkan versi Java1criptnya. = Men11una!an fi2e e!stern 4ara berikutnya adalah menuliskan kode program Java1cript dalam suatu file teks dan kemudian file teks yang berisi kode Java1cript di panggil dari dalam dokumen *+,- #khusus Netscape mulai versi ) keatas$. !ode yang kita sisipkan kedalam dokumen *+,- adalah sebagai berikut 6 7148&P+ -AND<AD'9:Javascript: 1849:url2file."s:; 72148&P+; dimana url2file."s adalah adalah lokasi dan nama file yang berisi kode Java1cript "ika perintah tambahan 184 tidak disertakan maka tag 1cript akan mencari kode yang terletak di dalam tag 1cript.
4

7 Me2a2ui e#ent tertentu 'vent adalah sebutan dari satu action yang dilakukan oleh user contohnya seperti klik tombol mouse pembahasan lebih lan"ut ada di bab 5. !odenya dapat di tulis sebagai berikut 6 7tag e#entHan(2er9:kode Javascript yang akan dimasukkan:; dimana e#entHan(2er adalah nama dari event tersebut.

$.

8&9e!
Java1cript memperlakukan elemen elemen yang tampil di "endela navigator kita sebagai suatu obyek yang artinya adalah elemen yang 6 = 3iklasifikasikan berdasarkan hirarki2tingkatan khusus sehingga kita bisa mengetahui dimana letak2lokasi obyek itu sebenernya. = 3imana kita mengasosiasikan dengan kondisi atau sifat sifat khusus #properti$

/. Men(e!2arasi!an Varia&2e
contoh deklarasi variabel di Java1cript dapat kita lakukan dengan dua cara 6 = e!sp2isit 6 dengan menuliskan kata kunci var kemudian diikuti dengan nama variabel dan nilai dari variabel 6 var test = halo i%p2isit 6 dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel 6 test = halo navigator secara otomatis akan memperlakukan pernyataan itu sebagai deklarasi dari sebuah variabel. Pada navigator versi lama mungkin ter"adi kasus di mana navigator tidak mengenali pendeklarasian variabel secara implisit maka disarankan untuk menggunakan cara eksplist dalam menulis program Java1cript. .erikut ini adalah contoh pendeklarasian variabel dengan kedua cara tersebut.
<SCRIPT language="Javascript"> <! var !aria"el#u$ var !aria"el#u% = &$ !aria"el#u = %$ 'ocu(ent)*rite+!aria"el#u,!aria"el#u%-$ .. //> <.SCRIPT>

/.1 Pe2eta!an #aria&e2 '12o&a2 atau 2o!a2)

berdasarkan tempat dimana kita mendekalarasikan suatu variabel variabel bisa diakses dari seluruh bagian program atau hanya di dalam bagian tertentu dari program. Pada saat suatu variabel di deklarasikan tanpa menggunakan kata kunci var atau bisa kita sebut dengan cara i%p2isit maka variabel itu bisa di akses dari seluruh bagian program#semua fungsi di dalam program dapat memanggil dan memakai variabel ini$ dan kita sebut variabel ini sebagai #aria&e2 12o&a2. 1ebaliknya "ika kita mendeklarasikan dengan cara e!sp2isit suatu variabel Java1cript #pendeklarasian variabel dengan menggunakan kata kunci var $ maka kemungkinan pengaksesan variabel tersebut bergantung lokasi dimana dia dideklarasikan 6 Jika dia dideklarasikan dibagian awal dari skrip program yang artinya sebelum pendeklarasian semua fungsi maka semua fungsi di dalam program bisa mengakses variabel ini dan variabel ini men"adi #aria&e2 12o&a2. Jika dia deklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu maka variabel itu hanya bisa di akses dari dalam fungsi tersebut dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain dan kita sebut variabel ini men"adi #aria&e2 2o!a2

,ari kita lihat contoh berikut ini 6 7148&P+ language9:Javascript:; 7EF var a 9 125 var b 9 %5 function Perkalian3engan2#b$ G var a 9 b ? 25 return a5 H document.write#:3ua kali dari : b : adalah : Perkalian3engan2#b$$5 document.write#:Nilai dari a adalah: a$5 22 II; 72148&P+;
6

3ari contoh diatas variabel a dideklarasikan secara eksplisit di awal dari skrip program dan "uga di deklarasikan di dalam fungsi . berikut ini hasil dari program diatas. 3ua kali dari % adalah J Nilai dari a adalah 12

.erikut ini adalah contoh lain dimana variabel di deklarasikan secara implisit di dalam suatu fungsi 6 <SCRIPT language="Javascript"> <! var a = 0%$ var " = 1$ 2unction Per3alian4engan%+"- 5 a = " , %$ return a$ 6 'ocu(ent)*rite+"4ua 3ali 'ari "7"7" a'alah "7Per3alian4engan%+"--$ 'ocu(ent)*rite+"8ilai 'ari a a'alah"7a-$ .. //> <.SCRIPT> .erikut ini hasil dari program diatas. 4ua 3ali 'ari 1 a'alah 9 8ilai 'ari a a'alah 9

3.2 Jenis-jenis data dari variable

3i Java1cript kita tidak perlu mendeklarasikan "enis variabel yang akan kita gunakan sebaliknya di bahasa bahasa pemrograman yang lain #yang lebih advanced$ seperti bahasa C atau Java kita harus mendeklarasikan secara detail apakah variabel yang digunakan tersebut adalah merupakan suatu bilangan bulat #int $ bilangan desimal #%&'at$ karakter #c(ar$ dan lainnya K 1ebenarnya di Java1cript sendiri kita hanya bisa memanipulasi % "enis data yaitu 6
7

.ilangan 6 bulat atau desimal yang kita sebut sebagai inte)er atau %&'at !ata #kumpulan huruf$ 6 kita sebut strin) B''&ean 6 suatu variabel yang mempunyai dua nilai dan berfungsi untuk memeriksa suatu kondisi 6 o tr*e 6 "ika kondisinya benar o %a&se 6 "ika kondisinya salah variabel dengan "enis n*&& 6 satu kata khusus #termasuk keyword "uga$ untuk men"elaskan bahwa tidak ada data didalamnya.

/./ Kon#ersi :enis #aria&2e

,eskipun Java1cript memungkinkan pengaturan perubahan "enis variabel secara transparan kadang kadang kita perlu "uga untuk melakukan konversi "enis variabel secara paksa. Ada 2 fungsi dasar yang memungkinkan merubah "enis variabel yang dilewatkan dengan parameter tertentu 6 parseInt() Lungsi ini mungkinkan merubah satu variabel yang dilewatkan dengan parameter tertentu #bisa dalam bentuk string ataupun dalam bentuk bilangan dalam basis yang disebutkan di parameter kedua$ men"adi bilangan bulat. 1intaksnya adalah sebagai berikut 6 parseInt+string:7 "asis;-$ Agar supaya fungsi parse&nt#$ mengembalikan nilai bilangan bulat maka parameter yang dilewatkan harus dimulai dengan karakter bilangan M@I9N prefiks he(adesimal @( dan2atau karakter > I e dan '. 1elain daripada itu maka fungsi parseInt+, akan mengembalikan nilai -a- +-'t a -*./er,. Jika karakter berikutnya tidak valid maka dia akan diabaikan oleh fungsi parseInt+,! dan akan ditampilkan terpotong "ika di bagian depan karakter valid dan bagian belakang karakter tidak valid. .erikut ini salah satu contoh penggunaan fungsi parse&nt#$ 6 var a = "0%&"$ var " = "1<="$ 'ocu(ent)*rite+a>"7"<?R>"-$ .. hasil 0%&1<= 'ocu(ent)*rite+parseInt+a->parseInt+"-7"<?R>"-$ .. hasil <@A parseFloat() Adalah satu fungsi inti dari Java1cript yang memungkinkan merubah variabel yang dilewatkan dengan parameter tertentu men"adi bilangan decimal.

6. Ta&e2
+abel di dalam "avascript adalah satu variabel yang dapat berisi banyak data yang independent dengan indeks berdasarkan nomer urut dengan indeks ini pula memungkinkan kita untuk mengakses data yang disimpan di lokasi tertentu. Ada beberapa cara untuk membuat tabel di dalam Java1cript 6 var Ta"el#u = :"'ata 0"7 "'ata %"7 "'ata &"7 "'ata 1";$ var Ta"el#u = ne* BrraC+"'ata 0"7 "'ata %"7 "'ata &"7 "'ata 1"-$ Pengaksesan data atau elemen di dalam tabel dapat dilakukan dengan menuliskan nama tabel diikuti tanda kurung yang berisi indeks dari elemen. var Ta"el#u = :"?uaCa"7 "Dari(au"7 "EaFah"7 "Singa"7 "Jerapah"7 "Ge"ra";$ 'ocu(ent)*rite+"ele(en 3e 1 'ari ta"el a'alah ">Ta"el#u:&;-$ ..hasil "ele(en 3e 1 'ari ta"el a'alah Singa"

;. E#ent
'vent adalah aksi dari user yang bisa menghasilkan interaktifitas pada kenyataannya event di dalam Java1cript adalah klik dari tombol mouse #merupakan satu satunya aksi yang dapat diatur oleh *+,-$. Java1cript memungkinkan mengasosiasikan event dengan beberapa fungsi dari metode seperti lewatnya mouse pointer diatas Oona tertentu perubahan nilai dan lain sebagainya.
.erikut ini beberapa kode yang harus dimasukkan ke dalam tag event administrator untuk menghasilkan aksi tertentu.

E#ent
Abort (onAbort) Blur (onBlur) Change (on$ ange) Click (on$li%k)

Keteran1an
terjadi pada saat user mengagalkan proses download image terjadi ketika elemen ke ilangan !okus" artin#a user melakukan klik diluar elemen itu" terjadi pada saat user memodi!ikasi isi dari data dalam satu !ield data terjadi pada saat user melakukan klik mouse ter adap satu elemen #ang ber ubungan dengan e&ent terjadi pada saat user melakukan klik dua kali pada satu elemen #ang ber ubungan e&ent" elemen bisa berupa satu iperlink atau elemen dari satu !orm( )&ent ini an#a mensupport *a&a+%ript &er 1(2
,

Dblclick (on'bl%li%k)

keatas Dragdrop (on'ragdrop) terjadi pada saat user melakukan drag dan drop elemen di dalam na&igator( -an#a mensupport *a&a+%ript&er 1(2 keatas mun%ul ketika error pada saat loading alaman( -an#a support *a&a+%ript &er 1(1 keatas

Error (on)rror)

;.1 Conto0 pen11unaan e#ent

.erikut ini kita akan mencoba satu contoh sederhana cara menampilkan kotak dialog yang berisi tulisan <te!s an(a= #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. <ht(l> <hea'> <title>He("u3a 3ota3 'ialog pa'a saat (elalu3an 3li3 (ouse 'i satu lin3<.title> <.hea'> <"o'C> <a href="javascript:;" onClick="window.alert( !teks anda !!);"" klik disini #<$a" <."o'C> <.ht(l> analisa skrip diatas 6 'vent administrator 'nC&ic0 dimasukkan didalam tag links dari hiperteks 7a href9K.; +u"uan dari skrip ini adalah menampilkan satu kotak dialog "adi kita tidak ingin kalau link tersebut akan membawa kita ke halaman yang lain oleh karena itu kita masukkan kode 12avascript341 didalam atribut (re% 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 #P$ di depan tanda petik untuk memperingatkan navigator kalo dianggap sebagai karakter biasa dan bukan di intepretasi sebagai pembatas string.

1elan"utnya contoh kedua adalah contoh penggunaan event 'n5'*se'ver untuk membuat menu interaktif yang akan berubah tampilan imagenya pada saat kursor mouse lewat diatasnya kita bahkan bisa menambahkan event 'n5'*se'*t untuk
1.

mengembalikan image ke asalnya pada saat kursor sudah tidak diatas image lagi. !arena 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 . <ht(l> <hea'> <title>He(o'i2i3asi i(age pa'a saat 3ursor (ouse "ergera3 'iatas i(age terse"ut<.title> <.hea'> <"o'C> <a href="javascript:;" on%o&se'ver="doc&(ent.i()*+.src=,i(a)e-.)if,;" on%o&se'&t="doc&(ent.i()*+.src=,i(a)e+.)if,;"" <i() na(e="i()*+" src="i(a)e+.)if"" <$a" <."o'C> <.ht(l>

>. 8perator
Bperator adalah simbol yang memungkinkan kita untuk memanipulasi variabel dengan kata lain melakukan operasi operasi mengevaluasi dan lain lainnya. Ada beberapa "enis operator 6 8perator Pen10itun1an 'Ca2cu2ation) Bperator penghitungan memungkinkan kita untuk memodifikasi nilai dari variabel secara matematika. Bperatornya meliputi 6 > # Pen"umlahan $ I # Pengurangan $ ? # Perkalian $ 2 # Pembagian $ 9 # Afektasi Nilai $ Q #,odulo $ 8perator Afe!tasi Bperator ini memungkinkan kita untuk menyederhanakan operasi penambahan nilai dalam satu variabel dan menyimpan hasilnya di dalam variabel itu sendiri. Bperasi ini biasanya ditulis dengan cara berikut 6 (9(>2 dengan menggunakan operator afektasi operasi tersebut bisa dituliskan men"adi (>92 dan "ika nilai awal (9R maka nilai akhir ( men"adi 9. 8perator In!re%entasi
Bperator ini memungkinkan kita untuk menambahkan ataupun mengurangi per unit dari satu variabel. Bperator ini sangat berguna dalam struktur pemrograman sistem -oop yang membutuhkan penghitung #variabel yang nilainya naik2turun satu persatu $ . Bperator dengan model (>> bisa mengantikan notasi (9(>1 atau (>91

8perator Lo1i!a ' oo2eans) ?? '8R)@ AA 'AN")@ + 'N8N)

PENBTBP

11

!ami menyadari sebagai manusia makalah ini ditulis bukan tanpa kealpaan oleh karena itu demi perbaikan isinya sangat kami harapkan adanya saran serta kritik yang bersifat menyempurnakan makalah ini. *arapan kami semoga makalah Javascript ini dapat membantu menambah pengetahuan dan wawasan kita. 3an dapat membantu dalam mempela"ari dan memehami materi tentang Javascript. Akhir kata kami mengucapkan terima kasih atas segala bantuan dan support dari semua pihak yang terkait dalam pembuatan makalah ini.

12