Kadang-kadang kita ingin memproteksi halaman untuk kalangan sendiri. Usaha yang dapat kita lakukan untuk melakukan proteksi tersebut adalaj dengan menanyakan username dan password. Ketika
pengunjung melakukan klik pada tombol submit, kode JavaScript pada halaman akan memeriksa apakah username dan jika password benar, maka halaman yang sebenarnya akan ditampilkan. Kodenya adalah sebagai berikut.
<FORM NAME="login">
Username: <INPUT NAME="username"><BR>
Password: <INPUT NAME="password" TYPE=PASSWORD><BR> <INPUT TYPE=BUTTON VALUE="Login" onClick="verifyLogin()"> <INPUT TYPE=RESET> </FORM> <SCRIPT LANGUAGE="Javascript"> <!-- function verifyLogin() {
var myForm = document.login;
if (myForm.username.value == "elvis" && myForm.password.value == "presley") window.location.href = "secretpage.html";
alert("Unknown username or wrong password"); }
// --> </SCRIPT>
Yang ini form yang sebenarnya
Username: Password:
Dengan sedikit forward dan berhasil. Masalahnya adalah orang dapat melakukan suatu View|Source dan menemukan username serta password untuk halaman yang di proteksi password, tentu saja contoh ini kurang sempurna contoh ini kurang baik.
Yang kita butuhkan adalah suatu metode di mana pada HTML source-nya tidak akan kelihatan username dan password serta halaman target. Suatu metode yang umum digunakan adalah membuat nama halaman target berdasarkan username dan password yang dimasukkan oleh pemakai dan mengarahkan browser ke halaman tersebut. Perhatikan hasil modifikasi fungsi verifyLogin(.
<SCRIPT LANGUAGE="Javascript"> <!--
function verifyLogin() {
window.location.href = myForm.username.value + myForm.password.value + ".html"; } // --> </SCRIPT>
Sekarang fungsi akan melakukan pengabungan terhadap username, pasword dan ".html" serta mengarahkan browser ke lokasi tersebut. Jadi jika pengunjung memasukkan secret sebagai username dan page sebagai password, dia akan mendapatkan secretpage.html. Atau dengan kata lain mereka tidak akan mengetahui username dan paswword yang benar dan memasukan foo sebagai username dan bar sebagai password, mereka akan diarahkan ke html yang tidak ada foobar.html dan mendapatkan kesalahan yang menyatakan halaman tersebut tidak ada.
1. image_css.htm <html> <head> <style type=”text/css”> body {
background-image:url(‘file.jpg’); background-repeat:no-repeat; background-position:center center; } </style> </head> <body> </body> </html> 2. Latihan1.htm <html> <head> </head>
<body>
<script>
var username;
username=prompt("Siapa nama Anda??");
alert("Hello..." + username);
//Script tentang waktu
Sekarang = new Date();
document.write("Hari ini " + Sekarang.getDate() + "-" + (Sekarang.getMonth()+1)+ "-" + Sekarang.getFullYear() + ", jam: " + Sekarang.getHours() + ":" + Sekarang.getMinutes() + "." + Sekarang.getSeconds())
</script>
</body>
</html>
Seperti script sebelumnya, script di atas dibuka dengan <SCRIPT LANGUAGE="JavaScript"> dan ditutup dengan </SCRIPT>. Kemudian di baris kedua diperkenalkan tanda "// " yang berarti bahwa apapun yang berada di sebelah kanan tanda tersebut akan diabaikan dan hanya dianggap sebagai komentar.
Kemudian baris berikutnya adalah perintah Sekarang = new Date(); Di sini kita membuat object baru yang diberi nama "Sekarang". Obyek ini kita isi dengan waktu saat halaman ini di-load, yaitu
menggunakan perintah new Date(). Kemudian ditutup dengan tanda titik koma (;) untuk mengakhiri sebuah statemen. Pada baris berikutnya kita menuliskan apa yang ada di dalam kurung ke halaman html, menggunakan document.write seperti biasa. Semua yang berada di antara tanda petik ("), misalnya "Hari ini " atau ", jam: " akan ditampilkan apa adanya, dan yang tidak diberi tanda petik akan diproses. Di sini kita menemui beberapa hal baru, yaitu Sekarang.getDate(), juga Sekarang.getMonth() sampai terakhir Sekarang.getSeconds(). Semua get...() tersebut adalah "method" yang bekerja pada "object" yang bernama Sekarang, di mana getDate() akan akan memberikan nilai tanggal, getMonth() akan memberikan nilai bulan, dst. Khusus untuk bulan, kita menggunakan perintah
Sekarang.getMonth()+1 karena java script selalu menghitung mulai dari 0. Sehingga bulan Januari akan berharga "0", bulan Februari akan berharga "1", dst.
3. tombol_warna.htm <html> <head> </head>
<body>
<script>
function warna(pilihan)
{
alert("Wah ternyata kamu suka " + pilihan + " toh.")
document.bgColor=pilihan
}
</SCRIPT>
<h3>Pilih warna favorit anda.</h3>
<FORM>
<INPUT TYPE="button" VALUE="Biru" onClick="warna('lightblue')">
<INPUT TYPE="button" VALUE="Pink" onClick="warna('pink')">
<INPUT TYPE="button" VALUE="Kelabu" onClick="warna('darkgray')">
<INPUT TYPE="button" VALUE="Oranye" onClick="warna('peachpuff')">
<INPUT TYPE="button" VALUE="Putih" onClick="warna('white')">
</FORM> </script> </body> </html>
Pada script di atas, kita menggunakan fungsi "warna(pilihan)". Variabel "pilihan" di sini berasal dari input yang diberikan pengunjung melalui form. Anda dapat melihat pada tag <INPUT ..> di bawah, kita
menggunakan event handler onClick="warna(`pilihan'). Harga variabel pilihan akan tergantung pada tombol mana yang kita tekan. Kemudian pada fungsi "warna(pilihan)" di atas, pilihan kita ini ditampilkan dengan perintah alert(), juga digunakan untuk mengubah warna latar, menggunakan property
"document.bgColor". Untuk jenis-jenis warna, selain menggunakan kode heksadesimal (seperti #ffffff), kita juga dapat menggunakan kata seperti di atas (lightblue, pink, burlywood, dll)
4. buka_window.htm <html> <head> </head> <body> <script>
window.open('hello.htm', 'latihan', config='height=300,width=300') </script>
</body> </html>
Dengan bentuk script seperti itu, otomatis saat halaman ini diload, akan muncul pop up seperti yang telah anda lihat. Anda juga dapat memunculkan window baru saat menggunakan link
<html> <head> <script> </script> </head> <body>
<A HREF="javascript:void(0)" onClick="window.open('hello.htm', 'latihan',
config='height=300,width=300')">Klik ini kalau mau pop up-nya keluar lagi :D</A> </body>
</html>
Klik ini kalau mau pop up-nya keluar lagi :D
(Di sini saya memanggil "javascript:void(0)", yang artinya sama saja dengan tidak memanggil apa-apa) Sekarang kita bahas satu-persatu perintah java script di atas. Perintah window.open() berguna untuk membuka window baru. Anda sudah melihat contohnya tadi. Sedang atribut (atau apapun namanya) yang berada dalam kurung terdiri dari:
('alamat url', 'nama window yang baru dibuka', config='parameter')
Jadi script kita di atas memanggil file "contoh_java_5a.html" dan memberi nama window baru tersebut dengan nama "latihan". mmm ... kita bisa memberi nama apapun, persis dengan memberi nama hewan kesayangan kita. Tentu saat ingin memanggil, kita harus memanggilnya dengan nama yang sesuai. Sedang parameter yang dikonfigurasi bisa terdiri dari tinggi (height) dan lebar (width) window yang akan dibuka. Di atas kita menentukan tinggi 300 pixel dan lebar juga 300 pixel. Ada beberapa parameter lain yang dapat diatur, antara lain:
toolbar="yes" atau "no", berguna untuk menentukan ada tidaknya toolbar (menu di atas, yang isinya BACK, FORWARD, STOP, RELOAD, dll).
menubar="yes" atau "no", berguna untuk menentukan ada tidaknya menubar (menu di atas juga, yang isinya FILE, EDIT, VIEW, GO, dll).
scrollbars="yes" atau "no", menentukan ada tidaknya scrollbars. Scrollbars tuh yang bisa digeret untuk ngeliat bagian bawah atau atas dokumen, kayak di sebelah kanan ini. -->
resizable="yes" atau "no", untuk menentukan apakah window yang dibuat bisa diubah ukurannya atau tidak, dengan cara menggeret pinggirannya.
location="yes" atau "no", untuk menentukan ada tidaknya location bar di window yang baru dibuka. Location bar tuh ... tempat kita nulis alamat url di atas.
directories="yes" atau "no", menentukan ada tidaknya directory bar. Directory ada di juga yang isinya bookmark, dll.
status="yes" atau "no", untuk menentukan ada tidaknya status bar di bawah, pada window yang baru dibuat.
5. for.htm
<html></head>
<body>
<b>Kita cuman menghitung dari 1 sampai 7:</b><br>
<script language="JavaScript">
for (i=1; i<=7; i=i+1)
} </SCRIPT> Udah. </body> </html>
6. Object navigator object_property.htm
<html>
</head>
<b>Kita cuman menghitung dari 1 sampai 7:</b><br>
<SCRIPT LANGUAGE="javascript">
var an = navigator.appName;
var av = navigator.appVersion;
var acn = navigator.appCodeName;
var ua = navigator.userAgent;
document.write("Anda menggunakan browser <B>" +an+ "</B>, versi " +av+ ". Kode namanya " +acn+ ", dan header yang dikirim " +ua+ "." ); </SCRIPT>
</body>
</html>
Anda dapat melihat di atas bahwa di sini property navigator.appName akan memberikan hasil Microsoft Internet Explorer (nama browser), navigator.appVersion memberikan hasil 4.0 (compatible; MSIE 6.0; Windows NT 5.0; YComp 5.0.0.0) yaitu versi browser yang dipakai dan platformnya. Kemudian
terakhir navigator.userAgent memberikan hasil Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; YComp 5.0.0.0) yaitu http header yang dikirim browser.