melakukan pengolahan awal halaman web . Berikut beberapa Tips & Trik Javascript yang cukup berguna
untuk kita pakai :
Menonaktifkan Klik Kanan Pada Mouse
Terkadang kita ingin halaman web yg kita buat tidak bisa dengan mudah dilihat source html atau
propertiesnya, salah satu cara sederhana adalah dengan menonaktifkan right click (klik kanan) pada
mouse. Berikut source programnya :
<html>
<<head>
<title> </title>
<script language="JavaScript">
var message="Hallo";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
<<head>
<title> </title>
<script language="JavaScript">
var message="Hallo";
///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}
function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
</head>
<body>
Menonaktifkan Klik Kanan Pada Mouse
</body>
</html>
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
</head>
<body>
Menonaktifkan Klik Kanan Pada Mouse
</body>
</html>
Bila halaman web tsb diakses, akan tampil box alert pada saat tombol mouse di klik kanan yg
menampilkan alert box dengan pesan “Maaf, klik kanan tidak berfungsi”
catatan : berjalan baik pada browser IE & Modzilla
menampilkan alert box dengan pesan “Maaf, klik kanan tidak berfungsi”
catatan : berjalan baik pada browser IE & Modzilla
Menampilkan Isi Dari Komponen Form
Beberapa komponen Form yang sering kita gunakan biasanya ditujukan untuk validasi data, apakah data
yang sudah kita masukkan sudah sesuai. Kita dapat menampilkan nilai/isi dari komponen tsb dengan
fungsi javascript. Berikut source programnya :
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
</head>
<body>
Menonaktifkan Klik Kanan Pada Mouse
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function tampil(){
tampil_1=form1.textfield.value; // simpan nilai dari objek form textfield sebagai tampil_1
tampil_2=form1.textarea.value; // simpan nilai dari objek form textarea sebagai tampil_2
tampil_3=form1.select.value; // simpan nilai dari objek form select sebagai tampil_3
tampil_all = 'komponen 1 berisi : '+tampil_1+' | '+'komponen 2 berisi :'+tampil_2+' | '+'komponen 3
berisi :'+tampil_3;
alert(tampil_all);
}
</script>
</head>
Beberapa komponen Form yang sering kita gunakan biasanya ditujukan untuk validasi data, apakah data
yang sudah kita masukkan sudah sesuai. Kita dapat menampilkan nilai/isi dari komponen tsb dengan
fungsi javascript. Berikut source programnya :
if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
</head>
<body>
Menonaktifkan Klik Kanan Pada Mouse
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function tampil(){
tampil_1=form1.textfield.value; // simpan nilai dari objek form textfield sebagai tampil_1
tampil_2=form1.textarea.value; // simpan nilai dari objek form textarea sebagai tampil_2
tampil_3=form1.select.value; // simpan nilai dari objek form select sebagai tampil_3
tampil_all = 'komponen 1 berisi : '+tampil_1+' | '+'komponen 2 berisi :'+tampil_2+' | '+'komponen 3
berisi :'+tampil_3;
alert(tampil_all);
}
</script>
</head>
<body>
<form name="form1" method="post" action=" ">
Komponen 1 : <input type="text" name="textfield"><br><br>
Komponen 2 : <textarea name="textarea"></textarea><br><br>
Komponen 3 : <select name="select">
<option value="linux">linux</option>
<option value="window">window</option>
</select><br><br>
<input type="button" name="Submit" value="Tekan" OnClick="tampil()">
</form>
</body>
</html>
<form name="form1" method="post" action=" ">
Komponen 1 : <input type="text" name="textfield"><br><br>
Komponen 2 : <textarea name="textarea"></textarea><br><br>
Komponen 3 : <select name="select">
<option value="linux">linux</option>
<option value="window">window</option>
</select><br><br>
<input type="button" name="Submit" value="Tekan" OnClick="tampil()">
</form>
</body>
</html>
Pada saat tombol “Tekan” kita tekan, maka properties OnClick=”tampil()” pada objek form button akan
memanggil fungsi javascipt, yaitu fungsi tampil(). Perhatikan pada souce program diatas, semua objek
form ditampung dalam variable tampil_1 s/d tampil_3. Semua variable tersebut digabungkan menjadi 1
variabel, yaitu variable tampil_all dan untuk menampilkan hasil dari inputan beberapa objek form tsb
dibrowser, digunakan fungsi alert().
catatan : berjalan baik pada browser IE & Modzilla
Menampilkan Window PopUp
Window Popup banyak digunakan untuk menampilan layanan keterangan iklan. Biasanya window popup
muncul dengan mengklik banner atau gambar yang terpasang di halaman web utama.
Berikut source programnya :
<html>
<<head>
<title> </title>
<script>
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=250,left =
304,top = 150.5');");
}
</script>
</head>
<body>
<a href="javascript:popUp('popup.html')">popup</a>
</body>
</html>
Perhatikan pada tag : <a href ="javascript:popUp('popup.html')">popup</a>
Pada saat mouse mengklik kata : popup, javascript akan memanggil fungsi popUp() dengan membawa
link popup.html. Window popup akan muncul dengan menampilan halaman popup.html. Karenanya kita
siapkan file popup.html,. Berikut source progamnya :
<html>
<head>
<title>popup</title>
</head>
<body>
Halaman PopUp
</body>
</html>
Kita dapat mengatur properties dari window popup yang akan dimunculkan dengan mengatur setting
properties pada fungsi popup(). Standar window popup yg sering digunakan adalah men-setting semua
properties menjadi 0 (disable), kecuali ukuran width untuk lebar popup & height untuk tinggi popup.
Semua setting tersebut dapat kita atur sesuai kebutuhan.
catatan : berjalan baik pada browser IE & Modzilla
Buka Window Baru Pada Saat Menutup Window
Kita terkadang menemukan pada saat ingin menutup suatu halaman web dengan mengklik tanda x pada
pojok kanan atas window, justru yang terjadi adalah terbukanya window baru. Biasanya konsep tersebut
banyak terdapat pada halaman web yang memuat iklan-iklan suatu produk. Konsepnya hampir sama
dengan membuka window popup pada pembahasan sebelumnya, hanya penempatan pemanggilan fungsi
javascriptnya yg berbeda. Berikut source programnya :
<html>
<head>
<title> </title>
<script>
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=250,left =
304,top = 150.5');");
}
// End -->
</script>
</ head >
<body onunload="javascript:popUp('popup.html')">
Tutup halaman web ini maka akan terbuka window baru secara otomatis
</ body >
</html>
<head>
<title> </title>
<script>
<!-- Begin
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "',
'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=250,height=250,left =
304,top = 150.5');");
}
// End -->
</script>
</ head >
<body onunload="javascript:popUp('popup.html')">
Tutup halaman web ini maka akan terbuka window baru secara otomatis
</ body >
</html>
Perhatikan pada tag < BODY BGCOLOR="#FFFFFF" onunload="javascript:popUp('popup.html') " >
properties : onunload inilah yang memanggil fungsi javascript untuk membuka halaman popup.html pada
saat window browser utama ditutup. Karenanya kita siapkan file popup.html , bisa diambil dari source file
popup.html di atas.
catatan : berjalan baik pada browser IE
Pembatasan Input Textbox Hanya Numerik
Seringkali pada saat kita membuat form web untuk suatu program aplikasi, hanya numerik (angka) saja
yang dibolehkan diisi pada textbox. Berikut source programnya :
Properties onKeyPress dengan kondisi diatas akan membatasi berfungsinya tombol di keyboard sebatas
numerik (angka) saja yang bisa diinput. Kita juga dapat mengubah kondisi tersebut sesuai keinginan kita
dengan mengganti atau menambahkan kode. Untuk kasus diatas, numeric (angka) pada tombol keyboard
adalah diantara kode 48 sampai kode 57. (http://rmhh.co.uk/ascii.html)
Catatan : berjalan dengan baik pada browser IE
Counter Karakter Pada TextArea
Kalau kita pernah mengunjungi situs web yang menyediakan fasilitas pengiriman sms gratis, biasanya
kita akan temui Form TextArea pengisian pesan sms yang akan kita kirim. TextArea tsb membatasi
jumlah karakter yg kita input. Berikut source programnya :
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="form1" method="post" action="">
<input name="periode" type="text" id="periode" size="15" maxlength="15" onKeypress="if
(event.keyCode < 48 || event.keyCode > 57) event.returnValue = false;">
</form>
</body>
</html>
Properties onKeyPress dengan kondisi diatas akan membatasi berfungsinya tombol di keyboard sebatas
numerik (angka) saja yang bisa diinput. Kita juga dapat mengubah kondisi tersebut sesuai keinginan kita
dengan mengganti atau menambahkan kode. Untuk kasus diatas, numeric (angka) pada tombol keyboard
adalah diantara kode 48 sampai kode 57. (http://rmhh.co.uk/ascii.html)
Catatan : berjalan dengan baik pada browser IE
Counter Karakter Pada TextArea
Kalau kita pernah mengunjungi situs web yang menyediakan fasilitas pengiriman sms gratis, biasanya
kita akan temui Form TextArea pengisian pesan sms yang akan kita kirim. TextArea tsb membatasi
jumlah karakter yg kita input. Berikut source programnya :
<html>
<head>
<title</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<script>
function CountMax()
{
var wert,max;
max = 100
wert = max-(document.form1.question.value.length);
if (wert < 0) {
alert("Maaf, batas maksimum pengisian adalah " + max + " karakter!");
document.form1.question.value = document.form1.question.value.substring(0,max);
wert = max-(document.form1.question.value.length);
document.form1.rv_counter.value = wert;
} else {
document.form1.rv_counter.value = max-(document.form1.question.value.length);
}
}
</script>
</head>
<body >
<form name="form1" method="post" action="">
<textarea name="question" cols="60" rows="3" id="question" OnFocus="CountMax();"
OnClick="CountMax();" ONCHANGE="CountMax();" onKeydown="CountMax();"
onKeyup="CountMax();" wrap="virtual"></textarea>
<font face="Arial, Helvetica, sans-serif, Bookman Old Style, Comic Sans MS" size="2">sisa
<input name="rv_counter" type="TEXT" size="3" maxlength="3" value="100readonly></form>
</body>
</html>
<head>
<title</title>
<meta http-equiv='Content-Type' content='text/html; charset=iso-8859-1'>
<script>
function CountMax()
{
var wert,max;
max = 100
wert = max-(document.form1.question.value.length);
if (wert < 0) {
alert("Maaf, batas maksimum pengisian adalah " + max + " karakter!");
document.form1.question.value = document.form1.question.value.substring(0,max);
wert = max-(document.form1.question.value.length);
document.form1.rv_counter.value = wert;
} else {
document.form1.rv_counter.value = max-(document.form1.question.value.length);
}
}
</script>
</head>
<body >
<form name="form1" method="post" action="">
<textarea name="question" cols="60" rows="3" id="question" OnFocus="CountMax();"
OnClick="CountMax();" ONCHANGE="CountMax();" onKeydown="CountMax();"
onKeyup="CountMax();" wrap="virtual"></textarea>
<font face="Arial, Helvetica, sans-serif, Bookman Old Style, Comic Sans MS" size="2">sisa
<input name="rv_counter" type="TEXT" size="3" maxlength="3" value="100readonly></form>
</body>
</html>
Perhatikan pada properties TextArea tsb, setiap kali kita mengetikkan karakter atau angka di TextArea,
maka fungsi javascript CountMax akan selalu menghitung jumlah karakter atau angka yang terisi pada
TextArea. Setiap hitungan akan langsung secara otomatis mengisi kolom TextBox (rv_counter)
dibawahnya. Pengisian tsb berupa pengurangan maksimal input keyboard yg didefinisikan dgn variable
max=100 oleh tiap ketikan input keyboard yang kita lakukan. Pada saat jumlah inputan keyboard sama
dengan atau lebih besar dari variable max=100, maka fungsi alert akan ter-eksekusi.
catatan : berjalan baik pada browser IE & Modzilla
Demikiankan beberapa Tips & Triks Pemrograman Javascript. Semua source program diatas sudah pernah
penulis pakai untuk membantu pembuatan proyek web aplikasi sebagai pengolahan awal dari suatu form.
Semoga artikel ini bermanfaat bagi kita semua. Terima Kasih.
0 komentar:
Posting Komentar