pemrograman cgi-script with ssi server, java applet€¦ · dalam dunia pemrograman, sudah pasti...

88
Mengenal JavaScript Universitas Komputer Indonesia © 2004 Taryana - 0818426975 1.1 Pemrograman CGI-Script With SSI Server, Java Applet © 1998-2004 By Taryana S Universitas Komputer Indonesia PDF Creator - PDF4Free v2.0 http://www.pdf4free.com

Upload: others

Post on 25-Nov-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

11

Pemrograman CGI-Script WithSSI Server Java Applet

copy 1998-2004 By Taryana SUniversitas Komputer Indonesia

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

12

Daftar Isi

Bab 1 JavaScriptJava Script adalah bahasa script yang berdasar pada objek yang memperbolehkanpemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumenHTML Dimana objek tersebut dapat berupa suatu window frame URL dokumenform button atau item yang lain Yang semuanya itu mempunyai properti yangsaling berhubungan dengannya dan masing-masing memiliki nama lokasi warnanilai dan atribut lain

Bab 2 Tipe Data amp VariabelDalam dunia pemrograman sudah pasti yang namanya variabel akan seringberhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang AndainginkanDalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional) artinyaAnda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilai padasuatu variabel maka dalam JavaScript dianggap bahwa Anda telah mendeklarasikanvariabel tersebut

Bab 3 Objek Untuk Memasukan DataDalam Halaman HTML dimungkinkan juga untuk memasukan data dari keyboard(user) yang mengakses ke halaman Anda Contoh aplikasi seperti ini banyakditerapkan dalam Web Interaktif dengan menggunakan CGIUntuk memasukan data dapat digunakan objek text yang telah disediakan dengancontoh sintak seperti berikut

Bab 4 Aliran ProgramSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

Bab 5 FungsiDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan fungsiFungsi merupakan bagian program yang dapat melakukan tugas tertentu Beberapafungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsi parseFloatyang sudah digunakan sebelumnya

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

13

Bab 6 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada beberapabentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsbSemua kejadian pada JavaScript dapat Anda tangani dengan menentukan kejadiannya Biasanyapenanganan kejadian adalah sebuah fungsi tetapi pada beberapa kasus Anda bisa menuliskanpernyataan-pernyataan secara langsung

Bab 7 Mendefinisikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata kunci yang digunakan untukmendefinisikan fungsi yaitu function Sebagai contoh disini akan didefinisikan objek mahasiswa yangterdiri dari tiga properti yaitu namaalamatjurusan Untuk itu didefinisikan fungsi seperti contohberikut

Bab 8 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-masingelemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

Bab 9 FramePada saat ini jika Anda menjelajahi Web dengan menggunakan browser yang mampumenampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaan framehampir disetiap Web site yang Anda kunjungi

Bab 10 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script adalahsuatu program yang berjalan di Web Server dan Web Browser Banyak hal yangdapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatu databasemelakukan perhitungan atau hanya sekedar menampilkan informasi seperti tanggaldan waktu saat ini

Bab 11 Integrasi Java dengan JavaScriptJava merupakan sebuah bahasa pemrograman komputer berbasis objek orientedprogramming Java diciptakan setelah C++ dan didesain sedemikian sehinggaukurannya kecil sederhana dan portable Program yang dihasilkan dengan bahasaJava dapat berupa applet (aplikasi kecil yang jalan diatas web browser) maupunberupa aplikasi mandiri yang dijalankan dengan program Java

Bab 12 Applet Headline FactoryAnda akan bisa dengan mudah membuat sebuah applet Java yang cukup memadaiuntuk dipresentasikan Tanpa harus menjadi seorang programer Anda akan bisamenyisipkan sebuah applet Java yang akan berjalan secara otomatis pada saat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

14

halaman Web Anda dibuka Dengan applet ini halaman Web Anda akan tampaklebih indah dan menarik

Bab 13 Applet Marque WizardDengan Applet Marquee Wizard Anda memiliki kemampuan untuk memperindahhalaman Web Anda Software ini akan mempermudah pembuatan marquee (teksmaupun citra berjalan) dalam bahasa Java tanpa harus bersusah payah mempelajaripemrograman Java

Bab 14 Applet Navigation FactoryAnda akan dengan mudah membuat menubar dan aplikasi lainnya yang berhubungandengan link ke document atau ke alamat URL lain di Internet

Bab 15 Applet Password WizardSoftware ini akan membantu Anda untuk membuat username dan passwords untukmelindungi halaman Web Anda Tanpa latar belakang pemrograman Javaperlindungan terhadap halaman Web yang Anda buat akan bisa dilakukan denganmudah

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

15

11 Java ScriptJava Script adalah bahasa script yang berdasar pada objek yang

memperbolehkan pemakai untuk mengendalikan banyak aspekinteraksi pemakai pada suatu dokumen HTML Dimana objektersebut dapat berupa suatu window frame URL dokumen formbutton atau item yang lain Yang semuanya itu mempunyai propertiyang saling berhubungan dengannya dan masing-masingmemiliki nama lokasi warna nilai dan atribut lain

Sesuai dengan perkembangan Worl Wide Web yang sangat pesatmenyebabkan munculnya banyak home page dengan halaman-halaman yang sangatmenarik Halaman web yang dulunya hanya berupa teks dan gambar saja saat inimenjadi sesuatu yang interaktif dan cerdas

Berbicara tentang Web tidak akan lepas dari HTML bahasa yang digunakanuntuk membuat halaman web HTML merupakan bahasa yang sangat mudahdipelajari Anda tidak perlu mempunyai latar belakang pemrograman untukmenggunakannya Namun untuk membuat halaman web yang interaktif HTML sajatidak cukup

Dua hal yang membuat web menjadi media interaktif adalah form dan CGI(Common Gateway Interface) Script Dengan form dan CGI pembaca tidak hanyamenerima informasi saja tetapi sebaliknya juga bisa mengirimkan informasi kepadaAnda Ini akan menimbulkan komunikasi dua arah dan membuat web menjadiInteraktif Form merupakan sarana yang dipakai pembaca untuk memasukaninformasinya sedangkan CGI Script bertugas untuk memproses informasi tersebutKarena eratnya hubungan antara form dan CGI script maka keduanya menjadi sangatperlu untuk anda pelajari

12 Keperluan Java ScriptUntuk mempelajari pemrograman Java Script ada dua piranti yang

diperlukan yaitu browser dan teks editorTeks editor adalah sebuah pengolah kata (word processor) yang

menghasilkan file dalam format ASCII murni Bila Anda adalah pengguna Windows9598 atau Windows NT Anda bisa menggunakan Notepad atau Wordpad

Browser web yang akan Anda gunakan harus mendukung Java Script Andadapat menggunakan Netscape Navigator atau Internet Explorer Dalam komputerAnda Anda bisa memasang kedua perangkat Browser ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

16

Gambar 11 Time amp Date dengan JavaScript

Program JavaScript dituliskan pada file HTML dengan menggunakan tagkontainer ltSCRIPTgt Dengan kata lain Anda tidak perlu menuliskan programJavaScript pada file terpisah

Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawalidengan ltNAMA_TAGgt dan diakhiri dengan ltNAMA_TAGgtContoh

ltHTMLgtltHTMLgtltBODYgtltBODYgtltHEADgtltHEADgt

Tag kontainer ltSCRIPTgt mempunyai dua atribut tetapi yang harus Anda isikanhanya satu atribut yaitu Language Isilah atribut language dengan ldquoJavaScriptrdquo Halini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulisadalah JavaScriptContohltSCRIPT LANGUAGE=rdquoJavaScriptrdquogt

program Anda masukan disiniltSCRIPTgt

13 Program Pertama Java ScriptPada bagian ini Anda akan membuat program untuk menampilkan pesan

sederhana kelayar monitor Program ini akan menuliskan teks ldquoHai Aku JavaScriptrdquopada jendela browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

17

Gambar 12 Menampilkan Teks

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltPREgt)documentwriteln(SELAMAT DATANG DI DUNIA JAVASCRIPT )documentwriteln(Program ini merupakan contoh sederhana menampilkan teks)documentwriteln(Dengan menggunakan JavaScript)documentwriteln(ltPREgt) --gtltscriptgtltbodygtlthtmlgt

Objek document mempunyai dua metode untuk menuliskan teks yatu writedan writeln Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan denganPascal sudah mengerti perbedaan kedua statement ini yaitu Metode write digunakanuntuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writelndigunakan untuk menulis teks dengan ganti baris

Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header ditengah jendela browser Untuk Menampilkan teks header Anda cukup menambahkanstatement ltH1gt Header pertama ltH1gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 2: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

12

Daftar Isi

Bab 1 JavaScriptJava Script adalah bahasa script yang berdasar pada objek yang memperbolehkanpemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumenHTML Dimana objek tersebut dapat berupa suatu window frame URL dokumenform button atau item yang lain Yang semuanya itu mempunyai properti yangsaling berhubungan dengannya dan masing-masing memiliki nama lokasi warnanilai dan atribut lain

Bab 2 Tipe Data amp VariabelDalam dunia pemrograman sudah pasti yang namanya variabel akan seringberhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang AndainginkanDalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional) artinyaAnda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilai padasuatu variabel maka dalam JavaScript dianggap bahwa Anda telah mendeklarasikanvariabel tersebut

Bab 3 Objek Untuk Memasukan DataDalam Halaman HTML dimungkinkan juga untuk memasukan data dari keyboard(user) yang mengakses ke halaman Anda Contoh aplikasi seperti ini banyakditerapkan dalam Web Interaktif dengan menggunakan CGIUntuk memasukan data dapat digunakan objek text yang telah disediakan dengancontoh sintak seperti berikut

Bab 4 Aliran ProgramSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

Bab 5 FungsiDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan fungsiFungsi merupakan bagian program yang dapat melakukan tugas tertentu Beberapafungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsi parseFloatyang sudah digunakan sebelumnya

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

13

Bab 6 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada beberapabentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsbSemua kejadian pada JavaScript dapat Anda tangani dengan menentukan kejadiannya Biasanyapenanganan kejadian adalah sebuah fungsi tetapi pada beberapa kasus Anda bisa menuliskanpernyataan-pernyataan secara langsung

Bab 7 Mendefinisikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata kunci yang digunakan untukmendefinisikan fungsi yaitu function Sebagai contoh disini akan didefinisikan objek mahasiswa yangterdiri dari tiga properti yaitu namaalamatjurusan Untuk itu didefinisikan fungsi seperti contohberikut

Bab 8 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-masingelemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

Bab 9 FramePada saat ini jika Anda menjelajahi Web dengan menggunakan browser yang mampumenampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaan framehampir disetiap Web site yang Anda kunjungi

Bab 10 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script adalahsuatu program yang berjalan di Web Server dan Web Browser Banyak hal yangdapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatu databasemelakukan perhitungan atau hanya sekedar menampilkan informasi seperti tanggaldan waktu saat ini

Bab 11 Integrasi Java dengan JavaScriptJava merupakan sebuah bahasa pemrograman komputer berbasis objek orientedprogramming Java diciptakan setelah C++ dan didesain sedemikian sehinggaukurannya kecil sederhana dan portable Program yang dihasilkan dengan bahasaJava dapat berupa applet (aplikasi kecil yang jalan diatas web browser) maupunberupa aplikasi mandiri yang dijalankan dengan program Java

Bab 12 Applet Headline FactoryAnda akan bisa dengan mudah membuat sebuah applet Java yang cukup memadaiuntuk dipresentasikan Tanpa harus menjadi seorang programer Anda akan bisamenyisipkan sebuah applet Java yang akan berjalan secara otomatis pada saat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

