Makalah III
EL 517
Teknologi Informasi
Mengembangkan Homepage dengan JavaScript

Dosen : Dr. Ir. Onno W. Purbo

Teddy Surya Gunawan
13294120

Jurusan Teknik Elektro
Institut Teknologi Bandung
1997
Mengembangkan Homepage dengan JavaScript

Untuk mengembangkan dan mempercantik homepage, ternyata tidak hanya dengan menambahkan gambar-gambar yang bagus, atau GIF yang dapat bergerak, tetapi dapat juga kita menggunakan JavaScript. JavaScript adalah bahasa pemrograman sederhana untuk pengembangan aplikasi Internet, khususnya homepage atau WWW. Bagaimanakah cara menggunakannya?

Tidak seperti bahasa Java induknya atau Applet Java yang harus dikompilasi dulu di server sebelum dieksekusi di browser, JavaScript bisa langsung dieksekusi oleh browser. Dengan menggunakan JavaScript maka tidak memerlukan server untuk kompilasi. File homepage kita (*.htm atau *.html) dapat langsung dieksekusi oleh browser.
	Tidak semua Browser dapat menampilkan hasil dari JavaScript. Browser-browser yang dapat menampakkan JavaScript adalah Netscape Navigator 2.0, Netscape Navigator 3.0 dan Internet Explorer 3.0 atau versi-versi sesudahnya. Tetapi mungkin saja dengan versi yang berbeda JavaScipt bisa jalan di salah satu versi tetapi tidak pada versi laiinya. Begitu juga ada perbedaan bila JavaScript dijalankan pada browser yang berbeda. Hal tersebut disebabkan karena adanya perbedaan plug-in yang dimasukkan ke dalam browser-browser tersebut.
	Alamat download untuk Netscape Navigator adalah http://www.netscape.com/, dan untuk Internet Explorer adalah  http://www.microsoft.com. Berikut ini adalah contoh-contoh homepage dalam bentuk HTML yang memanfaatkan kehebatan JavaScript yang dikompilasi di browser Netscape Navigator 4.0.
	Agar dapat diakses oleh orang lain, maka file-file HTML ini juga file-file gambar dapat ditaruh pada mesin UNIX. Dalam hal ini ditaruh di students.itb.ac.id/~tesur pada direktori public_html. Dengan catatan Web server di mesin tersebut dijalankan sehingga bisa diakses di Internet.

Membuat tampilan awal homepage

Contoh file HTML-nya adalah sebagai berikut :

<html>
<head>
<title>Demo JavaScript</title>
</head>
<script>
function scrollit_r2l(seed){ 
       var m1  = "Selamat datang di Homepage si Tesur tea ....    ";
        var m2  = "Teddy Surya Gunawan   ....   ";
        var m3  = "Teknik Elektro - ITB  ....   ";
        var m4  = "Selamat menikmati ....  ";
        var msg=m1+m2+m3+m4;
        var out = " ";
        var c   = 1; 
       if (seed > 100) { 
               seed--;
                var cmd="scrollit_r2l(" + seed + ")";
                timerTwo=window.setTimeout(cmd,100);
        }
        else if (seed <= 100 && seed > 0) {
                for (c=0 ; c < seed ; c++) {
                        out+=" ";
                }
                out+=msg;
                seed--;
                var cmd="scrollit_r2l(" + seed + ")";
                    window.status=out;
                timerTwo=window.setTimeout(cmd,100);
        }
        else if (seed <= 0) { 
               if (-seed < msg.length) { 
                       out+=msg.substring(-seed,msg.length);
                        seed--;
                        var cmd="scrollit_r2l(" + seed + ")";
                        window.status=out;
                        timerTwo=window.setTimeout(cmd,100);
                }
                else {
                        window.status=" ";
                        timerTwo=window.setTimeout("scrollit_r2l(100)",75);
                }
        }
}
</script>
<body bgcolor=CYAN onLoad="timerONE=window.setTimeout('scrollit_r2l(100)',500);">
<body text="#000000" link="#0000FF" vlink="#ff0000" alink="#0000ff">
<center>
<h1> Homepage si Tesur tea </h1><hr>
<center><h4> Demo JavaScript (Perlu Netscape 2.0 atau lebih) </h4>
<BR><table border=7>
<tr><td align=center><A HREF="alive.htm">Berapa detik kamu telah hidup</a></td>
<td align=center><a href="js_maze.htm">Maze Game</a></td></tr>
<tr><td align=center><a href="tglahir.htm">Hari tanggal lahir anda</a></td>
<td align=center><a href="selamat.htm">Scrolling banner</a></td></tr>
<tr><td align=center><a href="stopwatch.htm">Stopwatch</a></td>
<td align=center><a href="link.htm">Link ... </a></td></tr>
</table><br>
<center><img src="tesur.gif"></center>
<H3>Teddy Surya Gunawan<BR>
Jl.Bojongkoneng no.43<BR>
Bandung 40125<BR>
Jawa Barat<BR>
Indonesia<BR>
E-mail : <A HREF="MAILTO:tesur@students.itb.ac.id">tesur@students.itb.ac.id</A>
</body>
</html>

