JavaScript adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML, bahasa ini adalah bahasa script pertama untuk web dan merupakan bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah di sisi user, yang artinya disisi browser bukan disisi server web. Untuk memanggil halaman web yang berisi script dari JavaScript hanya memerlukan browser (navigator) karena JavaScript tidak memerlukan kompilator atau penterjemah khusus untuk menjalankannya.
Script dari Javascript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator, karena di antara tag tertentu yang memerintah navigator untuk memperlakukan bahwa script tersebut adalah script dari JavaScript. Contoh dari script yang menunjukkan bahwa script tersebut adalah script Javascript :
<SCRIPT language=”Javascript”>
bagian untuk menuliskan script
</SCRIPT>
Namun sering kali pada navigator versi lama tidak mengenal tag tersebut dan melewatkan untuk dibaca. Contoh kode di atas tidak akan terlihat di navigator akan tetapi akan menampilkan jendela peringatan (berupa kotak dialog) karena script tersebut tidak lengkap dan merusak dokumen HTML yang sudah kita buat. Untuk itu maka ditambahkan tag komentar supaya scriptnya tidak dibaca sebagai script, akan tetapi di baca sebagai komentar dan tidak dieksekusi program. Contohnya adalah :
<SCRIPT language=”Javascript”>
<!–
bagian untuk menuliskan script
// –>
<SCRIPT>
1. Membuat Teks berjalan pada Statusbar
Untuk membuat teks yang berjalan pada status bar secara terus menerus anda dapat menambahkan script javascript sebagai berikut pada halaman HTML anda, letakkan setelah tag </head> :
<script>
<!–
function parameter()
{
this.tul = ” Manajemen Sistem Informasi ”
this.kec = 200;
this.pos = 0;
this.tulgul = ” “;
}
var gul=new parameter();
function gultul()
{
if(gul.pos > gul.tul.length)
{
gul.pos=0;
}
gul.tulgul=” “;
gul.tulgul +=gul.tul.substring(gul.pos, gul.tul.length);
gul.tulgul +=gul.tul.substring(0, gul.pos);
window.status = gul.tulgul;
gul.pos++;
setTimeout(“gultul()”, gul.kec);
}
//–>
</script>
Penjelasan :
this.tul à merupakan variabel untuk menyimpan teks yang akan dimanipulasi.
this.tulgul à merupakan variabel yang digunakan untuk mengubah nilai atribut VALUE
Untuk memanipulasi teks menggunakan substring dan untuk menentukkan selang waktu pergantian nilai atribut VALUE menggunakan metode setTimeout()
Untuk menulis pada statusbar, bisa dilakukan dengan mengisi properti status pada objek window. Seperti : window.status = “tulisan pada statusbar”
Fungsi gultul() akan dijalankan 1 detik kemudian (satuannya adalah 1/1000 detik). Agar fungsi gultul() dapat dijalankan secara terus menerus setiap selang waktu tertentu, maka metode setTimeout() harus ditempatkan pada bagian akhir fungsi gultul().
Agar fungsi gultul() langsung dijalankan ketika halaman diakses, tempatkan fungsi gultul() pada elemen BODY seperti berikut :
<body>
2. Membuat Teks Bergulung pada Area Teks
Teks yang terdiri dari satu atau lebih baris bergulung dari bawah area teks menuju ke atas secara terus menerus, scriptnya adalah sebagai berikut :
<script>
<!–
var pesan = new Array()
pesan[1]=”Pengumunan”
pesan[2]=”Manajemen”
pesan[3]=”Sistem”
pesan[4]=”Informasi”
var jmlpsn=4
var pesangulung = “”
var maks=2*jmlpsn
var kec=500
var leb=20
var awal=1
var akhir=1
for(x=1; x<=jmlpsn; x++)
{
pesan [x + jmlpsn] = pesan [x]+ “\r\n”
pesan [x] = ” ” + “\r\n”
pesan [x+maks] = ” ” + “\r\n”
}
function gultul()
{
pesangulung = “”
if(akhir >= maks + jmlpsn)
{
awal=1
}
akhir=awal + jmlpsn -1
for(x=awal; x<=akhir; x++)
{
pesangulung += pesan[x]
}
document.form1.kotakgulung.value = pesangulung
awal++
setTimeout(“gultul()”,kec)
}
–>
</script>
Kemudian jalankan fungsi gultul()
<body>
Dan letakkan script berikut pada bagian halaman yang akan ditampilkan :
<script>
document.write(“<form name=’form1′>”)
document.write(“<textarea readonly name=’kotakgulung’ rows=” +jmlpsn+”cols=” +leb+”>”)
document.write(“</textarea>”)
document.write(“</form1>”)
</script>
3. Menampilkan Tanggal dan Jam
Untuk menampilkan hari, tanggal, bulan, tahun dan jam. Tambahkan script berikut pada bagian halaman yang akan menampilkanya:
<style>
.jam{
font-family:Arial, Helvetica, sans-serif;
color:#000080;
font-size:12px;
position:relative;
top:auto;
left:auto;
}</style>
<script language=”javascript”>
<!–
var tgllengkap = new String();
var namahari = (“Minggu Senin Selasa Rabu Kamis Jumat Sabtu”);
namahari = namahari.split(” “);
var namabulan = (“Januari Februari Maret April Mei Juni Juli Agustus September Oktober November Desember”);
namabulan = namabulan.split(” “);
var tgl = new Date();
var hari = tgl.getDay();
var tanggal = tgl.getDate();
var bulan = tgl.getMonth();
var tahun = tgl.getYear();
function tampiljam()
{
var waktu = new Date()
var jam = waktu.getHours();
var menit = waktu.getMinutes();
var detik = waktu.getSeconds();
var jamlengkap = new String();
if(menit <= 9)
menit = “0″ + menit;
if(detik <= 9)
detik = “0″ + detik;
jamlengkap = jam + “:” + menit + “:” + detik;
tempat.innerHTML = jamlengkap;
setTimeout(“tampiljam()”,1000);
}
tgllengkap = namahari[hari] + “, ” + tanggal + ” ” + namabulan[bulan] + ” ” + tahun;
document.write(“<font size=1 face=’helvetica,arial’ color=’#000080′>” + tgllengkap + “<\/font>”);
window.onload = tampiljam
//–>
</script>
<div></div>
4. Membuat menu drop down
Menu drop down merupakan menu yang jika di klik menu tersebut akan muncul menu kebawah, untuk membuatnya scriptnya adalah sebagai berikut :
Sebelumnya tambahkan script ini pada bagian style :
<style>
.title{
font-family:verdana;
font-weight:bold;
font-size:12px;
position:relative;
width:80px;
background:blue;
color:white;
text-align:center;
cursor:hand;
}
.menuitem{
font-family:verdana;
font-size:12px;
text-decoration:none;
position:relative;
cursor:default;
}
</style>
<script>
var i=true
function showhide()
{
if(i)
document.all.mn0.style.visibility=”visible”;
else
document.all.mn0.style.visibility=”hidden”;
i=!i;
}
</script>
Kemudian tambahkan script berikut pada bagian halaman yang akan menampilkannnya :
<div style=”top:auto; left:0px;” onClick=”showhide()”>LINK</div>
<div style=”top:auto; left:0px; visibility:hidden; z-index:10″</div>
<table border=”1″ cellpadding=”0″ cellspacing=”0″>
<tr>
<td width=”80″ bgcolor=”cyan” onMouseOut=”style.background=’cyan’”><a class=”menuitem” href=”http://google.com”>Google</a></td></tr>
<tr>
<td width=”80″ bgcolor=”cyan” onMouseOut=”style.background=’cyan’”><a class=”menuitem” href=”http://yahoo.com”>Yahoo!</a></td></tr>
</table>
</div>
0 komentar:
Posting Komentar