14

halaman Web Anda dibuka Dengan applet ini halaman Web Anda akan tampaklebih indah dan menarik

Bab 13 Applet Marque WizardDengan Applet Marquee Wizard Anda memiliki kemampuan untuk memperindahhalaman Web Anda Software ini akan mempermudah pembuatan marquee (teksmaupun citra berjalan) dalam bahasa Java tanpa harus bersusah payah mempelajaripemrograman Java

Bab 14 Applet Navigation FactoryAnda akan dengan mudah membuat menubar dan aplikasi lainnya yang berhubungandengan link ke document atau ke alamat URL lain di Internet

Bab 15 Applet Password WizardSoftware ini akan membantu Anda untuk membuat username dan passwords untukmelindungi halaman Web Anda Tanpa latar belakang pemrograman Javaperlindungan terhadap halaman Web yang Anda buat akan bisa dilakukan denganmudah

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

15

11 Java ScriptJava Script adalah bahasa script yang berdasar pada objek yang

memperbolehkan pemakai untuk mengendalikan banyak aspekinteraksi pemakai pada suatu dokumen HTML Dimana objektersebut dapat berupa suatu window frame URL dokumen formbutton atau item yang lain Yang semuanya itu mempunyai propertiyang saling berhubungan dengannya dan masing-masingmemiliki nama lokasi warna nilai dan atribut lain

Sesuai dengan perkembangan Worl Wide Web yang sangat pesatmenyebabkan munculnya banyak home page dengan halaman-halaman yang sangatmenarik Halaman web yang dulunya hanya berupa teks dan gambar saja saat inimenjadi sesuatu yang interaktif dan cerdas

Berbicara tentang Web tidak akan lepas dari HTML bahasa yang digunakanuntuk membuat halaman web HTML merupakan bahasa yang sangat mudahdipelajari Anda tidak perlu mempunyai latar belakang pemrograman untukmenggunakannya Namun untuk membuat halaman web yang interaktif HTML sajatidak cukup

Dua hal yang membuat web menjadi media interaktif adalah form dan CGI(Common Gateway Interface) Script Dengan form dan CGI pembaca tidak hanyamenerima informasi saja tetapi sebaliknya juga bisa mengirimkan informasi kepadaAnda Ini akan menimbulkan komunikasi dua arah dan membuat web menjadiInteraktif Form merupakan sarana yang dipakai pembaca untuk memasukaninformasinya sedangkan CGI Script bertugas untuk memproses informasi tersebutKarena eratnya hubungan antara form dan CGI script maka keduanya menjadi sangatperlu untuk anda pelajari

12 Keperluan Java ScriptUntuk mempelajari pemrograman Java Script ada dua piranti yang

diperlukan yaitu browser dan teks editorTeks editor adalah sebuah pengolah kata (word processor) yang

menghasilkan file dalam format ASCII murni Bila Anda adalah pengguna Windows9598 atau Windows NT Anda bisa menggunakan Notepad atau Wordpad

Browser web yang akan Anda gunakan harus mendukung Java Script Andadapat menggunakan Netscape Navigator atau Internet Explorer Dalam komputerAnda Anda bisa memasang kedua perangkat Browser ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

16

Gambar 11 Time amp Date dengan JavaScript

Program JavaScript dituliskan pada file HTML dengan menggunakan tagkontainer ltSCRIPTgt Dengan kata lain Anda tidak perlu menuliskan programJavaScript pada file terpisah

Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawalidengan ltNAMA_TAGgt dan diakhiri dengan ltNAMA_TAGgtContoh

ltHTMLgtltHTMLgtltBODYgtltBODYgtltHEADgtltHEADgt

Tag kontainer ltSCRIPTgt mempunyai dua atribut tetapi yang harus Anda isikanhanya satu atribut yaitu Language Isilah atribut language dengan ldquoJavaScriptrdquo Halini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulisadalah JavaScriptContohltSCRIPT LANGUAGE=rdquoJavaScriptrdquogt

program Anda masukan disiniltSCRIPTgt

13 Program Pertama Java ScriptPada bagian ini Anda akan membuat program untuk menampilkan pesan

sederhana kelayar monitor Program ini akan menuliskan teks ldquoHai Aku JavaScriptrdquopada jendela browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

17

Gambar 12 Menampilkan Teks

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltPREgt)documentwriteln(SELAMAT DATANG DI DUNIA JAVASCRIPT )documentwriteln(Program ini merupakan contoh sederhana menampilkan teks)documentwriteln(Dengan menggunakan JavaScript)documentwriteln(ltPREgt) --gtltscriptgtltbodygtlthtmlgt

Objek document mempunyai dua metode untuk menuliskan teks yatu writedan writeln Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan denganPascal sudah mengerti perbedaan kedua statement ini yaitu Metode write digunakanuntuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writelndigunakan untuk menulis teks dengan ganti baris

Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header ditengah jendela browser Untuk Menampilkan teks header Anda cukup menambahkanstatement ltH1gt Header pertama ltH1gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 3: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

13

Bab 6 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada beberapabentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsbSemua kejadian pada JavaScript dapat Anda tangani dengan menentukan kejadiannya Biasanyapenanganan kejadian adalah sebuah fungsi tetapi pada beberapa kasus Anda bisa menuliskanpernyataan-pernyataan secara langsung

Bab 7 Mendefinisikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata kunci yang digunakan untukmendefinisikan fungsi yaitu function Sebagai contoh disini akan didefinisikan objek mahasiswa yangterdiri dari tiga properti yaitu namaalamatjurusan Untuk itu didefinisikan fungsi seperti contohberikut

Bab 8 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-masingelemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

Bab 9 FramePada saat ini jika Anda menjelajahi Web dengan menggunakan browser yang mampumenampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaan framehampir disetiap Web site yang Anda kunjungi

Bab 10 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script adalahsuatu program yang berjalan di Web Server dan Web Browser Banyak hal yangdapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatu databasemelakukan perhitungan atau hanya sekedar menampilkan informasi seperti tanggaldan waktu saat ini

Bab 11 Integrasi Java dengan JavaScriptJava merupakan sebuah bahasa pemrograman komputer berbasis objek orientedprogramming Java diciptakan setelah C++ dan didesain sedemikian sehinggaukurannya kecil sederhana dan portable Program yang dihasilkan dengan bahasaJava dapat berupa applet (aplikasi kecil yang jalan diatas web browser) maupunberupa aplikasi mandiri yang dijalankan dengan program Java

Bab 12 Applet Headline FactoryAnda akan bisa dengan mudah membuat sebuah applet Java yang cukup memadaiuntuk dipresentasikan Tanpa harus menjadi seorang programer Anda akan bisamenyisipkan sebuah applet Java yang akan berjalan secara otomatis pada saat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

14

halaman Web Anda dibuka Dengan applet ini halaman Web Anda akan tampaklebih indah dan menarik

Bab 13 Applet Marque WizardDengan Applet Marquee Wizard Anda memiliki kemampuan untuk memperindahhalaman Web Anda Software ini akan mempermudah pembuatan marquee (teksmaupun citra berjalan) dalam bahasa Java tanpa harus bersusah payah mempelajaripemrograman Java

Bab 14 Applet Navigation FactoryAnda akan dengan mudah membuat menubar dan aplikasi lainnya yang berhubungandengan link ke document atau ke alamat URL lain di Internet

Bab 15 Applet Password WizardSoftware ini akan membantu Anda untuk membuat username dan passwords untukmelindungi halaman Web Anda Tanpa latar belakang pemrograman Javaperlindungan terhadap halaman Web yang Anda buat akan bisa dilakukan denganmudah

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

15

11 Java ScriptJava Script adalah bahasa script yang berdasar pada objek yang

memperbolehkan pemakai untuk mengendalikan banyak aspekinteraksi pemakai pada suatu dokumen HTML Dimana objektersebut dapat berupa suatu window frame URL dokumen formbutton atau item yang lain Yang semuanya itu mempunyai propertiyang saling berhubungan dengannya dan masing-masingmemiliki nama lokasi warna nilai dan atribut lain

Sesuai dengan perkembangan Worl Wide Web yang sangat pesatmenyebabkan munculnya banyak home page dengan halaman-halaman yang sangatmenarik Halaman web yang dulunya hanya berupa teks dan gambar saja saat inimenjadi sesuatu yang interaktif dan cerdas

Berbicara tentang Web tidak akan lepas dari HTML bahasa yang digunakanuntuk membuat halaman web HTML merupakan bahasa yang sangat mudahdipelajari Anda tidak perlu mempunyai latar belakang pemrograman untukmenggunakannya Namun untuk membuat halaman web yang interaktif HTML sajatidak cukup

Dua hal yang membuat web menjadi media interaktif adalah form dan CGI(Common Gateway Interface) Script Dengan form dan CGI pembaca tidak hanyamenerima informasi saja tetapi sebaliknya juga bisa mengirimkan informasi kepadaAnda Ini akan menimbulkan komunikasi dua arah dan membuat web menjadiInteraktif Form merupakan sarana yang dipakai pembaca untuk memasukaninformasinya sedangkan CGI Script bertugas untuk memproses informasi tersebutKarena eratnya hubungan antara form dan CGI script maka keduanya menjadi sangatperlu untuk anda pelajari

12 Keperluan Java ScriptUntuk mempelajari pemrograman Java Script ada dua piranti yang

diperlukan yaitu browser dan teks editorTeks editor adalah sebuah pengolah kata (word processor) yang

menghasilkan file dalam format ASCII murni Bila Anda adalah pengguna Windows9598 atau Windows NT Anda bisa menggunakan Notepad atau Wordpad

Browser web yang akan Anda gunakan harus mendukung Java Script Andadapat menggunakan Netscape Navigator atau Internet Explorer Dalam komputerAnda Anda bisa memasang kedua perangkat Browser ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

16

Gambar 11 Time amp Date dengan JavaScript

Program JavaScript dituliskan pada file HTML dengan menggunakan tagkontainer ltSCRIPTgt Dengan kata lain Anda tidak perlu menuliskan programJavaScript pada file terpisah

Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawalidengan ltNAMA_TAGgt dan diakhiri dengan ltNAMA_TAGgtContoh

ltHTMLgtltHTMLgtltBODYgtltBODYgtltHEADgtltHEADgt

Tag kontainer ltSCRIPTgt mempunyai dua atribut tetapi yang harus Anda isikanhanya satu atribut yaitu Language Isilah atribut language dengan ldquoJavaScriptrdquo Halini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulisadalah JavaScriptContohltSCRIPT LANGUAGE=rdquoJavaScriptrdquogt

program Anda masukan disiniltSCRIPTgt

13 Program Pertama Java ScriptPada bagian ini Anda akan membuat program untuk menampilkan pesan

sederhana kelayar monitor Program ini akan menuliskan teks ldquoHai Aku JavaScriptrdquopada jendela browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

17

Gambar 12 Menampilkan Teks

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltPREgt)documentwriteln(SELAMAT DATANG DI DUNIA JAVASCRIPT )documentwriteln(Program ini merupakan contoh sederhana menampilkan teks)documentwriteln(Dengan menggunakan JavaScript)documentwriteln(ltPREgt) --gtltscriptgtltbodygtlthtmlgt

Objek document mempunyai dua metode untuk menuliskan teks yatu writedan writeln Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan denganPascal sudah mengerti perbedaan kedua statement ini yaitu Metode write digunakanuntuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writelndigunakan untuk menulis teks dengan ganti baris

Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header ditengah jendela browser Untuk Menampilkan teks header Anda cukup menambahkanstatement ltH1gt Header pertama ltH1gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 4: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

