Inside: Java Sript

1.3 JAVA SCRIPT

Javascript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, sepanjang sejarah internet bahasa ini adalah bahasa skrip pertama untuk web. Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web.

Javascript bergantung kepada browser(navigator) yang memanggil halaman web yang berisi skrip skrip dari Javascript dan tentu saja terselip di dalam dokumen HTML. Javascript juga tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya (pada kenyataannya kompilator Javascript sendiri sudah termasuk di dalam browser tersebut). Lain halnya dengan bahasa “Java” (dengan mana JavaScript selalu di banding bandingkan) yang memerlukan kompilator khusus untuk menterjemahkannya di sisi user/klien.

2.3.1. Keperluan Java Script

Untuk mempelajari pemrograman Java Script, ada dua piranti yang diperlukan, yaitu :

1. Teks Editor

Digunakan untuk menuliskan kode-kode Java Script, teks editor yang dapat digunakan antara lain notepad dan ultra edit.

2. Web Browser

Digunakan untuk menampilkan halaman web yang mengandung kode-kode Java Script. Web browser yang digunakan harus mendukung Java Srcipt. Browser yang dapat digunakan adalah internet explorer dan Netscape Navigator.

2.3.2. Penulisan Java Script

Kode Java Script dituliskan pada file HTML.Terdapat dua cara untuk menuliskan kode-kode Java Script agar dapat ditampilkan pada halaman HTML, yaitu :

a) Java script ditulis pada file yang sama

Untuk penulisan dengan cara ini, perintah yang digunakan adalah

<SCRIPT LANGUANGE =”JavaScript” >program java script disini</SCRIPT>. Perintah tersebut biasanya diletakkan diantara Tag <BODY>…</BODY>

Contoh Penulisan :

<HTML>

</HEAD>

<BODY>

kode javascript disini

</SCRIPT>

kode HTML disini

</BODY>

</HTML>

b) Javascript ditulis pada file terpisah

Kode Javascript bisa juga kita buat dalam file terpisah dengan tujuan agar dokumen HTML isinya tidak terlalu panjang. Atribut yang digunakan adalah

<SCRIPT SRC=”namafile.js”>…</SCRIPT>

Diantara tag <SCRIPT………> dan <SCRIPT> tidak diperlukan lagi kode Javascriptnya karena sudah dibuat dalam file erpisah. File yang mengandung kode Javascript berekstensi .js

2.3.3. Program Pertama Javascript

Pada bagian ini kita akan membuat program dengan menggunakan Javascript.

Program ini akan menampilkan teks “ Belajar Pemrograman Javascript

<HTML>

<BODY>

<!--

document.write("Belajar Pemrograman Javascript!");

//-->

</SCRIPT>

</BODY>

</HTML>

<HTML>

<HEAD><TITLE>BElajar Javascript Yuuuuuu</TITLE>

</HEAD>

<!--

document.writeln("<PRE>");

document.write("<B><FONT SIZE=5>");

document.writeln("SELAMAT DATANG DI JAVASCRIPT");

document.write("</B></FONT>");

document.write("<I>");

document.writeln("Program ini merupakan contoh sederhana menampilkan Teks!");

document.write("</I>");

document.writeln("Dengan Javascript!!!!!!!!");

//-->

</SCRIPT>

</BODY>

</HTML>

Objek document mempunyai dua metode untuk menuliskan teks, yaitu write dan writeln. Metode write digunakan untuk menuliskan teks tanpa ganti baris, sedangkan metode writeln digunakan untuk menuliskan teks dengan ganti baris.

Berikut diberikan contoh Program Javascript yang diletakkan di file lain dan dipanggil melalui suatu file HTML

File isi.js

