PENGERTIAN JAVA SCRIPT
Javascript merupakan bahasa pemrograman berbasis web dan berorientasi objek atau sering juga disebut OOP (Object Oriented Programming). Dimana dianggap sebuah objek memiliki metode, properti dan event yang berbeda. Contohnya ketika kita mengklik tombol maka akan muncul sebuah pesan peringatan. Ketika kursor melintasi link muncul pesan. Itulah beberapa contoh OOP sederhana.
Kode javascript dalam HTML diapit oleh tag:
<script language=”javascript”> ......
</script>
CSS kode javascript dapat disimpan pada sebuah file. Untuk mengaksesnya bisa menggunakan perintah
<script language=”javascript” src=”lokasi_file”></script>
Sebenarnya isi dari bahasa tidak hanya javascript tetapi anda juga dapat menggunakan Vbscript. Yaitu bahasa pemrograman berbasis Visual Basic Script.
Kami tidak membahas vbscript karena tidak kompatible dengan browser selain Internet Explorer. Perlu juga kamu mengetahui sedikit hal tentang javascript akan sangat membantu anda dalam memahami bahasa pemrograman lainnya seperti PHP karena syntaxnya hampir mirip.
Javascript biasanya gunakan untuk event-event tertentu. Seperti event onload, onkeydown, onkeyup, onchange, onclick dan sebagainya.
Aplikasi Javascript
Input Box
1. warning.html
<html><head><title>Tampilan Pesan Warning</title><script language="javascript">var pesan = "Dilarang Masuk selain Pekerja!";function warning(){alert(pesan);}function password(){var passwd = prompt("Masukkan Password");if (passwd != 'petugas'){alert('Gagal');}else{alert('Sukses');}}</script></head><body onload="warning();"><p><b>TEMPAT KHUSUS PEKERJA</b></p><p>Sekali lagi saya tegaskan jangan memasuki area ini selain pekerja.HATI-HATI BERBAHAYA!!!</p><a href="javascript: password();">Masuk =></a></body></html>
2. warning_2.html
<html><head><title>PARAMETER FUNGSI</title><script language="javascript">function warning(pesan_kita){alert(pesan_kita);}function password(pesan_prompt, pesan_sukses, pesan_gagal){var passwd = prompt(pesan_prompt);if (passwd != 'petugas'){alert(pesan_gagal);}else {alert(pesan_sukses);}}</script></head><body onload="warning('Dilarang Masuk Selain PEKERJA');"><p><b>TEMPAT RAHASIA KHUSUS</b></p><p>Sekali lagi saya tegaskan jangan memasuki area ini selain petugas. SANGAT BERBAHAYA!!!</p><a href="javascript: password('Masukkan Password:', 'Password Benar!', 'Password Salah');">Masuk =></a></body></html>
function param_opt(param1, param2 = ‘pilihan’){if (param 2 != null){alert(param1); alert(param2);}else{alert(param1);} }
Arti fungsi diatas adalah jika parameter 2 tidak kosong(not null) maka xxxxx.... selain itu xxxxx.... Jadi kita dapat menuliskan parameter tersebut dengan hanya menulis param_opt(‘pesan no.1’). Kita juga dapat menuliskan 2 parameter untuk fungsi ini yaitu param_opt(‘pesan no.1’, ‘pesan no. 2’).
Pop-Up Window
Istilah Kata pop-up window dapat diartikan sebagai window tambahan yang muncul mengiringi window utama. Misalnya kita mengunjungi suatu website tetapi juga muncul window lainnya selain website utama muncul. Nah metode ini banyak yang dimanfaatkan para pengiklan untuk memunculkan iklan mereka.
makanya kebanyakan muncul istilah pop-up blocker yang artinya menghentikan pemunculan window pop-up.
Dalam contoh ini kita akan mambuat dua file. File yang pertama bernama popup_1.html dan yang kedua adalah popup_2.html. Tugas file popup_1.html adalah memunculkan window popup_2.html
klik File-New-HTML/XHTML
lalu ketik kode berikut ini.
<html>
<head>
<title>Membuat Pop-Up Window</title>
<script language="javascript">
function buka_popup()
{
window.open('popup_2.html', '', 'width=640, height=480, menubar=yes, location=yes,scrollbars=yes, resizeable=yes, status=yes, copyhistory=no, toolbar=no');
}
</script>
<body onload="open_popup();">
<p>Anda juga dapat membuka window popupnya dari sini</p>
<a href="javascript: open_popup();">KLIK DISINI</a>
</body>
</html>
Simpan dengan nama popup-1.html. Kemudian kalian bisa buat file baru lagi, ketik kode dibawah ini untuk membuat window ke dua.
<html>
<head>
<title>Ini Window Ke 2</title>
</head>
<body>
<p>Jika anda dapat melihat saya maka anda berhasil</p>
<a href="javascript: window.close()">Tutup Window[X]</a>
</body>
</html>
Simpan dengan nama popup-2.html. Jalankan file popup-1.html. Maka akan muncul window ke dua yaitu file popup-2.html.
Untuk membuka window yang lain kita bisa menggunakan metode open dari object window. Metode open memiliki 3 attribut .
Attribut pertama adalah lokasi file yang akan kita buka. Attribut kedua kurang penting yaitu nama window, jika window yang akan kalian buka sudah mempunyai nama maka attribut ini tidak berguna. Attribut yang ketiga ini cukup banyak isinya
Dilarang Klik-Kanan
Pernahkah anda mengalami saat ketika sedang surfing dan ingin menyimpan gambar yang ada di website tersebut, namun saat anda mengklik kanan tiba-tiba oops. Sorry, not allowed to save the pictures. Kali ini saya akan tunjukkan bagaimana membuatnya. Dan membalas dendam pada pengunjung agar tidak bisa menyimpan gambar anda. shitt...!.
Klik menu File-New- HTML/XHTML.
Salin kode berikut ini.
<html>
<head>
<title>No Right Click</title>
<script language="javascript">
var pesan = 'Boy, mau nyuri cok?';
function klik_IE()
{
if (event.button == 2){
alert(pesan);
}
}
function klik_NS(e)
{
if (document.layers || document.getElementById && !document.all){
if (e.which == 2 || e.which == 3){
alert(pesan);
}
} }
if (document.layers)
{
document.captureEvents(event.mousedown);
document.onmousedown = klik_NS;
}
else if (document.all && !document.getElementById)
{
document.onmousedown = klik_IE;
}
document.oncontextmenu = new Function("alert(pesan); return false")
</script>
</head>
<body>
<p>COBA KLIK DISINI</p>
</body>
</html>
Simpan Dengan nama Klik_kanan.html
PENJELASAN SCRIPT
Script diatas dirancang untuk bekerja pada browser Internet Explorer, Netscape Navigatior, Mozilla dan FireFox. Perhatikan fungsi klik_IE() fungsi ini khusus pada browser IE. Pada fungsi ini terdapat syntax event. Event merupakan syntax yang digunakan untuk menangani suatu aksi dari user. Pada script diatas event digunakan untuk menangani penekanan tombol mouse(button) kanan(2). Jadi ketika user mengklik tombol mouse kanan akan dimunculkan box warning.
Pada fungsi klik_NS, e dalam hal ini mengindikasikan event yang terjadi bukan parameter. Fungsi ini khusus untuk browser keluarga Netscape(Navigator, Mozilla, dan Firefox).
Tanda | | artinya “atau” sama dengan syntax OR sedangkan tanda && aritnya “dan” sama dengan syntax AND.
Arti Dari
if (document.layers)
{
document.captureEvents(event.mousedown);
document.onmousedown .....
....
adalah jika pada dokumen terjadi event click buton jalankan fungsi klik_NS. Sedangkan fungsi klik_NS akan memunculkan box warning jika hanya tombol mouse kanan yang diklik. Arti dari kode dibawahnya juga sama.
Menampilkan Hari dan Tanggal
Tanggal merupakan elemen yang cocok untuk ditampilkan pada halaman kita. Adanya hari dan tanggal akan menjadi nilai plus bagi website anda.
kita akan coba membuat contoh hari dan tanggal sekarang.
klik menu File-New-HTML/XHTML.
Ketik dan nikmati kode dibawah ini.
<html>
<head>
<title>Menampilkan Hari dan Tanggal</title>
<script language="javascript">
function show_hari()
{
//membuat variabel bertipe array untuk nama hari
var NamaHari = new Array("Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat",
"Sabtu");
//membuat variabel bertipe array untuk nama bulan
var NamaBulan = new Array("Januari", "Februari", "Maret", "April", "Mei",
"Juni", "Juli", "Agustus", "September", "Oktober", "November", "Desember");
var sekarang = new Date();
var HariIni = NamaHari[sekarang.getDay()];
var BulanIni = NamaBulan[sekarang.getMonth()];
var tglSekarang = sekarang.getDate();
var TahunIni = sekarang.getFullYear();
document.write(HariIni + ", " + tglSekarang + " " + BulanIni + " " + TahunIni);
}
</script>
</head>
<body>
<p><font color="red">Hari Ini: </font><script>show_hari();</script>.</p> </body>
</html>
Simpan dengan nama hari-ini.html
PENJELASAN SCRIPT
Bagaiaman keren kan!. cok..... mesti dari mana menjelaskannya nih. Pada ada beberapa hal baru bagi anda yaitu Array. Array merupakan variabel yang dapat berisikan beberapa nilai sekaligus. Nilai index dari array dimulai dari 0. Pada variabel NamaHari berisikan 7 nilai. Yaitu minggu, senin, dan seterusnya. Karena dimulai dari 0 maka minggu=0, senin=1, selasa=2, hingga sabtu=6.
Apa artinya ini? Contohnya seperti ini. Jika anda menuliskan fungsi document.write(NamaHari[2]). Maka ouput dari perintah diatas adalah selasa. Are you understand now?. Hal yang sama berlaku untuk variabel NamaBulan.
Pada variabel sekarang isinya adalah new Date(). Date adalah fungsi javascript untuk mendapatkan tanggal, hari, waktu, tahun sekarang. Disini kita akan menerapkan OOP secara lebih relevan.
Variabel HariIni berisi array dari NamaHari. Sekarang merupakan object tanggal dan memiliki beberapa metode diantaranya getDay() = untuk mendapatkan hari dalam angka 0 sampai 6. getMonth() = untuk mendapatkan bulan dalam angka antara 0 sampai 11. getDate() = untuk mendapatkan tanggal 1 sampai 29 atau 30 atau 31. getFullYear() = untuk mendapatkan tahun dalam 4 digit angka.
Sehingga dapat disimpulkan fungsi sekarang.getNamaFungsi() hanyalah untuk mengembalikan nilai dalam angka. Sehingga variabel array NamaHari memiliki angka/index yang dapat digunakan untuk mengembalikan nama hari dalam string(huruf).
Contohnya kita asumsikan sekarang adalah hari Sabtu tanggal 1 Oktober 2005. jika kita menuliskan HariIni = NamaHari[sekarang.getDay()];. Maka sekarang.getDay() akan menghasilkan nilai 6. Ingat NamaHari[6] artinya apa ya Sabtu.
Terimakasih, Akhirnya Selesai Sudah Penjelasan Saya.
******************