14

halaman Web Anda dibuka Dengan applet ini halaman Web Anda akan tampaklebih indah dan menarik

Bab 13 Applet Marque WizardDengan Applet Marquee Wizard Anda memiliki kemampuan untuk memperindahhalaman Web Anda Software ini akan mempermudah pembuatan marquee (teksmaupun citra berjalan) dalam bahasa Java tanpa harus bersusah payah mempelajaripemrograman Java

Bab 14 Applet Navigation FactoryAnda akan dengan mudah membuat menubar dan aplikasi lainnya yang berhubungandengan link ke document atau ke alamat URL lain di Internet

Bab 15 Applet Password WizardSoftware ini akan membantu Anda untuk membuat username dan passwords untukmelindungi halaman Web Anda Tanpa latar belakang pemrograman Javaperlindungan terhadap halaman Web yang Anda buat akan bisa dilakukan denganmudah

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

15

11 Java ScriptJava Script adalah bahasa script yang berdasar pada objek yang

memperbolehkan pemakai untuk mengendalikan banyak aspekinteraksi pemakai pada suatu dokumen HTML Dimana objektersebut dapat berupa suatu window frame URL dokumen formbutton atau item yang lain Yang semuanya itu mempunyai propertiyang saling berhubungan dengannya dan masing-masingmemiliki nama lokasi warna nilai dan atribut lain

Sesuai dengan perkembangan Worl Wide Web yang sangat pesatmenyebabkan munculnya banyak home page dengan halaman-halaman yang sangatmenarik Halaman web yang dulunya hanya berupa teks dan gambar saja saat inimenjadi sesuatu yang interaktif dan cerdas

Berbicara tentang Web tidak akan lepas dari HTML bahasa yang digunakanuntuk membuat halaman web HTML merupakan bahasa yang sangat mudahdipelajari Anda tidak perlu mempunyai latar belakang pemrograman untukmenggunakannya Namun untuk membuat halaman web yang interaktif HTML sajatidak cukup

Dua hal yang membuat web menjadi media interaktif adalah form dan CGI(Common Gateway Interface) Script Dengan form dan CGI pembaca tidak hanyamenerima informasi saja tetapi sebaliknya juga bisa mengirimkan informasi kepadaAnda Ini akan menimbulkan komunikasi dua arah dan membuat web menjadiInteraktif Form merupakan sarana yang dipakai pembaca untuk memasukaninformasinya sedangkan CGI Script bertugas untuk memproses informasi tersebutKarena eratnya hubungan antara form dan CGI script maka keduanya menjadi sangatperlu untuk anda pelajari

12 Keperluan Java ScriptUntuk mempelajari pemrograman Java Script ada dua piranti yang

diperlukan yaitu browser dan teks editorTeks editor adalah sebuah pengolah kata (word processor) yang

menghasilkan file dalam format ASCII murni Bila Anda adalah pengguna Windows9598 atau Windows NT Anda bisa menggunakan Notepad atau Wordpad

Browser web yang akan Anda gunakan harus mendukung Java Script Andadapat menggunakan Netscape Navigator atau Internet Explorer Dalam komputerAnda Anda bisa memasang kedua perangkat Browser ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

16

Gambar 11 Time amp Date dengan JavaScript

Program JavaScript dituliskan pada file HTML dengan menggunakan tagkontainer ltSCRIPTgt Dengan kata lain Anda tidak perlu menuliskan programJavaScript pada file terpisah

Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawalidengan ltNAMA_TAGgt dan diakhiri dengan ltNAMA_TAGgtContoh

ltHTMLgtltHTMLgtltBODYgtltBODYgtltHEADgtltHEADgt

Tag kontainer ltSCRIPTgt mempunyai dua atribut tetapi yang harus Anda isikanhanya satu atribut yaitu Language Isilah atribut language dengan ldquoJavaScriptrdquo Halini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulisadalah JavaScriptContohltSCRIPT LANGUAGE=rdquoJavaScriptrdquogt

program Anda masukan disiniltSCRIPTgt

13 Program Pertama Java ScriptPada bagian ini Anda akan membuat program untuk menampilkan pesan

sederhana kelayar monitor Program ini akan menuliskan teks ldquoHai Aku JavaScriptrdquopada jendela browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

17

Gambar 12 Menampilkan Teks

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltPREgt)documentwriteln(SELAMAT DATANG DI DUNIA JAVASCRIPT )documentwriteln(Program ini merupakan contoh sederhana menampilkan teks)documentwriteln(Dengan menggunakan JavaScript)documentwriteln(ltPREgt) --gtltscriptgtltbodygtlthtmlgt

Objek document mempunyai dua metode untuk menuliskan teks yatu writedan writeln Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan denganPascal sudah mengerti perbedaan kedua statement ini yaitu Metode write digunakanuntuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writelndigunakan untuk menulis teks dengan ganti baris

Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header ditengah jendela browser Untuk Menampilkan teks header Anda cukup menambahkanstatement ltH1gt Header pertama ltH1gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 5: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

15

11 Java ScriptJava Script adalah bahasa script yang berdasar pada objek yang

memperbolehkan pemakai untuk mengendalikan banyak aspekinteraksi pemakai pada suatu dokumen HTML Dimana objektersebut dapat berupa suatu window frame URL dokumen formbutton atau item yang lain Yang semuanya itu mempunyai propertiyang saling berhubungan dengannya dan masing-masingmemiliki nama lokasi warna nilai dan atribut lain

Sesuai dengan perkembangan Worl Wide Web yang sangat pesatmenyebabkan munculnya banyak home page dengan halaman-halaman yang sangatmenarik Halaman web yang dulunya hanya berupa teks dan gambar saja saat inimenjadi sesuatu yang interaktif dan cerdas

Berbicara tentang Web tidak akan lepas dari HTML bahasa yang digunakanuntuk membuat halaman web HTML merupakan bahasa yang sangat mudahdipelajari Anda tidak perlu mempunyai latar belakang pemrograman untukmenggunakannya Namun untuk membuat halaman web yang interaktif HTML sajatidak cukup

Dua hal yang membuat web menjadi media interaktif adalah form dan CGI(Common Gateway Interface) Script Dengan form dan CGI pembaca tidak hanyamenerima informasi saja tetapi sebaliknya juga bisa mengirimkan informasi kepadaAnda Ini akan menimbulkan komunikasi dua arah dan membuat web menjadiInteraktif Form merupakan sarana yang dipakai pembaca untuk memasukaninformasinya sedangkan CGI Script bertugas untuk memproses informasi tersebutKarena eratnya hubungan antara form dan CGI script maka keduanya menjadi sangatperlu untuk anda pelajari

12 Keperluan Java ScriptUntuk mempelajari pemrograman Java Script ada dua piranti yang

diperlukan yaitu browser dan teks editorTeks editor adalah sebuah pengolah kata (word processor) yang

menghasilkan file dalam format ASCII murni Bila Anda adalah pengguna Windows9598 atau Windows NT Anda bisa menggunakan Notepad atau Wordpad

Browser web yang akan Anda gunakan harus mendukung Java Script Andadapat menggunakan Netscape Navigator atau Internet Explorer Dalam komputerAnda Anda bisa memasang kedua perangkat Browser ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

16

Gambar 11 Time amp Date dengan JavaScript

Program JavaScript dituliskan pada file HTML dengan menggunakan tagkontainer ltSCRIPTgt Dengan kata lain Anda tidak perlu menuliskan programJavaScript pada file terpisah

Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawalidengan ltNAMA_TAGgt dan diakhiri dengan ltNAMA_TAGgtContoh

ltHTMLgtltHTMLgtltBODYgtltBODYgtltHEADgtltHEADgt

Tag kontainer ltSCRIPTgt mempunyai dua atribut tetapi yang harus Anda isikanhanya satu atribut yaitu Language Isilah atribut language dengan ldquoJavaScriptrdquo Halini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulisadalah JavaScriptContohltSCRIPT LANGUAGE=rdquoJavaScriptrdquogt

program Anda masukan disiniltSCRIPTgt

13 Program Pertama Java ScriptPada bagian ini Anda akan membuat program untuk menampilkan pesan

sederhana kelayar monitor Program ini akan menuliskan teks ldquoHai Aku JavaScriptrdquopada jendela browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

17

Gambar 12 Menampilkan Teks

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltPREgt)documentwriteln(SELAMAT DATANG DI DUNIA JAVASCRIPT )documentwriteln(Program ini merupakan contoh sederhana menampilkan teks)documentwriteln(Dengan menggunakan JavaScript)documentwriteln(ltPREgt) --gtltscriptgtltbodygtlthtmlgt

Objek document mempunyai dua metode untuk menuliskan teks yatu writedan writeln Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan denganPascal sudah mengerti perbedaan kedua statement ini yaitu Metode write digunakanuntuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writelndigunakan untuk menulis teks dengan ganti baris

Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header ditengah jendela browser Untuk Menampilkan teks header Anda cukup menambahkanstatement ltH1gt Header pertama ltH1gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 6: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

16

Gambar 11 Time amp Date dengan JavaScript

Program JavaScript dituliskan pada file HTML dengan menggunakan tagkontainer ltSCRIPTgt Dengan kata lain Anda tidak perlu menuliskan programJavaScript pada file terpisah

Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawalidengan ltNAMA_TAGgt dan diakhiri dengan ltNAMA_TAGgtContoh

ltHTMLgtltHTMLgtltBODYgtltBODYgtltHEADgtltHEADgt

Tag kontainer ltSCRIPTgt mempunyai dua atribut tetapi yang harus Anda isikanhanya satu atribut yaitu Language Isilah atribut language dengan ldquoJavaScriptrdquo Halini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulisadalah JavaScriptContohltSCRIPT LANGUAGE=rdquoJavaScriptrdquogt

program Anda masukan disiniltSCRIPTgt

13 Program Pertama Java ScriptPada bagian ini Anda akan membuat program untuk menampilkan pesan

sederhana kelayar monitor Program ini akan menuliskan teks ldquoHai Aku JavaScriptrdquopada jendela browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

17

Gambar 12 Menampilkan Teks

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltPREgt)documentwriteln(SELAMAT DATANG DI DUNIA JAVASCRIPT )documentwriteln(Program ini merupakan contoh sederhana menampilkan teks)documentwriteln(Dengan menggunakan JavaScript)documentwriteln(ltPREgt) --gtltscriptgtltbodygtlthtmlgt

Objek document mempunyai dua metode untuk menuliskan teks yatu writedan writeln Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan denganPascal sudah mengerti perbedaan kedua statement ini yaitu Metode write digunakanuntuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writelndigunakan untuk menulis teks dengan ganti baris

Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header ditengah jendela browser Untuk Menampilkan teks header Anda cukup menambahkanstatement ltH1gt Header pertama ltH1gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 7: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

17

Gambar 12 Menampilkan Teks

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltPREgt)documentwriteln(SELAMAT DATANG DI DUNIA JAVASCRIPT )documentwriteln(Program ini merupakan contoh sederhana menampilkan teks)documentwriteln(Dengan menggunakan JavaScript)documentwriteln(ltPREgt) --gtltscriptgtltbodygtlthtmlgt

Objek document mempunyai dua metode untuk menuliskan teks yatu writedan writeln Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan denganPascal sudah mengerti perbedaan kedua statement ini yaitu Metode write digunakanuntuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writelndigunakan untuk menulis teks dengan ganti baris

Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header ditengah jendela browser Untuk Menampilkan teks header Anda cukup menambahkanstatement ltH1gt Header pertama ltH1gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 8: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