document.writeln("<CENTER>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("<H1>UNIVERSITAS KOMPUTER INDONESIA</H1>");

document.writeln("<H2>FAKULTAS TEKNIK dan ILMU KOMPUTER<H2>");

document.writeln("<H3>JURUSAN TEKNIK INFORMATIKA<H3>");

document.writeln("<HR WIDTH=600 COLOR=Black>");

document.writeln("</CENTER>");

File HTML

<HTML>

<BODY>

<B>Contoh ini menggunakan Javascript yang diambil dari File lain..</B>

<P>

</BODY>

</HTML>

2.3.4. Objek Untuk memasukkan Data

Terdapat beberapa objek yang dapat digunakan untuk memeasukkan data. Objek-objek tersebut biasanya terdapat dalam suatu form. Adapun objek-objek tersebut meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek Select.

Objek Text

Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh penggunaannya dapat kita lihat pada contoh berikut :

Contoh Program JavaScript

<html>

<head><title>Latihan Dengan Objek Text</title></head>

<body>

<!--

function tekan()

{

var namastr = (document.fform.nama.value);

var alamatstr = (document.fform.alamat.value);

document.fform.onama.value = namastr;

document.fform.oalamat.value = alamatstr;

}

//-->

</script>

<H1> Memasukkan Data Dengan Objek Teks</H1><hr>

<PRE>

Nama Anda : <input type="text" size="11" name="nama">

Alamat : <input type="text" size="25" name="alamat">

</PRE>

<BR>

<H3>Output</H3>

<PRE>

Jadi Nama Anda adalah :<input type="text" size="11" name="onama">

Alamat Anda di :<input type="text" size="25" name="oalamat">

</form>

</body>

</html>

Objek Radio

Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data. Karena selalu berupa Array , untuk mengakses satu tombol radio digunakan radio[indeks]. Disamping itu objek radio juga mempunyai nili True jika dipilih dan False jika tidak. Untuk memilih suatu objek radio menggunakan properti Checked.

Contoh Program JavaScript
<html> <head><title>Latihan Dengan Objek Radio</title></head> <body> <script languange ="JavaScript"> <!-- function radio_box(form) { var ket = ""; if (form.wanita.checked == true) { ket = "Wanita"; } else { ket = "Pria"; } alert('Anda adalah seorang ' +ket); } //--> </script> <form> <H1> Memasukkan Data Dengan Objek Radio</H1><hr> <p><input type="radio" value="wanita" name="wanita">Wanita</p> <hr> <p><input type="button" value="CONFIRM" onclick="radio_box(this.form)"> <input type="reset" value="RESET"></p> </form> </body> </html

Objek Checkbox

Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek. Penggunaannya hampir sama seperti objek radio.

Contoh Program JavaScript

<html>

<head><title>Latihan Dengan Objek Checkbox</title></head>

<body>

<!--

function radio_box(form)

{

var ket = "";

var ket1 ="";

if (form.bola.checked == true)

{

ket = "Nonton Bola";

}

if (form.tv.checked == true)

{

ket1 = " Nonton Tv";

}

alert('Hobby anda ' +ket+''+ket1);

}

//-->

</script>

<form>

<H1> Memasukkan Data Dengan Objek Checkbox</H1><hr>

<p>Hobby anda :

<input type="checkbox" value="ON" name="bola">Nonton Sepak Bola

<input type="checkbox" value="ON" name="tv">Nonton televisi</p>

<hr>

</form>

</body>

</html>

Objek TextArea

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

Contoh Program JavaScript
<html> <head><title>Latihan Dengan Objek TextArea</title></head> <body> <script languange ="JavaScript"> <!-- function tekan() { var ketstr = (document.fform.Ket.value); document.fform.Oket.value = ketstr; } //--> </script> <form name ="fform"> <H1> Memasukkan Data Dengan Objek TextArea</H1><hr> <h3>Keterangan :<h3><br> <textarea name="Ket" rows="3" cols="30"></textarea> <BR><BR> <input type="button" value="kirim" onclick="tekan()"> <input type="reset" value="ulang"> <H3>Output Keterangan :</H3> <textarea name="Oket" rows="3" cols="30"></textarea> </form> </body> </html>

Objek Select

Objek Select menyimpan informasi tentang elemen form yang berupa kotak daftar. Objek select berguna apabila di dalam form terdapat banyak pilihan yang telas mempunyai nilai tertentu.

Contoh Program JavaScript

<html>

<head><title>Latihan Dengan Objek Select</title></head>

<body>

<!--

function tekan()

{

var jurusanstr = (document.fform.Jurusan.value);

document.fform.Ojurusan.value = jurusanstr;

}

//-->

</script>