Pada file HTML di atas terdapat sebuah menu kecil yang ditunjukkan dengan adanya <TABLE>. Dari menu tersebut di-link ke file-file HTML lainnya, misalnya ke game, useful link, tool, dan sebaginya. Hal ini akan memudahkan kita untuk mengakses HTML lainnya. Tentu saja menu-menu tersebut dapat diganti dengan menu-menu lain yang berguna, misalnya tentang data pribadi, foto keluarga, dan sebagainya. Selain itu terdapat juga fungsi scrollit yang akan membuat tulisan dalam variabel msg (msg=m1+m2+m3+m4) bergerak-gerak di scroll bar. Hal ini akan mempercantik tampilan homepage kita. Berikut ini adalah hasil tampilan kompilasi browser Netscape :

Menu-menu yang ada contohnya adalah :
-	berapa detik kamu telah hidup
-	maze game
-	hari tanggal lahir anda
-	scrolling banner
-	stopwatch
-	link …

Membuat Link

Contoh membuat link adalah pada menu di atas (Link …). Inti dari pembuatan link ini adalah statemen JavaScript sebagai berikut :

<a href="http://www.republika.co.id">
Koran Republika</a>

Dimana http://www.republika.co.id adalah tujuannya. Href ini dapat berisi file, gambar, http ataupun ftp.

Contoh programnya adalah sebagai berikut :

<html>
<head>
<title>Link-link yang berguna</title>
</head>
<body bgcolor="#bobobo" text="#000000" link="#0000FF" vlink="#ff0000" alink="#0000ff">
<center>
<h1> Link-link yang berguna </h1>
<BR><hr><table border=7>
<td align=center><a href="http://www.republika.co.id">Koran Republika</a></td></tr>
<td align=center><a href="http://www.intel.com">Intel</a></td></tr>
<td align=center><a href="http://www.microsoft.com">Microsoft</a></td></tr>
<td align=center><a href="http://www.islamicity.org">Islamicity</a></td></tr>
<td align=center><a href="http://www.mot-sps.com">Motorola</a></td></tr>
<td align=center><a href="http://www.metacrawler.com">Search Engine</a></td></tr>
</table><br>
<script language="LiveScript">
function GoBack()  {
        if (confirm("Yakin mau kembali ke halaman sebelumnya?")) {
                history.back()
        }
    }
</script>
<center>
<form>
<table border="9" cellpadding="9">
<td>
<input type="button" value="Kembali" onclick="GoBack()">
</td>
</table>
</form>
</center>

Dari HTML di atas maka dibuat link ke :
-	http://www.republika.co.id
-	http://www.intel.com
-	http://www.microsoft.com
-	http://www.islamicity.org
-	http://www.mot-sps.com
-	http://www.metacrawler.com

Link-link ini dapat dirubah-rubah sesuai dengan kebutuhan kita masing-masing. Pada akhir program ada script yaitu fungsi GoBack() untuk kembali ke halaman sebelumnya.