18

Gambar 13 Teks Header Pada JavaScript

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtProgram Pertamalttitlegtltheadgtltbody bgcolor=FFFFFFgtltscript language=JavaScriptgtlt-- mencegah browser lama menampilkan Java Scriptdocumentwriteln(ltCENTERgt)documentwriteln(ltH1gtUNIVERSITAS KOMPUTER INDONESIA ltH1gt)documentwriteln(ltH2gtJLDIPATIUKUR 112 BANDUNGltH2gt)documentwriteln(ltCENTERgt) akhir java --gtltscriptgtltbodygtlthtmlgt

14 KomentarSama seperti bahasa pemrograman yang lainnya JavaScript juga

menyediakan fasilitas untuk menuliskan komentar komentar ini beguna bila nantinyaAnda atau orang lain membaca suatu program

Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitudengan menuliskan komentar setelah tanda garis miring dua kali contoh

ini komentaratau ini komentar juga

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 9: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

19

21 Variabel dalam Java ScriptDalam dunia pemrograman sudah pasti yang namanya variabel akan sering

berhubungan dengan Anda jadi bersifat wajib Variabel berguna untuk menyimpandata Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Andainginkan

Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional)artinya Anda boleh mendeklarasikan atau tidak no problem Jika Anda memberi nilaipada suatu variabel maka dalam JavaScript dianggap bahwa Anda telahmendeklarasikan variabel tersebutContohNama = rdquoMirawati RandanirdquoX = 1998Y = 2351979Untuk mendeklarasikan secara explisit tulislaah variabel tersebut dengan didahuluikata kunci varContohvar namavar nama=rdquoMirawati Randanirdquovar X = 1998var YUntuk mendeklarasikan beberapa variabel dalam satu baris dapat dilakukan denganmenuliskan seperti berikutvar ABC

22 Tipe DataTidak seperti bahasa pemrograman lainnya JavaScript tidak mempunyai tipe

data secara explisit Hal ini dapat dilihat dari beberapa contoh yang telah disajikansebelumnya Anda mendeklarasikan variabel tapi tidak menentukan tipenya

Meskipun JavaScript tidak mempunyai tipe data explisit JavaScriptmempunyai tipe data Implisit Ada empat macam tipe data implisit yang dimilikiJavaScript yaitubull Numerik seperti 2351978 2003948314 100 dsbbull String seperti ldquoHalordquo ldquoMeirdquo ldquoJulirdquo ldquoAh Kamurdquo ldquoJavaScriptrdquo dsbbull Boolean hanya bernilai true atau falsebull Null yaitu variabel yang tidak diinisialisasi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 10: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

110

23 Tipe NumerikPada dasarnya JavaScript hanya mengenal dua macam tipe numerik yaitu

bilangan bulat dan bilangan realUntuk bilangan bulat Anda bisa merepresentasikan dengan basis desimal oktal atauheksadesimalContoh

var A = 100var A=0x2F

Untuk pendeklarasian tipe bilangan real Anda bisa menggunakan tanda titik ataunotasi ilmiah (notasi E)Contoh

var a = 123567var b = 1234567E+3

24 Tipe StringUntuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan

string diantara tanda tunggal (lsquo) atau tanda petik ganda (rdquo)Contohvar A = lsquoIni pendeklarasian Stringrsquovar C = ldquoIni juga string ldquo

25 Tipe BooleanTipe Boolean hanya mempunyai nilai True atau false Tipe ini biasanya

digunakan untuk mengecek suatu kondisi atau keadaanContohVar X = (Ygt90)

Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akanbernilai True

26 Tipe NullTipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal(inisialisasi)

27 OperatorOperator pada JavaScript dibagi menjadi enam yaitubull Aritmetikbull Pemberian nilai (Assign)bull Pemanipulasian bit (bitwise)bull Pembandingbull Logikabull String

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 11: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

111

28 Operator AritmetikOperator ini digunakan untuk operan bertipe numerik Ada dua macam

operator aritmetik yaitu operator numerik tunggal dan operator aritmetik binerPerbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan

Operator TunggalBiner Keterangan+--++--

BinerBinerBinerBinerBinerTunggalTunggalTunggal

PenjumlahanPenguranganPerkalianPembagianModulusNegasiPenambahan dengan SatuPengurangan dengan Satu

29 Operator Pemberian NilaiDigunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu

operanOperator Keterangan Contoh Exuivalen=+=-====amp=|=

Sama denganDitambah denganDikurangi denganDikalikan denganDibagi denganModulus denganBit AND denganBit OR dengan

X=YX+=YX-=YX=YX=YX=YXamp=YX|=Y

X=X+YX=X-YX=XYX=XYX=XYX=XampYX=X|Y

210 Operasi Pemanipulasi BitOpeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe

bilangan bulat

Operator Keteranganamp|^~ltltgtgtgtgtgt

Bit ANDBit ORBit XORBit NOTGeser ke kiriGeser ke kananGeser kekakan dengan diisi nol

Contohvar A = 12 A = 1100b

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 12: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

112

var B = 10 B = 1010bvar C = A amp B

maka akan dihasilkan bilangan seperti berikut1100b1010b AND1000b

var A = 12var C = A ltlt 2var D = Agtgt1maka variabel C akan bernilai 48 (0011 0000bvariabel D akan bernilai 6 (0110b)

211 Operator PembandingDigunakan untuk membandingkan dua buah operan Operan yang dikenai

operator ini dapat bertipe string numerik maupun ekspresi lainOperator Keterangan===gtltgt=lt=

Sama denganTidak sama denganLebih besarLebih kecilLebih bersar atau sama denganLebih kecil atau sama dengan

212 Operator LogikaSesuai namanya operator ini digunakaan untuk mengoperasika operan yang

bertipe booleanOperator Keteranganampamp||

Operator logika ANDOperator logika OROperator logika NOT

Contohvar A = truevar B = falsevar C = A ampamp B falsevar D = A || B truevar E = A false

213 Operator StringSelain operator pembanding operan bertipe string pada JavaScript juga

mengenal satu operator lagi yang dinamakan penggabungan Operator ini digunakanuntuk menggabungkan beberapa string menjadi sebuah string yang lebih panjangContohNama = ldquoJavardquo + Scriptrdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 13: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

113

Akan menghasilkan ldquoJavaScriptrdquo pada variabel Nama

Gambar 21 Operasi Aritmetika

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtOperasi Aritmetiklttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtOperasi Aritmetika lth1gt)var A = 100var B = 200var C = 300var D = 400var E = A + Bdocumentwriteln(100 + 200 = + E)E = B + Cdocumentwriteln(200 + 300 = + E)

E = C + Ddocumentwriteln( 300 + 400 = + E)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 14: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

114

214 Memasukan DataUntuk memasukan data dari keyboard dapat dilakukan dengan menggunakan

perintah input

Gambar 22 Memasukan Data

Listing Program Java ScriptlthtmlgtltheadgtlttitlegtMemasukan Bilangan lttitlegtltheadgtltbodygtltpgtltscript language=JavaScriptgtlt--function evTekan()var Bil1 = parseFloat(documentfmFormBilangan1value)

if (isNaN (Bil1))Bil1=00

var Bil2 = parseFloat(documentfmFormBilangan2value)

if (isNaN (Bil2))Bil2=00

var Hasil=Bil1+Bil2alert (Hasil Penjumlahan = + Hasil)

--gtltscriptgtltpgt

ltform name=fmFormgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 15: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

115

lth1gtltbrgtMemasukan Data Dari Keyboardlth1gtltpregtBilangan pertamaltinput type=text size=11name=Bilangan1gtBilangan Kedua ltinput type=text size=20name=Bilangan2gtltpregtltpgtltinput type=button value=Jumlahkanonclick=evTekan()gt

ltinput type=reset value=Resetgtltpgtltformgtltbodygtlthtmlgt

LatihanDengan menggunakan JavaScript buatlah halaman seperti berikut

Gambar 23 Output Jika tanda + (positif) ditekan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 16: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

116

Gambar 24 Output Jika tanda - (negatif) ditekan

31 Objek TextDalam Halaman HTML dimungkinkan juga untuk memasukan data dari

keyboard (user) yang mengakses ke halaman Anda Contoh aplikasi seperti inibanyak diterapkan dalam Web Interaktif dengan menggunakan CGI

Untuk memasukan data dapat digunakan objek text yang telah disediakandengan contoh sintak seperti berikutltPREgt

MasukanNama ltinput type=text size=13 name=NamagtAlamat ltinput type=text size=20 name=Alamatgt

ltPREgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 17: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

117

Gambar 31 Memasukan Data dengan Text Objek

32 Objek RadioObjek radio menyimpan informasi tentang tombol radio Karena selalu berupa

array untuk mengakses satu tombol radio digunakan radio[indeks] Disamping ituobjek radio juga mempunyani nilai True jika dipilih dan False jika tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 18: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

118

Gambar 32 Objek Radio

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--

function radio_box(form)

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria alert(rsquo Anda adalah seorang rsquo +ket)

--gtltscriptgt

lth1gtUsing Radio objectlth1gt

ltformgtltpgtltinput type=radio name=wanita value=wanitagt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=radio_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgtJika di Click rombol radio tersebut maka akan ditampilkan output seperti gambarberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 19: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

119

Gambar 33 Aplikasi Objek Radio33 Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupakotak cek Penggunaanya hampir sama dengan objek Radio

Gambar 34 Objek Checkbox

Program JavaScriptlthtmlgtltheadgtlttitlegtUsing checkbox objectlttitlegtltheadgtltbody bgcolor=00FFFFgtltscript language=JavaScriptgtlt--function check_box(form)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 20: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

120

var ket=if (formwanitachecked == true)

ket=Wanita

else

ket= Pria

alert(Anda adalah seorang +ket)

--gtltscriptgt

lth1gtUsing Checkbox objectlth1gt

ltformgtltpgtltinput type=checkbox name=wanita value=ONgt

Wanita ltpgtlthrgtltpgtltinput type=button value=CONFIRMonclick=check_box(thisform)gt ltinput type=resetvalue=Resetgt ltpgt

ltformgtltbodygtlthtmlgt

34 Objek TextAreaObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

teks dengan banyak baris

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 21: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

121

Gambar 35 Objek Textarea

Program JavaScript

lthtmlgtltheadgtltmeta http-equiv=Content-Typecontent=texthtml charset=iso-8859-1gtltmeta name=GENERATOR content=Microsoft FrontPage Express 20gtlttitlegtMemasukan Data lttitlegtltheadgt

ltbody background=grayjpg bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--

function EvenTekan()var KetStr = (documentfFormKetvalue)documentfFormKetStrvalue =KetStr

--gtltscriptgt

ltform name=fFormgtlth1 align=leftgtltfont color=400000gtltugtMemasukan Data PadaTextArealtugtltfontgtltfont color=FF0000gtltugtltbrgtltbrgtltugtltfontgtltfontcolor=000000gtltstronggtKeteranganltstronggt

ltbrgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 22: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

122

lttextarea name=Ket rows=3 cols=52gtlttextareagt ltbrgtltbrgtltinput type=button value=Kirim onclick=EvenTekan()gtltinputtype=reset value=Resetgtltfontgtlth1gtlth1gtltfont color=000000 size=6gtltstronggtKeterangan ltbrgtltstronggtltfontgtltfont color=000000 size=3gtltstronggtlttextareaname=KetStr rows=3 cols=54gt

