pemrograman cgi-script with ssi server, java applet€¦ · dalam dunia pemrograman, sudah pasti...
TRANSCRIPT
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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