Menentukan Hari Tanggal Lahir

Berikut ini adalah contoh file HTML yang akan menetukan hari tanggal lahir, misalnya tanggal 17 Agustus 1945 adalah hari Jumat.

<HTML>
<HEAD>
<TITLE>Hari Tanggal Lahir Anda</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function MakeArray(n) {
   this.length = n;
   for (var i = 1; i <=n; i++) {
     this[i] = 0;
   }
}
days = new MakeArray(7);
days[0] = "Sabtu"
days[1] = "Minggu"
days[2] = "Senin"
days[3] = "Selasa"
days[4] = "Rabu"
days[5] = "Kamis"
days[6] = "Jumat"
months = new MakeArray(12);
months[1] = "Januari" 
months[2] = "Februari" 
months[3] = "Maret" 
months[4] = "April" 
months[5] = "Mei" 
months[6] = "Juni" 
months[7] = "Juli" 
months[8] = "Agustus"
months[9] = "September" 
months[10] = "Oktober"
months[11] = "November"
months[12] = "Desember"

function compute(form) {
   var val1 = parseInt(form.day.value, 10)
   if ((val1 < 0) || (val1 > 31)) {
      alert("Tanggal di luar jangkauan")
   }
   var val2 = parseInt(form.month.value, 10)
   if ((val2 < 0) || (val2 > 12)) {
      alert("Bulan di luar jangkauan")
   }  
   var val2x = parseInt(form.month.value, 10)
   var val3 = parseInt(form.year.value, 10)
   if (val3 < 1900) {
      alert("Kamu tua banget!!")
   }
   if (val2 == 1) {
      val2x = 13;
      val3 = val3-1
   }
   if (val2 == 2) {
      val2x = 14;
      val3 = val3-1
   }
   var val4 = parseInt(((val2x+1)*3)/5, 10)
   var val5 = parseInt(val3/4, 10)
   var val6 = parseInt(val3/100, 10)
   var val7 = parseInt(val3/400, 10)
   var val8 = val1+(val2x*2)+val4+val3+val5-val6+val7+2
   var val9 = parseInt(val8/7, 10)
   var val0 = val8-(val9*7)
   form.result1.value = form.day.value+" "+months[val2]+" "+form.year.value;
   form.result2.value = days[val0];
}   
</SCRIPT>
</HEAD>
<body bgcolor="f0c314">
<CENTER>
<H3><i>Tanggal berapa kamu lahir?</i></H3>
<b>Masukkan data</b> (lalu tekan Proses):<P>
<FORM>
Tanggal:<INPUT TYPE="text" NAME="day" SIZE=2 >
Bulan:<INPUT TYPE="text" NAME="month" SIZE=2 >
Tahun:<INPUT TYPE="text" NAME="year" SIZE=4 >
<P>
<INPUT TYPE="button" VALUE="Proses" ONCLICK="compute(this.form)">
<INPUT TYPE="reset" VALUE="Hapus">
<P>
Tanggal lahir:<BR>
<INPUT TYPE="text" NAME="result1" SIZE=18 >
<P>
Kamu lahir pada hari:<BR>
<INPUT TYPE="text" NAME="result2" SIZE=18 >
</FORM>
</CENTER>
<script language="LiveScript">
function GoBack()  {
        if (confirm("Yakin mau kembali ke halaman sebelumnya?")) {
                history.back()
        }
    }
</script>
<center>
<form>
<table border="9" cellpadding="9">
<td>
<input type="button" value="Kembali" onclick="GoBack()">
</td>
</table>
</form>
</center>
Gambar tampilannya adalah sebagai berikut :

Demikianlah beberapa contoh JavaScript yang “siap” mempercantik homepage anda. Tentu saja JavaScript di atas dapat dikembangkan lebih lanjut tergantung kekreativitasan kita sendiri. Dengan mempelajari dan mempraktekan JavaScript, suatu saat nanti anda akan berkata….

Saya sangat suka Bahasa Jawa…

Selamat mencoba

Referensi :

[1] http://www.htmlgoodies.com
[2] http://www.gamelan.com