lttextareagtltbrgtltstronggtltfontgtlth1gt

ltformgtltbodygtlthtmlgt

35 Objek SelectObjek textarea menyimpan informasi tentang elemen form yang berupa kotak

daftar

Gambar 36 Objek Select

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltheadgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 23: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

123

ltbody bgcolor=0000FF text=FFFFFFgtltscript language=JavaScriptgtlt--function EvenTekan()

var JurusanStr = (documentfFormJurusanvalue)documentfFormJurusanStrvalue=JurusanStr

--gtltscriptgt

ltform name=fFormgtlth1 align=centergtltfont color=FF0000gtPenggunaan Selectltfontgtlth1gtlthrgtltpregt

Masukan

Jurusan ltselect name=Jurusan size=1gtltoption value=Akuntansi PerpajakangtAkuntansi Perpajakanltoption value=Manajemen InformatikagtManajemen Informatikaltoption value=Teknik InformatikagtTeknik Informatikaltoption value=Public RelationgtPublic Relationltoption value=Akuntansidan PerpajakangtAkuntansi dan Perpajakanltoption value=Keuangan dan PerbankangtKeuangan dan Perbankanltoption value=Sekretaris EksekutufgtSekretaris Eksekutifltoption value=Aplikasi BisnisgtAplikasi Bisnisltoption value=Manajemen PemasarangtManajemen Pemasaranltoption value=Design GrafisgtDesign Grafisltselectgt

ltpregtltpgtltinput type=button value=Kirim onclick=EvenTekan()gt ltinputtype=reset value=Resetgt ltpgtltpregtltfont size=3gtltstronggt

Jurusan ltinput type=text size=30 name=JurusanStrgtltstronggtltfontgtltpregt

ltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 24: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

124

Latihan

Buatlah Halaman seperti berikut yang telah mencakup semua materi yang ada didalam bab ini

Jika Anda Click tombol kirim Maka dihalaman bawah akan ditampilkan halamanseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 25: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

125

41 PercabanganSeperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada

percabangan Pada dasarnya dalam JavaScript terdapat dua macam pernyataanpercabangan yaitu pernyataan ifelse dan switch

42 ifelsePernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian

mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi dan mengeksekusipernyataan lain bila kondisi tersebut tidak terpenuhiContohIf(kondisi)

lakukan pernyataan yang ada disinijika kondisi terpenuhi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 26: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

126

else

lakukan pernyataan yang ada disinijika kondisi tidak dipenuhi

43 ifelse ifPada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah

elseContohIf (xgt0)

documentwriteln(rsquo X adalah Bilangan positifrsquo)else if(xlt0)

documentwriteln(rsquo X adalah bilangan negatifrsquo)else

documentwriteln(rsquo X adalah Nol lsquo)

44 switchKegunaan pernyataan ini sama dengan yang ada pada CC++ dan Java yaitu

untuk menangani percabangan majemuk Dengan kata lain pernyataan switch dapatdigunakan untuk menyederhanakan pernyataan ifelse if yang terlalu banyakContohif (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikutSwitch (buffer)case 0 value=rdquoMinggurdquobreakcase 1 value=rdquoSeninrdquo breakcase 2 value=rdquoSelasardquo break

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 27: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

127

case 3 value=rdquoRaburdquo breakcase 4 value=rdquoKamisrdquo breakcase 5 value=rdquoJumatrdquo breakdefault value=rdquoSabturdquo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 28: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

128

45 Pengulangan ForPengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa

kali Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhirdari perulangan tersebutContohfor(nilaiawalkondisipenambahan)

ulang pernyataan iniContoh dalam program

For(x=1xlt=10x++)documentwriteln(ldquoJava Script Okrdquo)

Dengan pernyataan ini artinya akan menampilkan tulisan ldquoJava Script Okrdquo sebanyaksepuluh kali kelayar

46 Pengulangan whilePengulangan ini digunakan apabila anda belum tahu pasti berapa banyak

pengulangan akan dilakukan Berakhirnya suatu perulangan dalam while ditentukanoleh suatu kondisi Bila kondisi sudah terpenuhi maka pengulangan akan dihentikanContohwhile (kondisi)

ulang pernyataan ini

Contoh dalam program

while (xgt0)x=x ndash 1y=y + 1

47 Pengulangan dowhilePengulangan ini hampir sama dengan while digunakan apabila anda belum

tahu pasti berapa banyak pengulangan akan dilakukan Bedanya dengan whilepernyataan dowhile pengujian kondisi dilakukan pada akhir kalangContohDo

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 29: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

129

ulang pernyataan ini

while (kondisi)

Contoh dalam programDox=x ndash 1y=y + 1

while (xgt)

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teksseperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 30: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

130

Gambar 41 Menuliskan teks

Program Java Scriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgtlth2gt)for (var i=1ilt=5i++)

documentwriteln(Java Script is ok)documentwriteln(lth2gtltPREgt)

--gtltscriptgtltpgtltbodygtlthtmlgt

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir outputyang dihasilkan adalah seperti berikut

Gambar 42Membuat Link dengan Halaman lain

Program JavaScript

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 31: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

131

lthtmlgtltheadgtlttitlegtIdentitas Andalttitlegtltheadgtltbody background=backgrndgifgtltscript language=JavaScriptgtlt--

function evTekan ()var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1var yy = parseInt (documentfmFormtxitahunvalue)

var tanggal = new Date (yy mm dd)var buffer = tanggalgetDay()

with (documentfmFormtxohari)if (buffer==0) value = Mingguelse if (buffer==1) value =Seninelse if (buffer==2) value =Selasaelse if (buffer==3) value =Rabuelse if (buffer==4) value =Kamiselse if (buffer==5) value =Jumatelse if (buffer==6) value =Sabtu

documentfmFormtxotanggalvalue=tanggalgetDate()buffer = tanggalgetMonth()with (documentfmFormtxobulan)if (buffer==0) value = Januarielse if (buffer==1) value =Februarielse if (buffer==2) value =Maretelse if (buffer==3) value =Aprilelse if (buffer==4) value =Meielse if (buffer==5) value =Junielse if (buffer==6) value =Julielse if (buffer==7) value =Agustuselse if (buffer==8) value =Septemberelse if (buffer==9) value =Oktoberelse if (buffer==10) value =Novemberelse if (buffer==11) value =Desember

documentfmFormtxotahunvalue=tanggalgetYear()var jumlahms = 10000 600 600 240var now = new Date()buffer = Dateparse(tanggaltoGMTString()) -Dateparse(nowtoGMTString())documentfmFormtxoselisihvalue = Mathceil (buffer jumlahms) + Hari

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 32: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

132

function evTest()

var dd = parseInt (documentfmFormtxitanggalvalue)var mm = parseInt (documentfmFormtxibulanvalue) - 1alert(mm) cek untuk bintang aquarius 20 Jan = 18 Feb---------------------------if ((ddgt=20) ampamp (mm==0))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

