Mengenal JavaScript

1.1

Pemrograman CGI-Script With SSI Server, Java Applet

© 1998-2004 By Taryana S Universitas Komputer Indonesia

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.2

Daftar Isi
Bab 1. JavaScript Java Script adalah bahasa script yang berdasar pada objek yang memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumen HTML. Dimana objek tersebut dapat berupa suatu window, frame, URL, dokumen, form, button atau item yang lain. Yang semuanya itu mempunyai properti yang saling berhubungan dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan atribut lain Bab 2. Tipe Data & Variabel Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel berguna untuk menyimpan data. Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Anda inginkan. Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional), artinya Anda boleh mendeklarasikan atau tidak no problem, Jika Anda memberi nilai pada suatu variabel, maka dalam JavaScript dianggap bahwa Anda telah mendeklarasikan variabel tersebut. Bab 3. Objek Untuk Memasukan Data Dalam Halaman HTML dimungkinkan juga untuk memasukan data dari keyboard (user) yang mengakses ke halaman Anda. Contoh aplikasi seperti ini banyak diterapkan dalam Web Interaktif, dengan menggunakan CGI. Untuk memasukan data dapat digunakan objek text yang telah disediakan dengan contoh sintak seperti berikut Bab 4. Aliran Program Seperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada percabangan. Pada dasarnya dalam JavaScript terdapat dua macam pernyataan percabangan, yaitu pernyataan if..else dan switch.

Bab 5. Fungsi Dalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan fungsi. Fungsi merupakan bagian program yang dapat melakukan tugas tertentu. Beberapa fungsi juga ada yang dapat mengembalikan nilai, contohnya adalah fungsi parseFloat yang sudah digunakan sebelumnya

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Bab 6. Kejadian

1.3

Even adalah sesuatu yang terjadi pada halaman HTML. Berikut ini ada beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen, pengguna memasukan data pada kotak teks, pengguna mengklik tombol, dsb.
Semua kejadian pada JavaScript dapat Anda tangani dengan menentukan kejadiannya. Biasanya penanganan kejadian adalah sebuah fungsi, tetapi pada beberapa kasus, Anda bisa menuliskan pernyataan-pernyataan secara langsung

Bab 7. Mendefinisikan Objek
Kata kunci yang digunakan untuk mendefinisikan objek sama dengan kata kunci yang digunakan untuk mendefinisikan fungsi, yaitu function. Sebagai contoh, disini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti, yaitu nama,alamat,jurusan. Untuk itu didefinisikan fungsi seperti contoh berikut

Bab 8. Array Array pada JavaScript merupakan sekumpulan elemen, dimana masing-masing elemen dapat bertipe apa saja. Jadi konsep array dapat dikatakan sebagai penggabungan beberapa variabel menjadi satu kesatuan. Contoh JavaScript untuk array: Bab 9. Frame Pada saat ini, jika Anda menjelajahi Web dengan menggunakan browser yang mampu menampilkan frame, dapat dipastikan bahwa Anda menjumpai penggunaan frame hampir disetiap Web site yang Anda kunjungi. Bab 10. CGI Script CGI (Common Gateway Interface) Script atau biasa disebut gateway script adalah suatu program yang berjalan di Web Server dan Web Browser. Banyak hal yang dapat dikerjakan dengan CGI Script, seperti mencari informasi dalam suatu database, melakukan perhitungan, atau hanya sekedar menampilkan informasi seperti tanggal dan waktu saat ini. Bab 11. Integrasi Java dengan JavaScript Java merupakan sebuah bahasa pemrograman komputer berbasis objek oriented programming. Java diciptakan setelah C++ dan didesain sedemikian sehingga ukurannya kecil, sederhana dan portable. Program yang dihasilkan dengan bahasa Java dapat berupa applet (aplikasi kecil yang jalan diatas web browser) maupun berupa aplikasi mandiri yang dijalankan dengan program Java. Bab 12. Applet Headline Factory Anda akan bisa dengan mudah membuat sebuah applet Java yang cukup memadai untuk dipresentasikan. Tanpa harus menjadi seorang programer, Anda akan bisa menyisipkan sebuah applet Java yang akan berjalan secara otomatis pada saat Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.4

halaman Web Anda dibuka. Dengan applet ini, halaman Web Anda akan tampak lebih indah dan menarik. Bab 13. Applet Marque Wizard Dengan Applet Marquee Wizard, Anda memiliki kemampuan untuk memperindah halaman Web Anda. Software ini akan mempermudah pembuatan marquee (teks maupun citra berjalan) dalam bahasa Java, tanpa harus bersusah payah mempelajari pemrograman Java. Bab 14. Applet Navigation Factory Anda akan dengan mudah membuat menubar dan aplikasi lainnya yang berhubungan dengan link ke document atau ke alamat URL lain di Internet. Bab 15. Applet Password Wizard Software ini akan membantu Anda untuk membuat username dan passwords untuk melindungi halaman Web Anda. Tanpa latar belakang pemrograman Java, perlindungan terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.5

1.1. Java Script
Java Script adalah bahasa script yang berdasar pada objek yang memperbolehkan pemakai untuk mengendalikan banyak aspek interaksi pemakai pada suatu dokumen HTML. Dimana objek tersebut dapat berupa suatu window, frame, URL, dokumen, form, button atau item yang lain. Yang semuanya itu mempunyai properti yang saling berhubungan dengannya dan masing-masing memiliki nama, lokasi, warna nilai dan atribut lain. Sesuai dengan perkembangan Worl Wide Web yang sangat pesat menyebabkan munculnya banyak home page dengan halaman-halaman yang sangat menarik. Halaman web yang dulunya hanya berupa teks dan gambar saja, saat ini menjadi sesuatu yang interaktif dan cerdas. Berbicara tentang Web tidak akan lepas dari HTML, bahasa yang digunakan untuk membuat halaman web. HTML merupakan bahasa yang sangat mudah dipelajari, Anda tidak perlu mempunyai latar belakang pemrograman untuk menggunakannya. Namun untuk membuat halaman web yang interaktif, HTML saja tidak cukup. Dua hal yang membuat web menjadi media interaktif adalah form dan CGI (Common Gateway Interface) Script. Dengan form dan CGI pembaca tidak hanya menerima informasi saja, tetapi sebaliknya juga bisa mengirimkan informasi kepada Anda, Ini akan menimbulkan komunikasi dua arah dan membuat web menjadi Interaktif. Form merupakan sarana yang dipakai pembaca untuk memasukan informasinya, sedangkan CGI Script bertugas untuk memproses informasi tersebut. Karena eratnya hubungan antara form dan CGI script, maka keduanya menjadi sangat perlu untuk anda pelajari

1.2. Keperluan Java Script

Untuk mempelajari pemrograman Java Script, ada dua piranti yang diperlukan yaitu browser dan teks editor. Teks editor adalah sebuah pengolah kata (word processor) yang menghasilkan file dalam format ASCII murni. Bila Anda adalah pengguna Windows 95/98 atau Windows NT, Anda bisa menggunakan Notepad atau Wordpad. Browser web yang akan Anda gunakan harus mendukung Java Script, Anda dapat menggunakan Netscape Navigator atau Internet Explorer. Dalam komputer Anda, Anda bisa memasang kedua perangkat Browser ini.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.6

Gambar 1.1. Time & Date dengan JavaScript Program JavaScript dituliskan pada file HTML dengan menggunakan tag kontainer <SCRIPT>. Dengan kata lain, Anda tidak perlu menuliskan program JavaScript pada file terpisah. Ingat bahwa yang dimaksud dengan tag kontainer adalah tag yang diawali dengan <NAMA_TAG> dan diakhiri dengan </NAMA_TAG>. Contoh. <HTML></HTML> <BODY></BODY> <HEAD></HEAD> Tag kontainer <SCRIPT> mempunyai dua atribut tetapi yang harus Anda isikan hanya satu atribut yaitu Language. Isilah atribut language dengan “JavaScript”. Hal ini digunakan untuk memberitahukan pada browser bahwa yang akan Anda tulis adalah JavaScript. Contoh <SCRIPT LANGUAGE=”JavaScript”> //program Anda masukan disini </SCRIPT>

1.3. Program Pertama Java Script
Pada bagian ini, Anda akan membuat program untuk menampilkan pesan sederhana kelayar monitor. Program ini akan menuliskan teks “Hai Aku JavaScript” pada jendela browser.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.7

Gambar 1.2. Menampilkan Teks

Listing Program Java Script <html> <head> <title>Program Pertama</title> </head> <body bgcolor="#FFFFFF"> <script language="JavaScript"> <!-- mencegah browser lama menampilkan Java Script document.writeln("<PRE>"); document.writeln("SELAMAT DATANG DI DUNIA JAVASCRIPT "); document.writeln("Program ini merupakan contoh sederhana menampilkan teks"); document.writeln("Dengan menggunakan JavaScript"); document.writeln("</PRE>"); // --> </script> </body> </html> Objek document mempunyai dua metode untuk menuliskan teks, yatu write dan writeln. Mungkin bagi Anda yang sudah terbiasa atau pernah berkenalan dengan Pascal sudah mengerti perbedaan kedua statement ini, yaitu Metode write digunakan untuk menulis teks tanpa ganti baris (carriage return) sedangkan Metode writeln digunakan untuk menulis teks dengan ganti baris. Dibawah ini adalah contoh bagaimana menuliskan sebuah teks header di tengah jendela browser. Untuk Menampilkan teks header Anda cukup menambahkan statement <H1> Header pertama </H1>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.8

Gambar 1.3. Teks Header Pada JavaScript Listing Program Java Script <html> <head> <title>Program Pertama</title> </head> <body bgcolor="#FFFFFF"> <script language="JavaScript"> <!-- mencegah browser lama menampilkan Java Script document.writeln("<CENTER>"); document.writeln("<H1>UNIVERSITAS KOMPUTER INDONESIA </H1>"); document.writeln("<H2>JL.DIPATIUKUR 112 BANDUNG</H2>"); document.writeln("</CENTER>"); // akhir java --> </script> </body> </html>

1.4. Komentar
Sama seperti bahasa pemrograman yang lainnya, JavaScript juga menyediakan fasilitas untuk menuliskan komentar, komentar ini beguna bila nantinya Anda atau orang lain membaca suatu program. Pemberian komentar dalam JavaScript dapat dilakukan dengan dua cara yaitu dengan menuliskan komentar setelah tanda garis miring dua kali, contoh: // ini komentar atau /* ini komentar juga */

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.9

2.1. Variabel dalam Java Script
Dalam dunia pemrograman, sudah pasti yang namanya variabel akan sering berhubungan dengan Anda jadi bersifat wajib. Variabel berguna untuk menyimpan data. Tanpa variabel sebuah program tidak bisa melakukan apa-apa yang Anda inginkan. Dalam Java Script pendeklarasian sebuah variabel sifatnya sunat (opsional), artinya Anda boleh mendeklarasikan atau tidak no problem, Jika Anda memberi nilai pada suatu variabel, maka dalam JavaScript dianggap bahwa Anda telah mendeklarasikan variabel tersebut. Contoh: Nama = ”Mirawati Randani” X = 1998 Y = 2351979 Untuk mendeklarasikan secara explisit, tulislaah variabel tersebut dengan didahului kata kunci var. Contoh var nama; var nama=”Mirawati Randani” var X = 1998 var Y; Untuk mendeklarasikan beberapa variabel dalam satu baris, dapat dilakukan dengan menuliskan seperti berikut: var A,B,C;

2.2. Tipe Data

Tidak seperti bahasa pemrograman lainnya, JavaScript tidak mempunyai tipe data secara explisit. Hal ini dapat dilihat dari beberapa contoh yang telah disajikan sebelumnya. Anda mendeklarasikan variabel tapi tidak menentukan tipenya. Meskipun JavaScript tidak mempunyai tipe data explisit, JavaScript mempunyai tipe data Implisit. Ada empat macam tipe data implisit yang dimiliki JavaScript yaitu: • Numerik, seperti 2351978, 2003948,3.14, 100 dsb • String, seperti “Halo”. “Mei”, “Juli”, “Ah Kamu”, “JavaScript” dsb • Boolean, hanya bernilai true atau false • Null, yaitu variabel yang tidak diinisialisasi

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.10

2.3. Tipe Numerik
Pada dasarnya JavaScript hanya mengenal dua macam tipe numerik, yaitu bilangan bulat dan bilangan real. Untuk bilangan bulat, Anda bisa merepresentasikan dengan basis desimal, oktal, atau heksadesimal. Contoh: var A = 100; var A=0x2F; Untuk pendeklarasian tipe bilangan real, Anda bisa menggunakan tanda titik atau notasi ilmiah (notasi E). Contoh: var a = 123.567 var b = 1.234567E+3

2.4. Tipe String
Untuk mendeklarasikan tipe string dapat dilakukan dengan cara menuliskan string diantara tanda tunggal (‘) atau tanda petik ganda (”); Contoh: var A = ‘Ini pendeklarasian String’; var C = “Ini juga string “;

2.5. Tipe Boolean
Tipe Boolean hanya mempunyai nilai True atau false. Tipe ini biasanya digunakan untuk mengecek suatu kondisi atau keadaan. Contoh Var X = (Y>90); Pada contoh ini menunjukan bahwa jika Y lebih besar dari 90 maka X akan bernilai True.

2.6. Tipe Null
Tipe Null digunakan untuk merepresentasikan variabel yang tidak diberi nilai awal (inisialisasi)

2.7. Operator
Operator pada JavaScript dibagi menjadi enam, yaitu • Aritmetik • Pemberian nilai (Assign) • Pemanipulasian bit (bitwise) • Pembanding • Logika • String Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.11

2.8. Operator Aritmetik
Operator ini digunakan untuk operan bertipe numerik, Ada dua macam operator aritmetik, yaitu operator numerik tunggal dan operator aritmetik biner. Perbedaan kedua operator ini terletak pada jumlah operan yang harus dioperasikan. Operator Tunggal/Biner Keterangan + Biner Penjumlahan Biner Pengurangan * Biner Perkalian / Biner Pembagian % Biner Modulus Tunggal Negasi ++ Tunggal Penambahan dengan Satu -Tunggal Pengurangan dengan Satu

2.9. Operator Pemberian Nilai
Digunakan untuk memberi nilai ke suatu operan atau mengubaah nilai suatu operan. Operator = += -= *= /= %= &= |= Keterangan Sama dengan Ditambah dengan Dikurangi dengan Dikalikan dengan Dibagi dengan Modulus dengan Bit AND dengan Bit OR dengan Contoh X=Y X+=Y X-=Y X*=Y X/=Y X%=Y X&=Y X|=Y Exuivalen X=X+Y X=X-Y X=X*Y X=X?Y X=X%Y X=X&Y X=X|Y

2.10. Operasi Pemanipulasi Bit
Opeasi ini berhubungan dengan pemanipulasian bit pada operan bertipe bilangan bulat. Operator & | ^ ~ << >> >>> Contoh: var A = 12; Keterangan Bit AND Bit OR Bit XOR Bit NOT Geser ke kiri Geser ke kanan Geser kekakan dengan diisi nol

// A = 1100b

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
var B = 10; // B = 1010b var C = A & B maka akan dihasilkan bilangan seperti berikut: 1100b 1010b AND 1000b var A = 12; var C = A << 2; var D = A>>1 maka variabel C akan bernilai 48 (0011 0000b variabel D akan bernilai 6 (0110b).

1.12

2.11. Operator Pembanding
Digunakan untuk membandingkan dua buah operan. Operan yang dikenai operator ini dapat bertipe string, numerik, maupun ekspresi lain. Operator Keterangan == Sama dengan != Tidak sama dengan > Lebih besar < Lebih kecil >= Lebih bersar atau sama dengan <= Lebih kecil atau sama dengan

2.12. Operator Logika
Sesuai namanya operator ini digunakaan untuk mengoperasika operan yang bertipe boolean, Operator Keterangan && Operator logika AND || Operator logika OR ! Operator logika NOT Contoh: var A = true; var B = false; var C = A && B; //false var D = A || B; //true var E = !A; // false

2.13. Operator String

Selain operator pembanding, operan bertipe string pada JavaScript juga mengenal satu operator lagi yang dinamakan penggabungan. Operator ini digunakan untuk menggabungkan beberapa string menjadi sebuah string yang lebih panjang. Contoh: Nama = “Java” + Script”; Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Akan menghasilkan “JavaScript” pada variabel Nama

1.13

Gambar 2.1. Operasi Aritmetika

Listing Program Java Script
<html> <head> <title>Operasi Aritmetik</title> </head> <p><script language="JavaScript"> <!-document.writeln("<PRE>"); document.writeln("<h1>Operasi Aritmetika </h1>"); var A = "100"; var B = "200"; var C = 300; var D = 400; var E = A + B; document.writeln('"100" + "200" = ' + E); E = B + C; document.writeln('"200" + 300 = ' + E); E = C + D; document.writeln(' 300 + 400 document.writeln("</PRE>"); // --></script></p> </body> </html>

=

' + E);

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.14

2.14. Memasukan Data
Untuk memasukan data dari keyboard dapat dilakukan dengan menggunakan perintah input.

Gambar 2.2. Memasukan Data Listing Program Java Script <html> <head> <title>Memasukan Bilangan :</title> </head> <body> <p><script language="JavaScript"> <!-function evTekan() { var Bil1 = parseFloat (document.fmForm.Bilangan1.value); if (isNaN (Bil1)) Bil1=0.0; var Bil2 = parseFloat (document.fmForm.Bilangan2.value); if (isNaN (Bil2)) Bil2=0.0; var Hasil=Bil1+Bil2; alert ("Hasil Penjumlahan = " + Hasil); } // --></script></p> <form name="fmForm"> Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
<h1><br>Memasukan Data Dari Keyboard</h1> <pre> Bilangan pertama:<input type="text" size="11" name="Bilangan1"> Bilangan Kedua :<input type="text" size="20" name="Bilangan2"> </pre> <p><input type="button" value="Jumlahkan" onclick="evTekan()"> <input type="reset" value="Reset"></p> </form> </body> </html>

1.15

Latihan
Dengan menggunakan JavaScript, buatlah halaman seperti berikut:

Gambar 2.3. Output Jika tanda + (positif) ditekan

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.16

Gambar 2.4. Output Jika tanda - (negatif) ditekan

3.1. Objek Text
Dalam Halaman HTML dimungkinkan juga untuk memasukan data dari keyboard (user) yang mengakses ke halaman Anda. Contoh aplikasi seperti ini banyak diterapkan dalam Web Interaktif, dengan menggunakan CGI. Untuk memasukan data dapat digunakan objek text yang telah disediakan dengan contoh sintak seperti berikut: <PRE> Masukan: Nama : <input type="text" size="13" name="Nama"> Alamat : <input type="text" size="20" name="Alamat"> </PRE>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.17

Gambar 3.1. Memasukan Data dengan Text Objek

3.2. Objek Radio

Objek radio menyimpan informasi tentang tombol radio. Karena selalu berupa array, untuk mengakses satu tombol radio digunakan radio[indeks]. Disamping itu objek radio juga mempunyani nilai True jika dipilih dan False jika tidak.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Gambar 3.2. Objek Radio Program JavaScript <html> <head> <title>Using checkbox object</title> </head> <body bgcolor="#00FFFF"> <script language="JavaScript"><!-function radio_box(form) { var ket=""; if (form.wanita.checked == true) { ket="Wanita "; } else { ket= "Pria "; } alert(’ Anda adalah seorang ’ +ket); } // --></script> <h1>Using Radio object</h1>

1.18

<form> <p><input type="radio" name="wanita" value="wanita"> Wanita </p> <hr> <p><input type="button" value="CONFIRM" onclick="radio_box(this.form)"> <input type="reset" value="Reset"> </p> </form> </body> </html> Jika di Click rombol radio tersebut, maka akan ditampilkan output seperti gambar berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.19

3.3. Objek Checkbox

Gambar 3.3. Aplikasi Objek Radio

Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek. Penggunaanya hampir sama dengan objek Radio.

Gambar 3.4. Objek Checkbox Program JavaScript <html> <head> <title>Using checkbox object</title> </head> <body bgcolor="#00FFFF"> <script language="JavaScript"><!-function check_box(form) { Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
var ket=""; if (form.wanita.checked == true) { ket="Wanita "; } else { ket= "Pria "; } alert('Anda adalah seorang ' +ket); } // --></script> <h1>Using Checkbox object</h1>

1.20

<form> <p><input type="checkbox" name="wanita" value="ON"> Wanita </p> <hr> <p><input type="button" value="CONFIRM" onclick="check_box(this.form)"> <input type="reset" value="Reset"> </p> </form> </body> </html>

3.4. Objek TextArea
Objek textarea menyimpan informasi tentang elemen form yang berupa kotak teks dengan banyak baris.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.21

Gambar 3.5. Objek Textarea

Program JavaScript
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> <title>Memasukan Data </title> </head> <body background="gray.jpg" bgcolor="#0000FF" text="#FFFFFF"> <script language="JavaScript"><!-function EvenTekan() { var KetStr = (document.fForm.Ket.value); document.fForm.KetStr.value =KetStr; } // --></script> <form name="fForm"> <h1 align="left"><font color="#400000"><u>Memasukan Data Pada TextArea</u></font><font color="#FF0000"><u><br> <br> </u></font><fontcolor="#000000"><strong>Keterangan:</strong> <br>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.22

<textarea name="Ket" rows="3" cols="52"> </textarea> <br> <br> <input type="button" value="Kirim" onclick="EvenTekan()"><input type="reset" value="Reset"></font></h1> <h1><font color="#000000" size="6"><strong>Keterangan :<br> </strong></font><font color="#000000" size="3"><strong><textarea name="KetStr" rows="3" cols="54"> </textarea><br> </strong></font></h1> </form> </body> </html>

3.5. Objek Select
Objek textarea menyimpan informasi tentang elemen form yang berupa kotak daftar.

Gambar 3.6. Objek Select Program JavaScript
<html> <head> <title>Memasukan Data </title> </head>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
<body bgcolor="#0000FF" text="#FFFFFF"> <script language="JavaScript"><!-function EvenTekan() { var JurusanStr = (document.fForm.Jurusan.value); document.fForm.JurusanStr.value=JurusanStr; } // --></script> <form name="fForm"> <h1 align="center"><font color="#FF0000">Penggunaan Select</font></h1> <hr> <pre> Masukan: Jurusan : <select name="Jurusan" size="1"> <option value="Akuntansi Perpajakan">Akuntansi Perpajakan <option value="Manajemen Informatika">Manajemen Informatika <option value="Teknik Informatika">Teknik Informatika <option value="Public Relation">Public Relation <option value="Akuntansidan Perpajakan">Akuntansi dan Perpajakan <option value="Keuangan dan Perbankan">Keuangan dan Perbankan <option value="Sekretaris Eksekutuf">Sekretaris Eksekutif <option value="Aplikasi Bisnis">Aplikasi Bisnis <option value="Manajemen Pemasaran">Manajemen Pemasaran <option value="Design Grafis">Design Grafis </select>

1.23

</pre> <p><input type="button" value="Kirim" onclick="EvenTekan()"> <input type="reset" value="Reset"> </p> <pre><font size="3"><strong> Jurusan : <input type="text" size="30" name="JurusanStr"> </strong></font></pre> </form> </body> </html>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.24

Latihan
Buatlah Halaman seperti berikut, yang telah mencakup semua materi yang ada di dalam bab ini:

Jika Anda Click tombol kirim,. Maka dihalaman bawah akan ditampilkan halaman seperti gambar berikut :

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.25

4.1. Percabangan
Seperti dalam bahasa pemrograman lainnya dalam JavaScript juga ada percabangan. Pada dasarnya dalam JavaScript terdapat dua macam pernyataan percabangan, yaitu pernyataan if..else dan switch.

4.2. if..else
Pernyataan ini digunakan untuk menguji sebuah kondisi dan kemudian mengeksekusi pernyataan tertentu bila kondisi tersebut terpenuhi, dan mengeksekusi pernyataan lain bila kondisi tersebut tidak terpenuhi. Contoh: If..(kondisi) { //lakukan pernyataan yang ada disini //jika kondisi terpenuhi } Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
else { //lakukan pernyataan yang ada disini //jika kondisi tidak dipenuhi }

1.26

4.3. if..else if
Pada kasus tertentu mungkin Anda akan meletakan pernyataan if lain setelah else. Contoh: If (x>0) { document.writeln(’ X adalah Bilangan positif’); } else if(x<0) { document.writeln(’ X adalah bilangan negatif’); } else { document.writeln(’ X adalah Nol ‘); }

4.4. switch
Kegunaan pernyataan ini sama dengan yang ada pada C/C++ dan Java, yaitu untuk menangani percabangan majemuk, Dengan kata lain pernyataan switch dapat digunakan untuk menyederhanakan pernyataan if..else if yang terlalu banyak. Contoh. if (buffer==0) value = "Minggu"; else if (buffer==1) value ="Senin"; else if (buffer==2) value ="Selasa"; else if (buffer==3) value ="Rabu"; else if (buffer==4) value ="Kamis"; else if (buffer==5) value ="Jumat"; else if (buffer==6) value ="Sabtu"; Dapat disederhanakan dengan pernyataan switch menjadi sebagai berikut: Switch (buffer) { case 0: value=”Minggu”;break; case 1: value=”Senin”; break; case 2: value=”Selasa”; break; Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
case 3: value=”Rabu”; break; case 4: value=”Kamis”; break; case 5: value=”Jumat”; break; default: value=”Sabtu” }

1.27

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.28

4.5. Pengulangan For
Pengulangan digunakan untuk mengeksekusi pernyataan-pernyatan beberapa kali.. Pengulangan dengan For paling sering digunakan jika anda sudah tahu akhir dari perulangan tersebut. Contoh: for(nilaiawal;kondisi;penambahan) { //ulang pernyataan ini; } Contoh dalam program: For(x=1;x<=10;x++) document.writeln(“Java Script Ok”); Dengan pernyataan ini artinya akan menampilkan tulisan “Java Script Ok” sebanyak sepuluh kali kelayar

4.6. Pengulangan while
Pengulangan ini digunakan apabila anda belum tahu pasti berapa banyak pengulangan akan dilakukan. Berakhirnya suatu perulangan dalam while ditentukan oleh suatu kondisi. Bila kondisi sudah terpenuhi maka pengulangan akan dihentikan. Contoh: while (kondisi) { //ulang pernyataan ini; }

Contoh dalam program: while (x>0) { x=x – 1; y=y + 1; }

4.7. Pengulangan do..while
Pengulangan ini hampir sama dengan while, digunakan apabila anda belum tahu pasti berapa banyak pengulangan akan dilakukan. Bedanya dengan while, pernyataan do..while pengujian kondisi dilakukan pada akhir kalang. Contoh: Do Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
{ //ulang pernyataan ini; } while (kondisi); Contoh dalam program: Do { x=x – 1; y=y + 1; } while (x>)

1.29

Dengan menggunakan JavaScript akan kita buat halaman untuk menuliskan teks seperti gambar berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Gambar 4.1. Menuliskan teks Program Java Script <html> <head> </head> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-document.writeln("<PRE><h2>"); for (var i=1;i<=5;i++) document.writeln("Java Script is ok"); document.writeln("</h2></PRE>"); // --></script></p> </body> </html>

1.30

Kemudian akan dibuat sebuah halaman yang akan dapat menebak hari lahir, output yang dihasilkan adalah seperti berikut:

Gambar 4.2.Membuat Link dengan Halaman lain
Program JavaScript

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
<html> <head> <title>Identitas Anda</title> </head> <body background="backgrnd.gif"> <script language="JavaScript"> <!-function evTekan () { var dd = parseInt (document.fmForm.txitanggal.value); var mm = parseInt (document.fmForm.txibulan.value) - 1; var yy = parseInt (document.fmForm.txitahun.value);

1.31

var tanggal = new Date (yy, mm, dd); var buffer = tanggal.getDay(); with (document.fmForm.txohari) { if (buffer==0) value = "Minggu"; else if (buffer==1) value ="Senin"; else if (buffer==2) value ="Selasa"; else if (buffer==3) value ="Rabu"; else if (buffer==4) value ="Kamis"; else if (buffer==5) value ="Jumat"; else if (buffer==6) value ="Sabtu"; } document.fmForm.txotanggal.value=tanggal.getDate(); buffer = tanggal.getMonth(); with (document.fmForm.txobulan) { if (buffer==0) value = "Januari"; else if (buffer==1) value ="Februari"; else if (buffer==2) value ="Maret"; else if (buffer==3) value ="April"; else if (buffer==4) value ="Mei"; else if (buffer==5) value ="Juni"; else if (buffer==6) value ="Juli"; else if (buffer==7) value ="Agustus"; else if (buffer==8) value ="September"; else if (buffer==9) value ="Oktober"; else if (buffer==10) value ="November"; else if (buffer==11) value ="Desember"; } document.fmForm.txotahun.value=tanggal.getYear(); var jumlahms = 1000.0 * 60.0 * 60.0 * 24.0; var now = new Date(); buffer = Date.parse(tanggal.toGMTString()) Date.parse(now.toGMTString()); document.fmForm.txoselisih.value = Math.ceil (buffer / jumlahms) + " Hari"; }

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
function evTest() { var dd = parseInt (document.fmForm.txitanggal.value); var mm = parseInt (document.fmForm.txibulan.value) - 1; alert(mm); // cek untuk bintang aquarius // 20 Jan = 18 Feb //--------------------------if ((dd>=20) && (mm==0)) { location.href = "http://www.lpkig.ac.id/public/takdir/bintang/pg000002.htm"; } else if ((dd<=18) && (mm==1)) { location.href = "http://www.lpkig.ac.id/public/takdir/bintang/pg000002.htm"; } // Akhir untuk bintang Pisces //--------------------------// 19 Feb = 20 Mar //--------------------------if ((dd>=19) && (mm==1)) { location.href = "http://www.lpkig.ac.id/public/takdir/bintang/pg000003.htm"; } else if ((dd<=20) && (mm==2)) { location.href = "http://www.lpkig.ac.id/public/takdir/bintang/pg000003.htm"; } // Akhir untuk bintang Pisces //--------------------------}

1.32

// --></script> <form name="fmForm"> <p>&nbsp;</p> <b> <pre> <h1> Identitas Anda</h1> Nama : <input type="text" size="18" name="nama"> Alamat : <input type="text" size="30" name="alamat"> Dilahirkan Pada Tanggal : <input Bulan : <input Tahun : <input : type="text" size="4" name="txitanggal"> type="text" size="4" name="txibulan"> type="text" size="7" name="txitahun">

<input type="button" value="Send" onclick="evTekan () "> <input type="reset" value="Reset">

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
<p>Informasi </p>

1.33

type="text" size="10" name="txohari"> type="text" size="4" name="txotanggal"> type="text" size="10" name="txobulan"> type="text" size="7" name="txotahun"> type="text" size="10" name="txoselisih"> <input type="button" value="Bintang Anda" onclick="evTest()"> </pre> </form> </body> </html>

Hari Tanggal Bulan Tahun Selisih

: : : : :

<input <input <input <input <input

Gambar 4.3.Memasukan data

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.34

Gambar 4.4.Menampilkan data

Gambar 4.5. Halaman yang di Link Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.35

5.1. Fungsi Buatan Sendiri

Dalam contoh pembahasan sebelumnya sebenarnya Anda sudah menggunakan fungsi. Fungsi merupakan bagian program yang dapat melakukan tugas tertentu. Beberapa fungsi juga ada yang dapat mengembalikan nilai, contohnya adalah fungsi parseFloat yang sudah digunakan sebelumnya. Untuk mendefinisikan fungsi harus diawali dengan kata kunci function. Sintaknya adalah sebagai berikut: Function namafungsi(param1,param2,…..) { //pernyataan }

Gambar 5.1. Membuat Fungsi.

Program JavaScript
<html> <head> <title>Membuat Fungsi Sendiri</title> </head> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-function Halo() { document.writeln("Halo saya adalah fungsi buatan"); }

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
function Tulis(Teks) { document.writeln(Teks); } function Kali(a,b) { return (a*b); } // --></script></p> <p><script language="JavaScript"> <!-document.writeln("<PRE>"); document.writeln("<h1>Membuat Fungsi Sendiri</h1>"); Halo(); Tulis("Ini adalah fungi dengan parameter"); var A = Kali(10,5); Tulis(A); document.writeln("</PRE>"); // --></script></p> </body> </html>

1.36

5.2. Fungsi Bawaan
Dalam JavaScript telah disediakan beberapa fungsi bawaan yang akan sangat berguna sekali bagi Anda, disini yang akan dibahas yaitu mengenai fungsi eval, parseInt, parseFloat, isNan • Fungsi eval Digunakan untuk mengevaluasi ekspresi atau mengeksekusi pernyataan JavaScript. Contoh. eval(str) fungsi eval digunakan sebagai pengevaluasi ekspresi seperti contoh berikut: var A=eval(“10*2+3”); memberikan nila 23 ke variabel A var garis = “document.write(“<HR>”); jika anda tuliskan seperti ini: eval(garis); maka dijendela browser akan ditampilkan garis • Fungsi parseInt dan parseFloat Kedua fungsi ini hampir sama, keduanya meminta sebuah parameter bertipe string dan mengkonversikannya ke numerik. Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Contoh parseInt(str,[radiks]) parseFloat(str); contoh penggunaan var A = parseInt(“173”,8); // 123 bilangan basis 8 var B = parseFloat(“3.14”); // 3.14 var C = parseFloat(0.314E1”); //3.14

1.37

• Fungsi isNaN Digunakan untuk menguji apakah suatu variabel adalah bilangan atau bukan, jika bilangan maka akan mengembalikan nilai true, jika bukan maka bernilai false Contoh var X=parseInt(“123”); if (isNaN(X)) X = -10; Artinya jika X bukan bilangan maka X adalah –10 Berikut adalah contoh sebuah halaman yang telah menggunakan fungsi bawaan dan fungsi buatan.

Gambar 5.2. Menggunakan Fungsi Program JavaScript
<html> <head> <title>Memasukan Data </title> <script language="JavaScript"> <!--

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
function EvenTekan() { var NamaAnda = (document.fForm.Nama.value); var JamKerja = parseInt (document.fForm.JamKer.value); var UpahPerJam = parseInt (document.fForm.Upah.value); var Total = JamKerja * UpahPerJam; document.fForm.NamaAnda.value=NamaAnda; document.fForm.Total.value=Total; alert("Total " + Total); }

1.38

// --> </script> </head> <body> <form name="fForm"> <H1> Menggunakan Fungsi Bawaan dan Fungsi Buatan </H1> <PRE> Masukan: Nama : <input type="text" size="13" name="Nama"> Jam Kerja : <input type="text" size="20" name="JamKer"> Upah/Jam : <input type="text" size="20" name="Upah"> <hr> </PRE> <input type="button" value="Kirim" onClick="EvenTekan()"> <input type="reset" value="Reset"> <PRE> Nama : <input type="text" size="13" name="NamaAnda"> Total Gaji : <input type="text" size="20" name="Total"> </PRE> </form> </body> </html>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.39

Latihan
Dengan menggunakan fungsi bawaan buatlah sebuah halaman untuk mencari akar persamaan kuadrat

6.1. Kejadian
Even adalah sesuatu yang terjadi pada halaman HTML. Berikut ini ada beberapa bentuk contoh kejadian yaitu jika pengguna memuat dokumen, pengguna memasukan data pada kotak teks, pengguna mengklik tombol, dsb. Semua kejadian pada JavaScript dapat Anda tangani dengan menentukan kejadiannya. Biasanya penanganan kejadian adalah sebuah fungsi, tetapi pada beberapa kasus, Anda bisa menuliskan pernyataan-pernyataan secara langsung. Berikut ini adalah daftar kejadian pada JavaScript Kejadian Keterangan Abort Dibangkitkan bila pengguna menghentikan pemuatan citra (tag <IMG>); yaitu bila pengguna menekan tombol stop atau mengklik link Blur Dibangkitkan bila sebuah elemen form kehilangan fokus masukan; yaitu bila pengguna menekan tombol <Tab> atau mengklik elemen form lainnya. Change Dibangkitkan bila informasi masukan pada sebuah elemen form (text, textarea, Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Click Error Focus

1.40 choice) diubah oleh pengguna Dibangkitkan bila penggunaa mengklik sebuah elemen form atau link Dibangkitkan bila terjadi kesalahan saat browser memuat dokumen atau citra. Dibangkitkan bila sebuah elemen form menerima fokus masukan; yaitu bila pengguna mengklik elemen form ini atau menekan tombol <tab> sehingga fokus masukan berpindah ke elemen ini Dibangkitkan bila browser selesai memuat dokumen Dibangkitkan bila kursor mouse keluar dari daerah link atau peta cita Dibangkitkan bila kursor mouse berada di atas sebuah link. Anda mungkin memperhatikan bila kursor mouse berada diatas sebuah link, browser akan menampilkan keterangan pada status.

Load MouseOut MouseOver

Kejadian Reset Select Submit Unload

Keterangan Dibangkitkan bila pengguna menekan tombol reset Dibangkitkan bila pengguna memilih sebagian atau seluruh teks pada elemen form yang berupa kotak teks Dibangkitkan bila pengguna menekan tombol Submit Dibangkitkan bila pengguna keluar dari dokumen

6.2. Penanganan Kejadian

Untuk menangani suatu kejadian, tambahkan atribut onKejadian pada tag yang sesuai. Kemudian isilah atribut ini dengan pernyataan-pernyataan JavaScript. Biasanya pernyataan yang diisikan berupa pemanggilan ke suatu fungsi. Sintak penanganan kejadian adalah sebagai berikut: OnKejadian = “Pernyataan-pernyataan” Contoh: <BODY ONLOAD = “evLoad()”> <FORM NAME=:fForm” onSubmit=”evSubmit()”> Pada saat pertama kali halaman dimuat, program akan menampilkan dialog seperti gambar berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.41

Gambar. 6.1. Kejadian onLoad Kemudian masukan nama dan jurusan Anda, setelah itu baru di Click tombol Kirim , maka akan ditampilkan hasil seperti gambar berikut:

Gambar. 6.2. Kejadian onClick Kotak dialog di atas muncul karena dalam program terdapat definisi penanganan tombol kejadian onClick: <input type="button" value="Kirim" onClick ="evClick()"> Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Program JavaScript
<html> <head> <title>Menangani Kejadian :</title> </head> <body onload="evLoad()" background="file:///C:/My%20Documents/gray.jpg" bgcolor="#FFFFFF"> <p><script language="JavaScript"><!--

1.42

function evLoad() { alert("Ini adalah contoh penanganan kejadian onLoad\n" + "Pada JavaScript"); } function evClick() { alert("Halo " + document.fmForm.nama.value + "\nSelamat datang di Jurusan " + document.fmForm.jurusan.value); } // --></script></p> <FORM NAME="fmForm"> <h1>Menangani Kejadian :</h1> <PRE> Nama :<input type="text" size="20" name="nama"> Jurusan :<input type="text" size="20" name="jurusan"></p> </PRE>

<p><input type="button" value="Kirim" onClick ="evClick()"> <input type="reset" name="B2" value="Reset"></p> </form> </body> </html>

Berikut akan dibuat sebuah halaman, apabila pertama kali dibuat akan ditampilkan kotak isian seperti gambar berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Gambar. 6.3. User Prompt

1.43

Kemudian jika sudah diisi anda tekan tombol Ok, jika nama Anda tidak diisi maka akan ditampilkan pesan seperti berikut:

Tetapi jika berikut:

Gambar. 6.4. Kotak Informasi ada nama yang dimasukan maka akan ditampilkan jendela seperti

Gambar. 6.5. Hasil keluaran Program JavaScript <html> <head> <title>Memasukan data pada jendela Alert</title> Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.44

<body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-var nama=" "; while ((nama==null) || (nama==" ")) nama= prompt ("Masukan nama Anda : ", " "); if ((nama== null)|| (nama==" ")) { alert("Nama Anda siapa sih ... ? " ); } } document.writeln("<h1>Halo " + nama + " Apa kabar </h1>"); // --></script></p> </head> <h1>Memasukan data pada jendela Alert</h1> <p>&nbsp;</p> </FORM> </body> </html>

7.1. Mendefinsikan Objek
Kata kunci yang digunakan untuk mendefinisikan objek sama dengan kata kunci yang digunakan untuk mendefinisikan fungsi, yaitu function. Sebagai contoh, disini akan didefinisikan objek mahasiswa yang terdiri dari tiga properti, yaitu nama,alamat,jurusan. Untuk itu didefinisikan fungsi seperti contoh berikut: function Mahasiswa (Nama,Alamat,Jurusan) { this.Nama=Nama; this.Alamat=Alamat; this.Jurusan=Jurusan } properti this merupakan penunjuk objek ini. Anda memerlukan properti this karena pernyataan di atas hanyalah definisi objek, Anda belum menciptakan instan untuk objek tersebut. Untuk menciptakan instan dari objek mahasiswa di atas digunakan kata kunci new. Contoh: Sintia = new Mahasiswa(“Sintia”,”Jl.Panorama No. 80”,”Sekretaris”); Untuk mengakses suatu objek, operator yang digunakan adalah operator titik (.). Contoh document.writeln(Sintia.Nama); Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
atau var Nama=Sintia.Nama;

1.45

7.2. Pernyataan for..in

Pernyataan for..in digunakan untuk melakukan pengulangan beerdasarkan properti-properti sebuah objek Contoh: for (Var x in Sintia) docoment.writeln(Sintia[x]); Contoh halaman untuk memperjelas pendefinisian objek

Gambar 7.1. Pendefinisian Objek Program JavaScript
<html> <head> </head> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-function Mahasiswa(Nama,Alamat,Jurusan) { this.Nama=Nama; this.Alamat=Alamat;

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
this.Jurusan=Jurusan; } function Tulis(objek) { for (var x in objek) document.writeln(objek[x]); document.writeln(" "); } // --></script></p> </body> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-document.writeln("<h1>Membuat Objek </h1> "); document.writeln("<PRE>"); //menciptakan instan objek mahasiswa var Sintia = new Mahasiswa ("Sintia Ratna Dewi","Jl.Panorama III No. 80","Sekretaris"); var Sisca = new Mahasiswa ("Sisca Nawangwulan","Jl.Ciwaruga No. 72","Akuntansi"); var Sarah = new Mahasiswa ("Sarah Galabagan","Jl.Bagdad No. 76","Informatika"); Tulis(Sintia); Tulis(Sisca); Tulis(Sarah); document.writeln("</PRE>"); // --></script></p> </body> </html>

1.46

7.3. Mendefinisikan Metode
Objek merupkan pengkapsulan properti/variabel bersama-sama dengan metode /fungsi. Untuk mendefinisikan metode, pertama-tama Anda harus mendefinisikan fungsi biasa. Contoh: Function Anu() { }

Kemudian pada definisi objek, tambahkan sebuah metode yang menunjuk fungsi Anu. Contoh this.metode=Anu; Sekarang anda sudah memiliki sebuah metode yang bernama metode. Berikut ini adalah sebuah halaman yang telah menggunakan Metode untuk menuliskan objek. Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.47

Gambar 7.2. Pemakaian Metode Program JavaScript <html> <head> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-function Mahasiswa(Nama,Alamat,Jurusan) { this.Nama=Nama; this.Alamat=Alamat; this.Jurusan=Jurusan;

//deklarasi metode this.Tulis=TulisObjek; this.Ubah=UbahObjek; } function TulisObjek() { document.writeln("Nama : " + this.Nama); document.writeln("Alamat : " + this.Alamat); document.writeln("Jurusan : " + this.Jurusan); document.writeln(" "); } function UbahObjek(Nama,Alamat,Jurusan) { Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
this.Nama this.Alamat this.Jurusan } // --></script></p> </body> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-document.writeln("<h1>Membuat Objek </h1> "); document.writeln("<PRE>"); = Nama; = Alamat; = Jurusan;

1.48

//menciptakan instan objek mahasiswa Mhs = new Mahasiswa ("Sintia Ratna Dewi","Jl.Panorama III No. 80","Sekretaris"); Mhs.Tulis(); //mengubah properti objek Mhs.Ubah("Sisca Si Jenat","Jl.Ciwaruga 74","Perbankan"); Mhs.Tulis(); document.writeln("</PRE>"); // --></script></p> </body> </html>

8.1. Array
Array pada JavaScript merupakan sekumpulan elemen, dimana masingmasing elemen dapat bertipe apa saja. Jadi konsep array dapat dikatakan sebagai penggabungan beberapa variabel menjadi satu kesatuan. Contoh JavaScript untuk array:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Gambar 8.1. Array

1.49

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Program JavaScript
<html> <title>Untitled Normal Page</title> </head> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-function RataRata() { var Jumlah=0.0; var Total = RataRata.arguments.length; for (var i=0;i<Total;i++) Jumlah += RataRata.arguments[i]; return Jumlah/Total; }

1.50

// --></script></p> <p><script language="JavaScript"><!-document.writeln("<PRE>"); document.writeln("Rata-rata dari 10,20,30,40 adalah " + RataRata(10,20,30,40)); document.writeln("Rata-rata dari 2,8,10 adalah " + RataRata(2,8,10)); document.writeln("</PRE>"); // --></script></p> </body> </html>

8.2. Objek Array

Objek array mempunyai beberapa properti; salah satu properti yang penting adalah length. Properti length menyatakan jumlah elemen yang dimiliki oleh Array. Objek Array mempunyai beberapa metode untuk memanipulasi array, yaitu • join (mengkonversikan semua array ke string), • reverse (membalik elemen-elemen array). • sort untuk mengurutkan elemen-elemen array • split, mengkonversikan string ke dalam array • concat, menggabungkan dua buah array

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.51

Gambar 8.2. Penggunaan Objek Array Program JavaScript <html> <head> <title>Untitled Normal Page</title> </head> <body bgcolor="#FFFFFF"> <p><script language="JavaScript"><!-function Tulis(A,str) { document.writeln(str) for (var i=0;i<A.length;i++) document.writeln(A[i]); document.writeln(" "); } // --></script></p> <p><script language="JavaScript"><!-document.write ("<PRE>"); var Mahasiswa = new Array("Anita","Ilham","Titik"); Tulis (Mahasiswa,"Objek Sebelum di urutkan "); Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Mahasiswa.sort(); Tulis (Mahasiswa,"Objek Setelah di urutkan "); Mahasiswa.reverse(); Tulis (Mahasiswa,"Objek Setelah di reverse ");

1.52

Tulis (Mahasiswa,"Objek Setelah join" + Mahasiswa.join('*')); document.write("<PRE>");

// --></script></p> <p><script language="JavaScript"><!-document.write("<PRE>"); var MahasiswaBaru = ["Kemala","Adinda"]; Tulis(MahasiswaBaru,"Objek Mahasiswa Baru: "); var MahasiswaGabungan = Mahasiswa.concat(MahasiswaBaru); Tulis(MahasiswaGabungan,"Objek setelah digabung"); MahasiswaGabungan = MahasiswaGabungan.slice(1,3); Tulis(MahasiswaGabungan,"Setelah objeck di slice (1,3): "); document.write("<PRE>"); // --></script></p> </body> </html>

9.1. Frame
Pada saat ini, jika Anda menjelajahi Web dengan menggunakan browser yang mampu menampilkan frame, dapat dipastikan bahwa Anda menjumpai penggunaan frame hampir disetiap Web site yang Anda kunjungi.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.53

Gambar 9.1. Penggunaan Frame dalam Web Site

9.2. Mendefinisikan Frame
Tidak seperti pada halaman-halaman HTML lainnya, halaman yang berisi frame tidak boleh menggunakan elemen BODY. Elemen BODY digantikan dengan elemen FRAMESET yang menyatakan bahwa isi halaman tersebut mengandung suatu frame. Struktur dasar dokumen HTML dengan frame adalah seperti berikut:
<HTML> <HEAD> </HEAD> <FRAMESET> </FRAMESET> <HTML>

FRAMESET mempunyai dua buah atribut yaitu ROWS dan COLS. Atribut ROWS membagi jendela Browser menjadi beberapa baris frame, sedangkan atribut COLS membagi jendela browser menjadi beberapa kolom frame. Memformat Kolom Contoh: frame.htm <HTML> <FRAMESET COLS = "30%,*"> <FRAME SRC = "frame1.htm" name = "fresatu"> <FRAME SRC = "frame2.htm" name = "fredua"> </FRAMESET> </HTML>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.54

Gambar 2. Membagi jendela dengan atribut COLS Contoh: frame1.htm <HTML> <h2>Tulisan ini ada di file frame1.htm </H2> </HTML> Contoh: frame2.htm <HTML> <h2>Tulisan ini ada di file frame2.htm </H2> </HTML> Memformat Baris <HTML> <FRAMESET ROWS = "30%,*"> <FRAME SRC = "frame1.htm" name = "fresatu"> <FRAME SRC = "frame2.htm" name = "fredua"> </FRAMESET> </HTML>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.55

Gambar 9.3. Memformat baris dengan atribut ROWS

Berikut adalah contoh halaman yang terdiri dari frame kolom dan baris

Gambar 9.4. Halaman dengan Frame Kolom dan Baris Listing HTML <HTML> Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
<FRAMESET COLS = "30%,*"> <FRAME SRC = "landoc.htm" nama = "fresatu"> <FRAMESET ROWS = "50%,*"> <FRAME SRC = "dampak.htm" name = "fredua"> <FRAME SRC = "isu.htm" name = "fretiga"> </FRAMESET> </HTML>

1.56

9.3. Membuat Menu
Untuk membuat menu dengan menggunakan frame akan menghasilkan halaman yang cukup bagus dan informatif, karena halaman yang akan ditampilkan akan muncul pada jendela yang kita kehendaki. Contoh, misalnya Anda akan membuat sebuah halaman seperti berikut:

Gambar 9.5. Halaman Utama Jika Anda Click tombol Hacker Portugal, kemudian Anda tekan tombol Tampilkan, maka pada jendela sebelah kanan akan ditampilkan halaman seperti berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.57

Gambar 9.6. Halaman Hacker Portugal Jika Anda Click pilihan Dampak Komputer, akan ditampilkan halaman seperti berikut pada jendela sebelah kanan:

Gambar 9.7. Halaman Dampak Lingkungan Jika Anda Click pilihan NT4-Server, akan ditampilkan halaman seperti berikut pada jendela sebelah kanan:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Gambar 9.8. Halaman NT4-Server Program JavaScript Halaman UTAMA.HTM
<html> <head> <FRAMESET COLS = "30%,*"> <FRAME SRC = "menu.htm" name = "freSatu"> <FRAME SRC = "awal.htm" name = "freDua"> </FRAMESET> </HTML>

1.58

Program JavaScript Halaman MENU.HTM
<html> <head> <title></title> </head> <p><script language="JavaScript"><!-function evKananAtas() { var str = "hack.htm"; if (document.fmForm.rbKananAtas[1].checked) str = "dampak.htm"; else if (document.fmForm.rbKananAtas[2].checked) str = "nt4serve.htm"; parent.freDua.location.href=str; } // --></script></p> <p>Pilih Salah satu dibawah ini:</p> <p>&nbsp;</p> <form Name = "fmForm"> <p><input type="radio" checked name="rbKananAtas" value= "1" > Hacker Portugal</p> <p><input type="radio" name="rbKananAtas" value="2">Dampak Komputer</p> <p><input type="radio" name="rbKananAtas" value="3">NT-4 Server</p> <p><input type="button" value="Tampilkan" onClick="evKananAtas()"> </p> </form> </body> </html>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.59

Program JavaScript Halaman AWAL.HTM
<html> <head> <title></title> </head> <body background="gray.jpg"> <p align="center">&nbsp;</p> <h1 align="center">Halaman ini dibuat dengan menggunakan</h1> <h1 align="center"><font size="7">Frame </font></h1> <p align="center"><strong>Design By Asep Suryadilaga</strong></p> <p align="center"><strong>E-mail : </strong><a href="mailto:ayah@gw.lpkig.ac.id"><strong>ayah@gw.lpkig.ac.id</strong></a><strong></ strong></p> <p align="center"><strong></strong>&nbsp;</p> <p>&nbsp;</p> </body> </html>

Sedangkan untuk halaman bernama HACK.HTM, NT4SERVE.HTM dan DAMPAK.HTM adalah halaman yang ingin Anda tampilkan pada jendela sebelah kanan

10.1. CGI Script

CGI (Common Gateway Interface) Script atau biasa disebut gateway script adalah suatu program yang berjalan di Web Server dan Web Browser. Banyak hal yang dapat dikerjakan dengan CGI Script, seperti mencari informasi dalam suatu database, melakukan perhitungan, atau hanya sekedar menampilkan informasi seperti tanggal dan waktu saat ini. Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.60

Gambar 10.1. Contoh Aplikasi CGI untuk Counter • • • • • • • • Aplikasi terapan lainnya yang dapat di buat dengan CGI ini antara lain: Formulir Pendaftaran Formulir Pemesanan Barang Formulir Survey Kartu Ucapan Search Engine Guest Book Counter Dan lain-lain

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.61

Gambar 10.2. Buku Tamu menggunakan CGI

10.2. Bahasa untuk CGI Script
CGI Script dapat ditulis dalam hampir setiap bahasa pemrograman Web. Pada Web server unix, Anda dapat menggunakan bahasa Script Unix, seperti PERL dan Bourne Shell. Pada Web Server berbasikan Windows NT dapat menggunakan Visual Basic Script.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.62

Gambar 10.3. Kartu Ucapan dengan Perl

10.3. Keperluan Sistem
Hal terpenting yang Anda perlukaan untuk bisa menggunakan CGI Script adalah akses ke Web Server, karena semua CGI Script harus diletakan di Server. Untuk memasukan CGI Script ke dalam server, sebaiknya Anda mengetahui dulu, apakah Anda diberi fasilitas untuk memasukan CGI-Script atau Tidak.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.63

Gambar 10.4. CGI Script dengan NetBasic

10.4. Server Side Includes

Server Side Include (SSI) adalah metode menjalankan suatu aplikasi CGI secara inline pada suatu dokumen HTML. Artinya pada dokumen HTML tersebut disisipkan suatu Tag HTML khusus yang akan memanggil aplikasi CGI yang diinginkan dan output dari aplikasi tersebut akan bersama-sama ditampilkan oleh browser tepat dimana tag HTML tadi berada. Cara kerja SSI adalah sederhana. Dokumen HTML yang direquest oleh client, diparse terlebih dahulu oleh server. Bila ada Tag HTML yang mengindentifikasi Server untuk menjalankan aplikasi CGI, server segera menjalankan aplikasi tersebut, dann outputnya disisipkan di lokasi dimana TAG tadi dituliskan pada dokumen HTML, kemudian dikirimkan ke Client untuk ditampilkan oleh browser. Berikut ini kita akan mencoba membuat sebuah CGI, untuk formulir pendaftaran User-ID pengguna Intranet STKB seperti berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.64

Gambar 10.5. Tampilan pertama Yang harus kita buat minimal adalah tiga buah file, disini yang akan digunakan adalah CGI dengan menggunakan metode SSI. Yaitu: 1. USER-ID.SSI // untuk program utama 2. SUBMIT.SSI // proses penyimpanan/action 3. DATA.TXT // data yang disimpan

Program JavaScript untuk File USER-ID.SSI
<HTML> <HEAD> <title>Formulir Pendaftaran </title> </head> <BODY background="/images/BKGRNDS/Pinkston.gif" bgcolor="#FFFFFF"> <h1>Sekolah Tinggi Komputer Bandung</h1> <h3>Formulir Pendaftaran Mahasiswa Baru</h3> <SCRIPT LANGUAGE="JavaScript"> function tampil_home() { location.href = "http://www.lpkig.ac.id/index.htm"; }

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
</SCRIPT> <form method=GET action="/public/admin/lat1/submit.ssi"> <br> <h2>Masukan Data Anda:</h2>

1.65

<TT><strong> <PRE> Nama : <INPUT TYPE="text" NAME="name" SIZE="30" MAXLENGTH="60"> Nim : <INPUT TYPE="text" NAME="nim" SIZE="10" MAXLENGTH="10"> Alamat : <INPUT TYPE="text" NAME="street" SIZE="40" MAXLENGTH="60"> Kota : <INPUT TYPE="text" NAME="city" SIZE="40" MAXLENGTH="60"> Kode Pos: <INPUT TYPE="text" NAME="zip" SIZE="5" MAXLENGTH="8"> Telp : <INPUT TYPE="text" NAME="telp" SIZE="15" MAXLENGTH="15"> TTL : <INPUT TYPE="text" NAME="ttl" SIZE="25" MAXLENGTH="30"> Sex : <INPUT TYPE="Radio" NAME="sex" VALUE="Laki" CHECKED>Laki-Laki <INPUT TYPE="Radio" NAME="sex" VALUE="Perempuan" CHECKED>Perempuan <p> Hoby : <TEXTAREA NAME="hoby" ROWS=1 COLS=20> </TEXTAREA> Agama:<SELECT NAME="agama"> <OPTION VALUE ="Islam">Islam <OPTION VALUE ="Kristen">Kristen <OPTION VALUE ="Budha">Budha <OPTION VALUE ="Hindu">Hindu </SELECT> Moto: <TEXTAREA NAME="moto" ROWS=1 COLS=50> </TEXTAREA> Keterangan: <TEXTAREA NAME="ket" ROWS=5 COLS=60> </TEXTAREA> </PRE> </strong></tt> <br> Press <input type="submit" value="Submit"> <input type="reset" value="Reset"> <INPUT TYPE=BUTTON VALUE="Home" onClick="tampil_home()"> </form> <hr> <p> <a href="/public/admin/lat1/data.txt"> Daftar Calon Mahasiswa Baru</a> <p> Copyright &#169; 1999 Allisa Computer, Inc. All Rights Reserved. </body> </HTML>

Program JavaScript untuk File SUBMIT.SSI

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
<HTML> <HEAD> <title>You're Registered!</title> </HEAD> <BODY background="/images/backgrd.gif" text="#000000"> <h1>You're Registered!</h1>

1.66

<! The next line appends the registration data to the file data.txt > <!--#append file="data.txt" line="&&name&&,&&nim&&,&&street&&,&&city&&,&&zip&&,&&telp&&" line="&&ttl&&,&&sex&&,&&agama&&,&&hoby&&" line="&&moto&&" line="&&ket&&" line="==================================================================== =============="--> You have been registered as:<br> <PRE> Name: <!--#echo var='name'--> Nim: <!--#echo var='nim'--> Address: <!--#echo var='street'--> City: <!--#echo var='city'--> Zip: <!--#echo var='zip'--> Telp: <!--#echo var='telp'--> TTl: <!--#echo var='ttl'--> Sex: <!--#echo var='sex'--> Agama: <!--#echo var='agama'--> Hoby: <!--#echo var='hoby'--> Moto: <!--#echo var='moto'--> Ket: <!--#echo var='ket'--> </PRE> <center> <h2>Thank you for registering.</h2> </center> <hr> <! Standard trailer. Note use of ESSI variable substitution to insert document name in hyperlink below. > <! Hyperlink points to a BASIC script that displays raw HTML rather than translated HTML. > <p> Copyright &#169; Allisa Computer Oke, 1998. All Rights Reserved. </body> </HTML>

11.1. Java
Java merupakan sebuah bahasa pemrograman komputer berbasis objek oriented programming. Java diciptakan setelah C++ dan didesain sedemikian

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.67

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

Gambar 11.1. Contoh Aplikasi Java menggunakan animation.class

11.2. JavaScript vs Java
Hal pertama yang harus dicatat adalah bahwa Java tidak sama dengan JavaScript. Karena JavaScript maupun Java sama-sama menggunakan kata “Java” banyak orang yang menganggap bahwa Java sama dengan JavaScript. Pada Dasarnya program Java dibagi menjadi dua macam, yaitu aplikasi dan applet. Aplikasi merupakan program yang dapat berdiri sendiri. Sedangkan applet

Java disimpan pada file berektensi .class. Anda bisa menempelkan tak kontainer <APPLET>. Sebagai contoh jika Anda mempunyai appleet kelas_saya.class, Anda dapat menempelkannya pada file HTML dengan perintah sebagai berikut: <APPLET CODE = “kelas_saya.class” WIDTH = 200 HEIGHT=100> </APPLET> Contoh Applet Sederhana Berikut akan Kita buat sebuah applet sederhana untuk menampilkan tulisan seperti berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
Gambar 11.3. Contoh Applet Sederhana Program Applet dengan sederhana <halo.java> import java.applet.*; import java.awt.*; public class halo extends Applet { String str; Font 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 ("TimesRoman",Font.BOLD,60); } public void paint(Graphics g) { Dimension dim=size(); g.setFont(Tulisan); FontMetrics fm=g.getFontMetrics(); int tengahX = (dim.width - fm.stringWidth(str)) >> 1; int tengahY = (dim.height + fm.getAscent()) >> 1; g.setColor(Color.black); g.drawString(str,tengahX+2,tengahY+2); g.drawString(str,tengahX+1,tengahY+1); g.setColor(Color.yellow); g.drawString(str,tengahX,tengahY); } }

1.68

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.69

Untuk mendapatkan file dengan extensi .class, maka Anda harus mengkompilasi file program java tersebut, setelah dikompilasi baru nantinya Anda akan mendapatkan file HALO.CLASS Untuk mengkompiler program java dilakukan dengan menggunakan baris perintah seperti ini, jika diumpamakan program Java Anda ada didirektori seperti berikut: C:\java\bin>javac “halo.java” Kemudian jika proses kompilasi sudah selesai, silahkan Anda lanjutkan dengan membuat program HTML, seperti berikut: Contoh Applet Java <html> <head> <title>Untitled Normal Page</title> </head> <body background="file:///F:/WEB/DOCS/IMAGES/BKGRNDS/backgrd.gif"> <h1 align="center">Ini adalah contoh applet Java </h1> <p><applet code="halo.class" align="baseline" width="400" height="100" name="appjava"><param name="Teks" value="Contoh Applet "></applet></p> </body> </html>

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.70

12.1. Applet Headline Factory

Gambar 11.4. Homepage JavaScript di http://www.lpkig.ac.id/public/banwar/

Dengan software ini, Anda akan bisa dengan mudah membuat sebuah applet Java yang cukup memadai untuk dipresentasikan. Tanpa harus menjadi seorang programer, Anda akan bisa menyisipkan sebuah applet Java yang akan berjalan secara otomatis pada saat halaman Web Anda dibuka. Dengan applet ini, halaman Web Anda akan tampak lebih indah dan menarik.

12.2. Applet Factory

Memulai Headline

Untuk memulai menjalankan, program ini ikuti langkah berikut: 1. Click Start, Program, Applet Headline Factory, kemudian akan ditampilkan output seperti berikut:

Gambar 12.1. Jendela Applet Headline Factory 2. Pilih Tab Headline, 3. Click Icon New Headline

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.71

Gambar 12.2. Jendela Tab Headline 4. Double Click Icon Untitled

Gambar 12.3. Jendela Headline Properties Tab Text 5. Pada Jendela Teks, masukan Teks yang ingin ditampilkan 6. Ganti ukuran huruf, jenis huruf, warna teks dan sebagainya jika diperlukan

12.3. Link and Hint

Untuk membuat Link dan Hint dari Teks yang Anda buat, ikuti langkah berikut: 1. Click Tab Link and Hint

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.72

Gambar 12.4. Jendela Link and Hint 2. Pada Box URL masukan alamat website yang ingin di tampilkan 3. Pada Box Targer Frame, masukan nama frame yang akan digunakan untuk menampilkan halaman ini. 4. Pada Box Hint, masukan Teks yang ingin Anda gunakan sebagai petunjuk alamat link tersebut 5. Ganti jenis huruf, ukuran huruf, warna dan latar belakang

12.4. Image
Untuk memasukan image atau gambar kedalam applet dapat dilakukan dengan cara sebagai berikut: 1. Click Tab Image

Gambar 12.5. Jendela Image 2. Click Icon berwarna Kuning untuk memasukan gambar Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.73

Gambar 12.6. Jendela Open Image 3. Click tombol Open jika gambar sudah terpilih 4. Pada Box Status Bar, masukan Teks yang Anda inginkan

Gambar 12.7. Jendela Image setelah diisi 5. Click tombol Close 6. Untuk melihat hasilnya Click Tombol

7. Akan ditampilkan contoh output seperti berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.74

12.5. HTML

Gambar 12.8. Jendela Output

Untuk menggabungkan Applet yang barusan Anda buat ke dalam sebuah halaman HTML, dapat dilakukan dengan cara : 1. Pilih Tab HTML

Gambar 12.9. Jendela HTML Click Icon 3. Kemudian, Anda gabungkan dengan halaman HTML yang sudah Anda miliki
2.

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.75

Gambar 12.12. Jendela HTML Berikut ini adalah contoh, sebuah Applet Java, digabungkan dengan halaman HTML yang di buat dengan menggunakan Frontpage

Gambar 12.11. Contoh Applet Java yang sudah tergabung dengan halaman HTML Gambar di bawah ini, adalah contoh sebuah website yang sudah menggunakan Applet Java, anda bisa melihatnya di alamat : http://www.nt.lpkig.ac.id/frozen

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.76

Gambar 12.12. Website http://www.stkb.ac.id/frozen

13.1. Applet Marquee Wizard
Dengan Applet Marquee Wizard, Anda memiliki kemampuan untuk memperindah halaman Web Anda. Software ini akan mempermudah pembuatan marquee (teks maupun citra berjalan) dalam bahasa Java, tanpa harus bersusah payah mempelajari pemrograman Java.

13.2. Memulai Applet Marquee Wizard
Untuk memulai menjalankan dan membuat Applet Marquee, kuti langkah berikut: 1. Pilih Start, Program, kemudian pilih Applet Marquee, akan ditampilkan jendela utama seperti berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.77

Gambar 13.1. Jendela Applet Marquee Wizard 2. Gantilah lebar dan tinggi applet, warna background, lebar border dsb, jika diperlukan

13.3. Memasukan Marquee
Untuk memasukan gambar yang akan dijadikan Marquee, ikuti langkah berikut: 1. Click Tab Marqueee 2. Click Icon New Marquee

Gambar 13.2. Jendela Tab Marquee 3. Click Icon Properties

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.78

Gambar 13.3. Jendela Marquee Properties Tab General 4. Click Icon untuk memasukan gambar/image

5. Pilih gambar yang anda inginkan

Gambar 13.4. Jendela Open Image 5. Click tombol Open 6. Tentukan Marquee Transition, untuk memberi efek pada Marquee Anda

13.4. Memasukan Hot Spots
Untuk memasukan Hot Spots, ikuti langkah berikut: 1. Click Tab Hot Spots 2. Click Icon akan ditampilkan jendela seperti berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.79

Gambar 13.5. Jendela Hot Spots 3. Double Click Hot Spots

4. 5. 6. 7.

Gambar 13.6. Jendela Open Image Pada Box URL masukan alamat URL yang ingin di link Tentukan Target Frame Masukan Marque Link Masukan image pada box Popup Image

13.5. Hint and Status Bar
Untuk memasukan Hint and Status Bar, ikuti langkah berikut: 1. Click Hint and Status Bar

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.80

Gambar 13.7. Tab Hint and Status Bar 2. 3. 4. 5. Pada box Hot spots Link, masukan alamat URL yang akan di Link Pada box Status Bar, masukan Teks yang akan ditampilkan pada jendela Status Click Close Kembalikan layar ke tab Hot Spots

Gambar 13.8. Tab Hint and Status Bar 6. Untuk membuat Hot Spots, drag hot spots ke jendela applet preview Untuk meilhat hasilnya Click tombol Test In Browser

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.81

Gambar 13.9. Jendela Test in Browser Untuk menggabungkan dengan halaman Web yang sudah Anda buat, lihat caranya di Bab 10.

14.1. Applet Navigation Factory
Melalui software ini, Anda akan bisa memperindah halaman Web dalam situs yang Anda buat. Tanpa harus menjadi seorang programer berpengalaman, Anda akan bisa menyisipkan applet ini dengan mudah ke dalam halaman Web yang Anda inginkan .

14.2. Memulai Applet Navigation Factory
Untuk memulai menjalankan Applet Navigation Factory, ikuti langkah berikut: 3. Pilih Start, Program, kemudian pilih Applet Navigation, akan ditampilkan jendela utama seperti berikut:

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.82

Gambar 14.1. Jendela Applet Navigation 4. Pilih menu File, New Applet, akan ditampilkan jendela seperti berikut:

Gambar 14.2. Jendela New Applet 5. Pilih Blank Applet 6. Pilih Menu Item 7. Pilih Icon New Item, akan ditampilkan jendela seperti berikut

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.83

Gambar 14.3. Jendela Menu Items 8. Pilih Icon Properties

Gambar 14.4. Jendela Properties 9. Masukan Teks pada box text, masukan Hint, ganti warna font background dan sebagainya 10. Pilih Tab Appearance

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.84

Gambar 14.5. Jendela Tab Appearance 11. Ganti Background untuk tombol, dan teks yang ada di dalam tombol

12. Untuk memasukan Link, masukan alamat URL pada box URL 13. Tentukan target fame 14. Masukan Teks untuk di tampilkan di status bar

Gambar 14.6. Jendela Link and Sound 15. Click Close 16. Untuk membuat beberapa tombol dari Menu Items Click Icon Duplicate Item

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.85

Gambar 14.7. Membuat beberapa tombol 17. Untuk melihat hasilnya, click tombol Test in Browser

15.1. Applet Password Wizard
Software ini akan membantu Anda untuk membuat username dan passwords untuk melindungi halaman Web Anda. Tanpa latar belakang pemrograman Java, perlindungan

Gambar 14.8. Output Test in Browser

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript
terhadap halaman Web yang Anda buat akan bisa dilakukan dengan mudah.

1.86

15.2. Memulai Applet Password
Untuk memulai menjalankan Applet Password, ikuti langkah berikut: 18. Pilih Start, Program, kemudian pilih Applet Password, akan ditampilkan jendela utama seperti berikut:

Gambar 15.1. Jendela Applet Password 19. Pilih menu File, New Applet, akan ditampilkan jendela seperti berikut:

Gambar 15.2. Jendela New Applet 20. Pada box Link, masukan alamat Link yang anda inginkan jika password benar 21. Pada box frame, masukan target frame Anda

15.3. Mengisi Tab Login
Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.87

Untuk memasukan pesan atau teks pada saat box password Anda ditampilkan ikuti langkah berikut: 1. Pilih tab Login, pada jendela Applet Wizard

Gambar 15.3. Jendela New Applet 2. Pada kotak Pre login Message, masukan pesan yang ingin ditampilkan pada jendela password 3. Pada kotak Login Message, masukan pesan yang ingin ditampilkan jika proses login selesai 4. Pada kotak Link, masukan alamat http yang ingin dijalankan jika Password yang dimasukan salah. 5. Masukan Target Frame

15.4. Mengisi Tab Users
Untuk memasukan daftar nama users yang diperbolehkan mengakses website Anda, caranya adalah sebagai berikut: 1. Pilih tab Users, pada jendela Applet Wizard 2. Click Icon New User 3. Pada jendela User Properties, masukan nama user dan password yang diinginkan

Gambar 15.4. Jendela User Properties Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Mengenal JavaScript

1.88

4. Click Close, untuk kembali ke jendela New Users 5. Untuk menambah users yang lain dapat dilakukan dengan cara seperti di atas Untuk memasukan ke Halaman Website yang sudah Anda buat, dapat dilakukan dengan cara yang sama seperti di Bab Sebelumnya. Di bawah ini adalah contoh, penggunaa Applet Password di dalam sebuah Website

Gambar 15.5. Contoh pemakaian Applet Password

Universitas Komputer Indonesia © 2004 Taryana - 0818426975

PDF Creator - PDF4Free v2.0

http://www.pdf4free.com

Sign up to vote on this title
UsefulNot useful