else if ((ddlt=18) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000002htm

Akhir untuk bintang Pisces--------------------------- 19 Feb = 20 Mar---------------------------if ((ddgt=19) ampamp (mm==1))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

else if ((ddlt=20) ampamp (mm==2))

locationhref =httpwwwlpkigacidpublictakdirbintangpg000003htm

Akhir untuk bintang Pisces---------------------------

--gtltscriptgtltform name=fmFormgtltpgtampnbspltpgtltbgt

ltpregtlth1gt Identitas Andalth1gtNama ltinput type=text size=18 name=namagtAlamat ltinput type=text size=30 name=alamatgt

Dilahirkan Pada Tanggal ltinput type=text size=4 name=txitanggalgtBulan ltinput type=text size=4 name=txibulangtTahun ltinput type=text size=7 name=txitahungt

ltinput type=button value=Send onclick=evTekan () gtltinput type=reset value=Resetgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

133

ltpgtInformasi ltpgt

Hari ltinput type=text size=10 name=txoharigtTanggal ltinput type=text size=4 name=txotanggalgtBulan ltinput type=text size=10 name=txobulangtTahun ltinput type=text size=7 name=txotahungtSelisih ltinput type=text size=10

name=txoselisihgtltinput type=button value=Bintang Anda

onclick=evTest()gtltpregt

ltformgtltbodygtlthtmlgt

Gambar 43Memasukan data

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

134

Gambar 44Menampilkan data

Gambar 45 Halaman yang di Link

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

135

51 Fungsi Buatan SendiriDalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan

fungsi Fungsi merupakan bagian program yang dapat melakukan tugas tertentuBeberapa fungsi juga ada yang dapat mengembalikan nilai contohnya adalah fungsiparseFloat yang sudah digunakan sebelumnya

Untuk mendefinisikan fungsi harus diawali dengan kata kunci functionSintaknya adalah sebagai berikutFunction namafungsi(param1param2hellip)

pernyataan

Gambar 51 Membuat Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMembuat Fungsi Sendirilttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Halo()

documentwriteln(Halo saya adalah fungsi buatan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

136

function Tulis(Teks)documentwriteln(Teks)

function Kali(ab)

return (ab)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(lth1gtMembuat Fungsi Sendirilth1gt)Halo()Tulis(Ini adalah fungi dengan parameter)var A = Kali(105)Tulis(A)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

52 Fungsi BawaanDalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat

berguna sekali bagi Anda disini yang akan dibahas yaitu mengenai fungsi evalparseInt parseFloat isNan

bull Fungsi evalDigunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScriptContoh

eval(str)fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikutvar A=eval(ldquo102+3rdquo)memberikan nila 23 ke variabel Avar garis = ldquodocumentwrite(ldquoltHRgtrdquo)

jika anda tuliskan seperti inieval(garis)maka dijendela browser akan ditampilkan garis

bull Fungsi parseInt dan parseFloatKedua fungsi ini hampir sama keduanya meminta sebuah parameter bertipe stringdan mengkonversikannya ke numerik

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

137

ContohparseInt(str[radiks])parseFloat(str)contoh penggunaanvar A = parseInt(ldquo173rdquo8) 123 bilangan basis 8var B = parseFloat(ldquo314rdquo) 314var C = parseFloat(0314E1rdquo) 314

bull Fungsi isNaNDigunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan jikabilangan maka akan mengembalikan nilai true jika bukan maka bernilai falseContohvar X=parseInt(ldquo123rdquo)if (isNaN(X))X = -10Artinya jika X bukan bilangan maka X adalah ndash10Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan danfungsi buatan

Gambar 52 Menggunakan Fungsi

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan Data lttitlegtltscript language=JavaScriptgtlt--

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

138

function EvenTekan()

var NamaAnda = (documentfFormNamavalue)var JamKerja = parseInt (documentfFormJamKervalue)var UpahPerJam = parseInt (documentfFormUpahvalue)var Total = JamKerja UpahPerJamdocumentfFormNamaAndavalue=NamaAndadocumentfFormTotalvalue=Totalalert(Total + Total)

--gtltscriptgtltheadgtltbodygtltform name=fFormgtltH1gt

Menggunakan Fungsi Bawaan dan Fungsi BuatanltH1gtltPREgtMasukan

Nama ltinput type=text size=13 name=NamagtJam Kerja ltinput type=text size=20 name=JamKergtUpahJam ltinput type=text size=20 name=Upahgtlthrgt

ltPREgtltinput type=button value=Kirim onClick=EvenTekan()gtltinput type=reset value=Resetgt

ltPREgtNama ltinput type=text size=13 name=NamaAndagtTotal Gaji ltinput type=text size=20 name=Totalgt

ltPREgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

139

LatihanDengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akarpersamaan kuadrat

61 KejadianEven adalah sesuatu yang terjadi pada halaman HTML Berikut ini ada

beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen penggunamemasukan data pada kotak teks pengguna mengklik tombol dsb

Semua kejadian pada JavaScript dapat Anda tangani dengan menentukankejadiannya Biasanya penanganan kejadian adalah sebuah fungsi tetapi padabeberapa kasus Anda bisa menuliskan pernyataan-pernyataan secara langsung

Berikut ini adalah daftar kejadian pada JavaScriptKejadian KeteranganAbort Dibangkitkan bila pengguna

menghentikan pemuatan citra (tagltIMGgt) yaitu bila pengguna menekantombol stop atau mengklik link

Blur Dibangkitkan bila sebuah elemen formkehilangan fokus masukan yaitu bilapengguna menekan tombol ltTabgt ataumengklik elemen form lainnya

Change Dibangkitkan bila informasi masukanpada sebuah elemen form (text textarea

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

140

choice) diubah oleh penggunaClick Dibangkitkan bila penggunaa mengklik

sebuah elemen form atau linkError Dibangkitkan bila terjadi kesalahan saat

browser memuat dokumen atau citraFocus Dibangkitkan bila sebuah elemen form

menerima fokus masukan yaitu bilapengguna mengklik elemen form ini ataumenekan tombol lttabgt sehingga fokusmasukan berpindah ke elemen ini

Load Dibangkitkan bila browser selesaimemuat dokumen

MouseOut Dibangkitkan bila kursor mouse keluardari daerah link atau peta cita

MouseOver Dibangkitkan bila kursor mouse beradadi atas sebuah link Anda mungkinmemperhatikan bila kursor mouse beradadiatas sebuah link browser akanmenampilkan keterangan pada status

Kejadian KeteranganReset Dibangkitkan bila pengguna menekan tombol resetSelect Dibangkitkan bila pengguna memilih sebagian atau seluruh

teks pada elemen form yang berupa kotak teksSubmit Dibangkitkan bila pengguna menekan tombol SubmitUnload Dibangkitkan bila pengguna keluar dari dokumen

62 Penanganan KejadianUntuk menangani suatu kejadian tambahkan atribut onKejadian pada tag

yang sesuai Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScriptBiasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsiSintak penanganan kejadian adalah sebagai berikut

OnKejadian = ldquoPernyataan-pernyataanrdquoContohltBODY ONLOAD = ldquoevLoad()rdquogt

ltFORM NAME=fFormrdquo onSubmit=rdquoevSubmit()rdquogtPada saat pertama kali halaman dimuat program akan menampilkan dialog sepertigambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

141

Gambar 61 Kejadian onLoadKemudian masukan nama dan jurusan Anda setelah itu baru di Click tombol Kirim maka akan ditampilkan hasil seperti gambar berikut

Gambar 62 Kejadian onClick

Kotak dialog di atas muncul karena dalam program terdapat definisi penanganantombol kejadian onClick

ltinput type=button value=Kirim onClick =evClick()gt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

142

Program JavaScriptlthtmlgtltheadgtlttitlegtMenangani Kejadian lttitlegtltheadgtltbody onload=evLoad()background=fileCMy20Documentsgrayjpgbgcolor=FFFFFFgt

ltpgtltscript language=JavaScriptgtlt--

function evLoad()

alert(Ini adalah contoh penanganan kejadian onLoadn +Pada JavaScript)

function evClick()alert(Halo + documentfmFormnamavalue + nSelamat datang

di Jurusan + documentfmFormjurusanvalue)

--gtltscriptgtltpgt

ltFORM NAME=fmFormgtlth1gtMenangani Kejadian lth1gt

ltPREgtNama ltinput type=text size=20 name=namagtJurusan ltinput type=text size=20 name=jurusangtltpgt

ltPREgt

ltpgtltinput type=button value=Kirim onClick =evClick()gtltinput type=reset name=B2 value=Resetgtltpgt

ltformgtltbodygtlthtmlgt

Berikut akan dibuat sebuah halaman apabila pertama kali dibuat akan ditampilkankotak isian seperti gambar berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

143

Gambar 63 User Prompt

Kemudian jika sudah diisi anda tekan tombol Ok jika nama Anda tidak diisi makaakan ditampilkan pesan seperti berikut

Gambar 64 Kotak InformasiTetapi jika ada nama yang dimasukan maka akan ditampilkan jendela sepertiberikut

Gambar 65 Hasil keluaran

Program JavaScriptlthtmlgtltheadgtlttitlegtMemasukan data pada jendela Alertlttitlegt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

144

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--var nama= while ((nama==null) || (nama== ))

nama= prompt (Masukan nama Anda )if ((nama== null)|| (nama== ))alert(Nama Anda siapa sih )

documentwriteln(lth1gtHalo + nama + Apa kabarlth1gt)

--gtltscriptgtltpgt

ltheadgtlth1gtMemasukan data pada jendela Alertlth1gt

ltpgtampnbspltpgtltFORMgtltbodygtlthtmlgt

71 Mendefinsikan ObjekKata kunci yang digunakan untuk mendefinisikan objek sama dengan kata

kunci yang digunakan untuk mendefinisikan fungsi yaitu function Sebagai contohdisini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti yaitunamaalamatjurusan Untuk itu didefinisikan fungsi seperti contoh berikut

function Mahasiswa (NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

properti this merupakan penunjuk objek ini Anda memerlukan properti this karenapernyataan di atas hanyalah definisi objek Anda belum menciptakan instan untukobjek tersebut Untuk menciptakan instan dari objek mahasiswa di atas digunakankata kunci newContohSintia = new Mahasiswa(ldquoSintiardquordquoJlPanorama No 80rdquordquoSekretarisrdquo)Untuk mengakses suatu objek operator yang digunakan adalah operator titik ()Contoh

documentwriteln(SintiaNama)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

145

atauvar Nama=SintiaNama

72 Pernyataan forinPernyataan forin digunakan untuk melakukan pengulangan beerdasarkan

properti-properti sebuah objekContoh

for (Var x in Sintia)docomentwriteln(Sintia[x])

Contoh halaman untuk memperjelas pendefinisian objek

Gambar 71 Pendefinisian Objek

Program JavaScriptlthtmlgtltheadgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=Alamat

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

146

thisJurusan=Jurusanfunction Tulis(objek)

for (var x in objek)documentwriteln(objek[x])documentwriteln( )

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswavar Sintia = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)var Sisca = new Mahasiswa (Sisca NawangwulanJlCiwaruga No 72Akuntansi)var Sarah = new Mahasiswa (Sarah GalabaganJlBagdad No 76Informatika)

Tulis(Sintia)Tulis(Sisca)Tulis(Sarah)documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

73 Mendefinisikan MetodeObjek merupkan pengkapsulan propertivariabel bersama-sama dengan

metode fungsi Untuk mendefinisikan metode pertama-tama Anda harusmendefinisikan fungsi biasaContohFunction Anu()

Kemudian pada definisi objek tambahkan sebuah metode yang menunjuk fungsiAnuContoh

thismetode=Anu

Sekarang anda sudah memiliki sebuah metode yang bernama metodeBerikut ini adalah sebuah halaman yang telah menggunakan Metode untukmenuliskan objek

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

147

Gambar 72 Pemakaian Metode

Program JavaScriptlthtmlgtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--

function Mahasiswa(NamaAlamatJurusan)

thisNama=NamathisAlamat=AlamatthisJurusan=Jurusan

deklarasi metodethisTulis=TulisObjekthisUbah=UbahObjek

function TulisObjek()

documentwriteln(Nama + thisNama)documentwriteln(Alamat + thisAlamat)documentwriteln(Jurusan + thisJurusan)documentwriteln( )

function UbahObjek(NamaAlamatJurusan)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

148

thisNama = NamathisAlamat = AlamatthisJurusan = Jurusan

--gtltscriptgtltpgtltbodygtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--documentwriteln(lth1gtMembuat Objek lth1gt )documentwriteln(ltPREgt)

menciptakan instan objek mahasiswaMhs = new Mahasiswa (Sintia Ratna DewiJlPanorama III No 80Sekretaris)MhsTulis()

mengubah properti objekMhsUbah(Sisca Si JenatJlCiwaruga 74Perbankan)MhsTulis()documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

81 ArrayArray pada JavaScript merupakan sekumpulan elemen dimana masing-

masing elemen dapat bertipe apa saja Jadi konsep array dapat dikatakan sebagaipenggabungan beberapa variabel menjadi satu kesatuanContoh JavaScript untuk array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

149

Gambar 81 Array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

150

Program JavaScriptlthtmlgtlttitlegtUntitled Normal Pagelttitlegtltheadgtltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function RataRata()

var Jumlah=00var Total = RataRataargumentslength

for (var i=0iltTotali++)Jumlah += RataRataarguments[i]return JumlahTotal

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwriteln(ltPREgt)documentwriteln(Rata-rata dari 10203040 adalah + RataRata(10203040))documentwriteln(Rata-rata dari 2810 adalah + RataRata(2810))documentwriteln(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt

82 Objek ArrayObjek array mempunyai beberapa properti salah satu properti yang penting

adalah length Properti length menyatakan jumlah elemen yang dimiliki oleh ArrayObjek Array mempunyai beberapa metode untuk memanipulasi array yaitubull join (mengkonversikan semua array ke string)bull reverse (membalik elemen-elemen array)bull sort untuk mengurutkan elemen-elemen arraybull split mengkonversikan string ke dalam arraybull concat menggabungkan dua buah array

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

151

Gambar 82 Penggunaan Objek Array

Program JavaScriptlthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody bgcolor=FFFFFFgtltpgtltscript language=JavaScriptgtlt--function Tulis(Astr)

documentwriteln(str)for (var i=0iltAlengthi++)documentwriteln(A[i])documentwriteln( )

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite (ltPREgt)var Mahasiswa = new Array(AnitaIlhamTitik)Tulis (MahasiswaObjek Sebelum di urutkan )

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

152

Mahasiswasort()Tulis (MahasiswaObjek Setelah di urutkan )

Mahasiswareverse()Tulis (MahasiswaObjek Setelah di reverse )

Tulis (MahasiswaObjek Setelah join + Mahasiswajoin())documentwrite(ltPREgt)

--gtltscriptgtltpgt

ltpgtltscript language=JavaScriptgtlt--documentwrite(ltPREgt)var MahasiswaBaru = [KemalaAdinda]Tulis(MahasiswaBaruObjek Mahasiswa Baru )var MahasiswaGabungan = Mahasiswaconcat(MahasiswaBaru)Tulis(MahasiswaGabunganObjek setelah digabung)MahasiswaGabungan = MahasiswaGabunganslice(13)Tulis(MahasiswaGabunganSetelah objeck di slice (13) )documentwrite(ltPREgt) --gtltscriptgtltpgtltbodygtlthtmlgt91 Frame

Pada saat ini jika Anda menjelajahi Web dengan menggunakan browser yangmampu menampilkan frame dapat dipastikan bahwa Anda menjumpai penggunaanframe hampir disetiap Web site yang Anda kunjungi

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

153

Gambar 91 Penggunaan Frame dalam Web Site

92 Mendefinisikan FrameTidak seperti pada halaman-halaman HTML lainnya halaman yang berisi

frame tidak boleh menggunakan elemen BODY Elemen BODY digantikan denganelemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandungsuatu frame Struktur dasar dokumen HTML dengan frame adalah seperti berikutltHTMLgt

ltHEADgtltHEADgtltFRAMESETgtltFRAMESETgt

ltHTMLgt

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS Atribut ROWSmembagi jendela Browser menjadi beberapa baris frame sedangkan atribut COLSmembagi jendela browser menjadi beberapa kolom frameMemformat KolomContoh framehtmltHTMLgtltFRAMESET COLS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

154

Gambar 2 Membagi jendela dengan atribut COLS

Contoh frame1htmltHTMLgt

lth2gtTulisan ini ada di file frame1htm ltH2gtltHTMLgtContoh frame2htmltHTMLgt

lth2gtTulisan ini ada di file frame2htm ltH2gtltHTMLgt

Memformat BarisltHTMLgtltFRAMESET ROWS = 30gt

ltFRAME SRC = frame1htm name = fresatugtltFRAME SRC = frame2htm name = freduagt

ltFRAMESETgtltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

155

Gambar 93 Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 94 Halaman dengan Frame Kolom dan Baris

Listing HTMLltHTMLgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

156

ltFRAMESET COLS = 30gtltFRAME SRC = landochtm nama = fresatugtltFRAMESET ROWS = 50gtltFRAME SRC = dampakhtm name = freduagtltFRAME SRC = isuhtm name = fretigagt

ltFRAMESETgtltHTMLgt

93 Membuat Menu

Untuk membuat menu dengan menggunakan frame akan menghasilkanhalaman yang cukup bagus dan informatif karena halaman yang akan ditampilkanakan muncul pada jendela yang kita kehendaki Contoh misalnya Anda akanmembuat sebuah halaman seperti berikut

Gambar 95 Halaman UtamaJika Anda Click tombol Hacker Portugal kemudian Anda tekan tombolTampilkan maka pada jendela sebelah kanan akan ditampilkan halaman sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

157

Gambar 96 Halaman Hacker PortugalJika Anda Click pilihan Dampak Komputer akan ditampilkan halaman sepertiberikut pada jendela sebelah kanan

Gambar 97 Halaman Dampak LingkunganJika Anda Click pilihan NT4-Server akan ditampilkan halaman seperti berikut padajendela sebelah kanan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

158

Gambar 98 Halaman NT4-Server

Program JavaScript Halaman UTAMAHTM

lthtmlgtltheadgtltFRAMESET COLS = 30gtltFRAME SRC = menuhtm name = freSatugtltFRAME SRC = awalhtm name = freDuagtltFRAMESETgtltHTMLgt

Program JavaScript Halaman MENUHTM

lthtmlgtltheadgtlttitlegtlttitlegtltheadgtltpgtltscript language=JavaScriptgtlt--

function evKananAtas()

var str = hackhtmif (documentfmFormrbKananAtas[1]checked)str = dampakhtmelse if (documentfmFormrbKananAtas[2]checked)str = nt4servehtm

parentfreDualocationhref=str

--gtltscriptgtltpgtltpgtPilih Salah satu dibawah iniltpgtltpgtampnbspltpgtltform Name = fmFormgt

ltpgtltinput type=radio checked name=rbKananAtas value= 1 gt Hacker Portugalltpgtltpgtltinput type=radio name=rbKananAtas value=2gtDampak Komputerltpgtltpgtltinput type=radio name=rbKananAtas value=3gtNT-4 Serverltpgt

ltpgtltinput type=button value=Tampilkan onClick=evKananAtas()gt ltpgtltformgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

159

Program JavaScript Halaman AWALHTMlthtmlgtltheadgtlttitlegtlttitlegtltheadgtltbody background=grayjpggtltp align=centergtampnbspltpgtlth1 align=centergtHalaman ini dibuat dengan menggunakanlth1gtlth1 align=centergtltfont size=7gtFrame ltfontgtlth1gtltp align=centergtltstronggtDesign By Asep Suryadilagaltstronggtltpgtltp align=centergtltstronggtE-mail ltstronggtltahref=mailtoayahgwlpkigacidgtltstronggtayahgwlpkigacidltstronggtltagtltstronggtltstronggtltpgt

ltp align=centergtltstronggtltstronggtampnbspltpgt

ltpgtampnbspltpgtltbodygtlthtmlgt

Sedangkan untuk halaman bernama HACKHTM NT4SERVEHTM dan DAMPAKHTMadalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

101 CGI ScriptCGI (Common Gateway Interface) Script atau biasa disebut gateway script

adalah suatu program yang berjalan di Web Server dan Web Browser Banyak halyang dapat dikerjakan dengan CGI Script seperti mencari informasi dalam suatudatabase melakukan perhitungan atau hanya sekedar menampilkan informasi sepertitanggal dan waktu saat ini

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

160

Gambar 101 Contoh Aplikasi CGI untuk Counter

Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lainbull Formulir Pendaftaranbull Formulir Pemesanan Barangbull Formulir Surveybull Kartu Ucapanbull Search Enginebull Guest Bookbull Counterbull Dan lain-lain

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

161

Gambar 102 Buku Tamu menggunakan CGI

102 Bahasa untuk CGI ScriptCGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web

Pada Web server unix Anda dapat menggunakan bahasa Script Unix seperti PERLdan Bourne Shell Pada Web Server berbasikan Windows NT dapat menggunakanVisual Basic Script

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

162

Gambar 103 Kartu Ucapan dengan Perl

103 Keperluan SistemHal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script

adalah akses ke Web Server karena semua CGI Script harus diletakan di ServerUntuk memasukan CGI Script ke dalam server sebaiknya Anda mengetahui duluapakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

163

Gambar 104 CGI Script dengan NetBasic

104 Server Side IncludesServer Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI

secara inline pada suatu dokumen HTML Artinya pada dokumen HTML tersebutdisisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yangdiinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan olehbrowser tepat dimana tag HTML tadi berada

Cara kerja SSI adalah sederhana Dokumen HTML yang direquest olehclient diparse terlebih dahulu oleh server Bila ada Tag HTML yangmengindentifikasi Server untuk menjalankan aplikasi CGI server segera menjalankanaplikasi tersebut dann outputnya disisipkan di lokasi dimana TAG tadi dituliskanpada dokumen HTML kemudian dikirimkan ke Client untuk ditampilkan olehbrowserBerikut ini kita akan mencoba membuat sebuah CGI untuk formulir pendaftaranUser-ID pengguna Intranet STKB seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

164

Gambar 105 Tampilan pertama

Yang harus kita buat minimal adalah tiga buah file disini yang akandigunakan adalah CGI dengan menggunakan metode SSIYaitu1 USER-IDSSI untuk program utama2 SUBMITSSI proses penyimpananaction3 DATATXT data yang disimpan

Program JavaScript untuk File USER-IDSSIltHTMLgtltHEADgtlttitlegtFormulir Pendaftaran lttitlegtltheadgtltBODY background=imagesBKGRNDSPinkstongif bgcolor=FFFFFFgtlth1gtSekolah Tinggi Komputer Bandunglth1gtlth3gtFormulir Pendaftaran Mahasiswa Barulth3gtltSCRIPT LANGUAGE=JavaScriptgt

function tampil_home()

locationhref = httpwwwlpkigacidindexhtm

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

165

ltSCRIPTgt

ltform method=GET action=publicadminlat1submitssigtltbrgtlth2gtMasukan Data Andalth2gt

ltTTgtltstronggtltPREgt

Nama ltINPUT TYPE=text NAME=name SIZE=30 MAXLENGTH=60gtNim ltINPUT TYPE=text NAME=nim SIZE=10 MAXLENGTH=10gtAlamat ltINPUT TYPE=text NAME=street SIZE=40 MAXLENGTH=60gtKota ltINPUT TYPE=text NAME=city SIZE=40 MAXLENGTH=60gtKode Pos ltINPUT TYPE=text NAME=zip SIZE=5 MAXLENGTH=8gtTelp ltINPUT TYPE=text NAME=telp SIZE=15 MAXLENGTH=15gtTTL ltINPUT TYPE=text NAME=ttl SIZE=25 MAXLENGTH=30gtSex ltINPUT TYPE=Radio NAME=sex VALUE=Laki CHECKEDgtLaki-Laki

ltINPUT TYPE=Radio NAME=sex VALUE=Perempuan CHECKEDgtPerempuan ltpgtHoby ltTEXTAREA NAME=hoby ROWS=1 COLS=20gt ltTEXTAREAgtAgamaltSELECT NAME=agamagt

ltOPTION VALUE =IslamgtIslamltOPTION VALUE =KristengtKristenltOPTION VALUE =BudhagtBudhaltOPTION VALUE =HindugtHindultSELECTgtMoto

ltTEXTAREA NAME=moto ROWS=1 COLS=50gt ltTEXTAREAgtKeterangan

ltTEXTAREA NAME=ket ROWS=5 COLS=60gt ltTEXTAREAgt

ltPREgtltstronggtltttgtltbrgtPress ltinput type=submit value=Submitgt ltinput type=reset value=ResetgtltINPUT TYPE=BUTTON VALUE=Home onClick=tampil_home()gt

ltformgtlthrgtltpgtlta href=publicadminlat1datatxtgtDaftar Calon Mahasiswa BarultagtltpgtCopyright amp169 1999 Allisa Computer Inc All Rights ReservedltbodygtltHTMLgt

Program JavaScript untuk File SUBMITSSI

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

166

ltHTMLgtltHEADgtlttitlegtYoure RegisteredlttitlegtltHEADgtltBODY background=imagesbackgrdgif text=000000gtlth1gtYoure Registeredlth1gt

lt The next line appends the registration data to the file datatxt gtlt--append file=datatxtline=ampampnameampampampampnimampampampampstreetampampampampcityampampampampzipampampampamptelpampampline=ampampttlampampampampsexampampampampagamaampampampamphobyampampline=ampampmotoampampline=ampampketampampline===================================================================================--gt

You have been registered asltbrgt

ltPREgtName lt--echo var=name--gtNim lt--echo var=nim--gtAddress lt--echo var=street--gtCity lt--echo var=city--gtZip lt--echo var=zip--gt

Telp lt--echo var=telp--gtTTl lt--echo var=ttl--gtSex lt--echo var=sex--gt

Agama lt--echo var=agama--gtHoby lt--echo var=hoby--gtMoto lt--echo var=moto--gtKet lt--echo var=ket--gt

ltPREgtltcentergtlth2gtThank you for registeringlth2gtltcentergtlthrgtlt Standard trailer Note use of ESSI variable substitution to insert document name in hyperlinkbelow gtlt Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML gtltpgtCopyright amp169 Allisa Computer Oke 1998 All Rights ReservedltbodygtltHTMLgt

111 JavaJava merupakan sebuah bahasa pemrograman komputer berbasis objek

oriented programming Java diciptakan setelah C++ dan didesain sedemikian

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

167

sehingga ukurannya kecil sederhana dan portable Program yang dihasilkan denganbahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser)maupun berupa aplikasi mandiri yang dijalankan dengan program Java

Gambar 111 Contoh Aplikasi Java menggunakan animationclass

112 JavaScript vs JavaHal pertama yang harus dicatat adalah bahwa Java tidak sama dengan

JavaScript Karena JavaScript maupun Java sama-sama menggunakan kata ldquoJavardquobanyak orang yang menganggap bahwa Java sama dengan JavaScript

Pada Dasarnya program Java dibagi menjadi dua macam yaitu aplikasi danapplet Aplikasi merupakan program yang dapat berdiri sendiri Sedangkan applet

Java disimpan pada file berektensi class Anda bisa menempelkan tak kontainerltAPPLETgt Sebagai contoh jika Anda mempunyai appleet kelas_sayaclass Andadapat menempelkannya pada file HTML dengan perintah sebagai berikutltAPPLET CODE = ldquokelas_sayaclassrdquo

WIDTH = 200 HEIGHT=100gtltAPPLETgt

Contoh Applet SederhanaBerikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan sepertiberikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

168

Gambar 113 Contoh Applet Sederhana

Program Applet dengan sederhana lthalojavagtimport javaappletimport javaawt

public class halo extends Applet

String strFont Tulisan

public void UbahTeks (String s)

str = new String (s)update (getGraphics())paint(getGraphics())

public void init()

str = getParameter (Teks)if (str==null)str = new String (Ini adalah applet java)Tulisan = new Font (TimesRomanFontBOLD60)

public void paint(Graphics g)

Dimension dim=size()gsetFont(Tulisan)FontMetrics fm=ggetFontMetrics()int tengahX = (dimwidth - fmstringWidth(str)) gtgt 1int tengahY = (dimheight + fmgetAscent()) gtgt 1gsetColor(Colorblack)gdrawString(strtengahX+2tengahY+2)gdrawString(strtengahX+1tengahY+1)

gsetColor(Coloryellow)gdrawString(strtengahXtengahY)

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

169

Untuk mendapatkan file dengan extensi class maka Anda harus mengkompilasi fileprogram java tersebut setelah dikompilasi baru nantinya Anda akan mendapatkan fileHALOCLASSUntuk mengkompiler program java dilakukan dengan menggunakan baris perintahseperti ini jika diumpamakan program Java Anda ada didirektori seperti berikutCjavabingtjavac ldquohalojavardquo

Kemudian jika proses kompilasi sudah selesai silahkan Anda lanjutkan denganmembuat program HTML seperti berikutContoh Applet Java

lthtmlgtltheadgtlttitlegtUntitled Normal Pagelttitlegtltheadgt

ltbody background=fileFWEBDOCSIMAGESBKGRNDSbackgrdgifgt

lth1 align=centergtIni adalah contoh applet Java lth1gt

ltpgtltapplet code=haloclass align=baseline width=400height=100 name=appjavagtltparam name=Teksvalue=Contoh Applet gtltappletgtltpgtltbodygtlthtmlgt

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

170

Gambar 114 Homepage JavaScript di httpwwwlpkigacidpublicbanwar121 Applet Headline Factory

Dengan software ini Anda akan bisa dengan mudah membuat sebuah appletJava yang cukup memadai untuk dipresentasikan Tanpa harus menjadi seorangprogramer Anda akan bisamenyisipkan sebuah appletJava yang akan berjalansecara otomatis pada saathalaman Web Anda dibukaDengan applet ini halamanWeb Anda akan tampak lebihindah dan menarik

122 MemulaiApplet HeadlineFactory

Untuk memulaimenjalankan program ini ikuti langkah berikut1 Click Start Program Applet Headline Factory kemudian akan ditampilkan

output seperti berikut

Gambar 121 Jendela Applet Headline Factory

2 Pilih Tab Headline3 Click Icon New Headline

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

171

Gambar 122 Jendela Tab Headline

4 Double Click Icon Untitled

Gambar 123 Jendela Headline Properties Tab Text

5 Pada Jendela Teks masukan Teks yang ingin ditampilkan6 Ganti ukuran huruf jenis huruf warna teks dan sebagainya jika diperlukan

123 Link and HintUntuk membuat Link dan Hint dari Teks yang Anda buat ikuti langkah

berikut1 Click Tab Link and Hint

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

172

Gambar 124 Jendela Link and Hint2 Pada Box URL masukan alamat website yang ingin di tampilkan3 Pada Box Targer Frame masukan nama frame yang akan digunakan untuk

menampilkan halaman ini4 Pada Box Hint masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat

link tersebut5 Ganti jenis huruf ukuran huruf warna dan latar belakang

124 ImageUntuk memasukan image atau gambar kedalam applet dapat dilakukan dengan

cara sebagai berikut1 Click Tab Image

Gambar 125 Jendela Image2 Click Icon berwarna Kuning untuk memasukan gambar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

173

Gambar 126 Jendela Open Image3 Click tombol Open jika gambar sudah terpilih4 Pada Box Status Bar masukan Teks yang Anda inginkan

Gambar 127 Jendela Image setelah diisi

5 Click tombol Close6 Untuk melihat hasilnya Click Tombol

7 Akan ditampilkan contoh output seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

174

Gambar 128 Jendela Output125 HTML

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuahhalaman HTML dapat dilakukan dengan cara 1 Pilih Tab HTML

Gambar 129 Jendela HTML

2 Click Icon3 Kemudian Anda gabungkan dengan halaman HTML yang sudah Anda miliki

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

175

Gambar 1212 Jendela HTML

Berikut ini adalah contoh sebuah Applet Java digabungkan dengan halaman HTMLyang di buat dengan menggunakan Frontpage

Gambar 1211 Contoh Applet Java yang sudah tergabung dengan halaman HTML

Gambar di bawah ini adalah contoh sebuah website yang sudah menggunakanApplet Java anda bisa melihatnya di alamat httpwwwntlpkigacidfrozen

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

176

Gambar 1212 Website httpwwwstkbacidfrozen

131 Applet Marquee WizardDengan Applet Marquee

Wizard Anda memiliki kemampuanuntuk memperindah halaman WebAnda Software ini akanmempermudah pembuatan marquee(teks maupun citra berjalan) dalambahasa Java tanpa harus bersusahpayah mempelajari pemrogramanJava

132 Memulai AppletMarquee Wizard

Untuk memulai menjalankan dan membuat Applet Marquee kuti langkahberikut1 Pilih Start Program kemudian pilih Applet Marquee akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

177

Gambar 131 Jendela Applet Marquee Wizard2 Gantilah lebar dan tinggi applet warna background lebar border dsb jika

diperlukan133 Memasukan Marquee

Untuk memasukan gambar yang akan dijadikan Marquee ikuti langkahberikut1 Click Tab Marqueee2 Click Icon New Marquee

Gambar 132 Jendela Tab Marquee3 Click Icon Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

178

Gambar 133 Jendela Marquee Properties Tab General

4 Click Icon untuk memasukan gambarimage

5 Pilih gambar yang anda inginkan

Gambar 134 Jendela Open Image5 Click tombol Open6 Tentukan Marquee Transition untuk memberi efek pada Marquee Anda

134 Memasukan Hot SpotsUntuk memasukan Hot Spots ikuti langkah berikut

1 Click Tab Hot Spots

2 Click Icon akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

179

Gambar 135 Jendela Hot Spots

3 Double Click Hot Spots

Gambar 136 Jendela Open Image4 Pada Box URL masukan alamat URL yang ingin di link5 Tentukan Target Frame6 Masukan Marque Link7 Masukan image pada box Popup Image

135 Hint and Status BarUntuk memasukan Hint and Status Bar ikuti langkah berikut

1 Click Hint and Status Bar

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

180

Gambar 137 Tab Hint and Status Bar

2 Pada box Hot spots Link masukan alamat URL yang akan di Link3 Pada box Status Bar masukan Teks yang akan ditampilkan pada jendela Status4 Click Close5 Kembalikan layar ke tab Hot Spots

Gambar 138 Tab Hint and Status Bar6 Untuk membuat Hot Spots drag hot spots ke jendela applet preview

Untuk meilhat hasilnya Click tombol Test In Browser

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

181

Gambar 139 Jendela Test in BrowserUntuk menggabungkan dengan halaman Web yang sudah Anda buat lihat caranya diBab 10141 Applet Navigation Factory

Melalui software ini Anda akan bisa memperindah halaman Web dalam situsyang Anda buat Tanpaharus menjadi seorangprogramer berpengalamanAnda akan bisamenyisipkan applet inidengan mudah ke dalamhalaman Web yang Andainginkan

142 MemulaiApplet NavigationFactory

Untuk memulai menjalankan Applet Navigation Factory ikuti langkahberikut3 Pilih Start Program kemudian pilih Applet Navigation akan ditampilkan jendela

utama seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

182

Gambar 141 Jendela Applet Navigation

4 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 142 Jendela New Applet

5 Pilih Blank Applet6 Pilih Menu Item7 Pilih Icon New Item akan ditampilkan jendela seperti berikut

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

183

Gambar 143 Jendela Menu Items8 Pilih Icon Properties

Gambar 144 Jendela Properties9 Masukan Teks pada box text masukan Hint ganti warna font background dan

sebagainya10 Pilih Tab Appearance

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

184

Gambar 145 Jendela Tab Appearance11 Ganti Background untuk tombol dan teks yang ada di dalam tombol

12 Untuk memasukan Link masukan alamat URL pada box URL13 Tentukan target fame14 Masukan Teks untuk di tampilkan di status bar

Gambar 146 Jendela Link and Sound15 Click Close16 Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

185

Gambar 147 Membuat beberapa tombol

17 Untuk melihat hasilnya click tombol Test in Browser

Gambar 148 Output Test in Browser151 Applet Password Wizard

Software ini akanmembantu Anda untukmembuat username danpasswords untukmelindungi halamanWeb Anda Tanpa latarbelakang pemrogramanJava perlindungan

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

186

terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah

152 Memulai Applet PasswordUntuk memulai menjalankan Applet Password ikuti langkah berikut

18 Pilih Start Program kemudian pilih Applet Password akan ditampilkan jendelautama seperti berikut

Gambar 151 Jendela Applet Password

19 Pilih menu File New Applet akan ditampilkan jendela seperti berikut

Gambar 152 Jendela New Applet

20 Pada box Link masukan alamat Link yang anda inginkan jika password benar21 Pada box frame masukan target frame Anda

153 Mengisi Tab Login

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

187

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkanikuti langkah berikut1 Pilih tab Login pada jendela Applet Wizard

Gambar 153 Jendela New Applet

2 Pada kotak Pre login Message masukan pesan yang ingin ditampilkan padajendela password

3 Pada kotak Login Message masukan pesan yang ingin ditampilkan jika proseslogin selesai

4 Pada kotak Link masukan alamat http yang ingin dijalankan jika Password yangdimasukan salah

5 Masukan Target Frame

154 Mengisi Tab UsersUntuk memasukan daftar nama users yang diperbolehkan mengakses website

Anda caranya adalah sebagai berikut1 Pilih tab Users pada jendela Applet Wizard2 Click Icon New User3 Pada jendela User Properties masukan nama user dan password yang diinginkan

Gambar 154 Jendela User Properties

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Mengenal JavaScript

Universitas Komputer Indonesia copy 2004 Taryana - 0818426975

188

4 Click Close untuk kembali ke jendela New Users5 Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas

Untuk memasukan ke Halaman Website yang sudah Anda buat dapat dilakukandengan cara yang sama seperti di Bab Sebelumnya

Di bawah ini adalah contoh penggunaa Applet Password di dalam sebuah Website

Gambar 155 Contoh pemakaian Applet Password

PDF Creator - PDF4Free v20 httpwwwpdf4freecom

Page 33: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 34: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 35: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 36: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 37: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 38: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 39: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 40: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 41: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 42: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 43: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 44: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 45: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 46: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 47: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 48: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 49: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 50: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 51: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 52: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 53: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 54: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 55: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 56: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 57: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 58: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 59: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 60: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 61: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 62: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 63: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 64: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 65: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 66: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 67: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 68: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 69: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 70: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 71: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 72: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 73: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 74: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 75: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 76: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 77: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 78: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 79: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 80: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 81: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 82: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 83: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 84: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 85: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 86: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 87: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel
Page 88: Pemrograman CGI-Script With SSI Server, Java Applet€¦ · Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel