meliputi pembuatan window pop-up, no right click, tanggal dan script ringan lainnya. Kita tidak
akan membahas penggunaan javascript untuk membuat animasi yang “berat”. Materi yang
harus anda kuasai hanya seputar:
Pengertian Javascript
Aplikasi Javascript
Input Box
Pop Up Window
Dilarang Klik Kanan
Menampilkan Hari dan Tanggal
Pengertian Javascript
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>
s
eperti halnya CSS kode javascript dapat disimpan pada sebuah file. Untuk mengaksesnya
digunakan perintah
<script language=”javascript” src=”lokasi_file”></script>
Sebenarnya isi dari language tidak hanya javascript tetapi anda juga dapat menggunakan
Vbscript. Yaitu bahasa pemrograman berbasis Visual Basic Script. Kita tidak membahas vbscript
karena tidak kompatible dengan browser selain Internet Explorer. Perlu juga anda ketahui
sedikit pengetahuan 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.
PERSIAPAN
Seperti biasa sebelum memulai praktik kita lakukan beberapa persiapan terlebih dahulu.
Buatlah folder baru di direktori C:\HTML beri nama folder tersebut Bab 7. Kita akan menyimpan
semua file yang kita praktikkan pada bab 7 pada folder ini.
Aplikasi Javascript
Input Box
1. warning.html
OK, saatnya membuat file javascript pertama kita. Untuk yang pertama kita buat yang mudah
dulu agar tidak kaget. Kali ini kita akan membuat sebuah pesan peringatan sederhana dan input
box. Ini hanya untuk memudahkan anda bagaimana memahami kerja javascript
Seperti biasa jalankan program favorit kita yaitu PHP DESIGNER 2006 klik menu File-New-
HTML/XHTML. Ketik kode dibawah ini dengan baik dan benar?!?!
<html>
<head>
<title>Menampilkan pesan Warning</title>
<script>
var pesan = “Dilarang Masuk selain Petugas!”;
function warning()
{
alert(pesan);
}
f
unction password()
{
var passwd = prompt(“Masukkan Password”);
if (passwd != ‘petugas’)
{
alert(‘Gagal’);
}
else
{
alert(‘Sukses’);
}
}
</script>
</head>
<body>
<p><b>TEMPAT RAHASIA</b></p>
<p>Sekali lagi saya tegaskan jangan memasuki area ini selain petugas.
BERBAHAYA!!!</p>
<a href=”javascript: password();”>Masuk =></a>
</body>
</html>
Simpan dengan nama warning.html letakkan di C:\HTML\Bab 7. Jalankan pada browser
hasilnya akan terlihat seperti gambar 7.0.
PENJELASAN SCRIPT
Arti dari var pada script diatas adalah definisi sebuah variabel. Nama variabel pada javascript
selalu diawali syntax var. Isi variabel dapat berupa string(huruf) atau integer(angka). Jika
variabel berjenis string maka selalu diapit oleh tanda ‘…..isi variabel…‘ (petik satu) atau “ …isi
variabel…” (petik dua).
Pada javascript setiap akhir dari suatu baris kode diakhiri dengan tanda ;(titik koma).
Sekarang perhatikan script yang memiliki syntax function. Function merupakan syntax untuk
menuliskan suatu fungsi. Fungsi sangat berguna agar kita tidak perlu menuliskan beberapa
perintah berulang-ulang. Pada script diatas terdapat dua fungsi buatan kita sendiri yaitu fungsi
warning() dan fungsi password().
Nama suatu fungsi tidak boleh mengandung spasi dan harus diawali oleh huruf dan harus
ditutup dengan tanda (). Fungsi diapit oleh tanda { …. }. Dalam suatu fungsi bisa terdapat
fungsi lagi. Pada fungsi warning() kita menuliskan alert(pesan), alert() merupakan fungsi builtin(
bawaan) javascript yang fungsinya untuk menampilkan box warning. Begitu pula dengan
prompt() pada fungsi kedua kita, prompt() juga merupakan fungsi built-in javascript yang
fungsinya untuk menampilkan input box.
Pada fungsi password() passwordnya adalah petugas. Tanda != artinya tidak sama dengan.
Fungsi password menggunakan pengambilan keputusan else. else digunakan untuk mengambil
keputusan diantara 2 kejadian. Jadi fungsi password kalau diterjemahkan kedalam bahasa
indonesia yang baik dan benar bunyinya adalah jika password tidak sama dengan petugas maka
munculkan box gagal selain itu munculkan box sukses.
PARAMETER PADA FUNGSI
Lihat pada fungsi alert(pesan), pesan dalam hal ini yang disebut parameter. Fungsi dapat
memiliki lebih dari satu parameter. Pada fungsi yang kita buat pada file warning.html tidak
memilki parameter. Untuk yang kedua ini kita akan buat yang berparameter.
2. warning_2.html
Jalankan PHP DESIGNER 2006 klik File-New-HTML/XHTML. Ketiklah kode dibawah ini untuk
mengetahui lebih banyak tentang parameter.
<html>
<head>
<title>PARAMETER DALAM FUNGSI</title>
<script>
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>
<p><b>TEMPAT RAHASIA</b></p>
<p>Sekali lagi saya tegaskan jangan memasuki area ini selain petugas.
BERBAHAYA!!!</p>
<a href=”javascript: password(‘Masukkan Password:’, ‘Password Benar!’, ‘Password
Salah’);”>Masuk =></a>
</body>
</html>
Simpan dengan nama warning_2.html lalu jalankan pada browser gimana sudah ngerti? Apa
perlu dijelaskan? OK saya akan jelaskan sedikit.
Gambar 7.1: output warning_2.html
PENJELASAN SCRIPT
Script yang saya tandai kuning adalah untuk fungsi warning(). Sedangkan yang hijau adalah
untuk fungsi password(). Fungsi warning() memiliki 1 parameter yaitu pesan_kita. Isi dari
alert() nantinya akan diganti oleh input yang kita masukkan saat menjalankan fungsi warning()
dalam hal ini pada saat onload. Karena isi dari alert adalah string maka kita beri tanda petik
pada Dilarang Masuk Selain Petugas!.
Sedangkan untuk fungsi password() memiliki 3 parameter yaitu pesan_prompt, pesan_sukses,
pesan_gagal. Nantinya kita menjalankan fungsi password harus dengan 3 parameter. Pada
script diatas kita menjalankan fungsi password() dengan mengetikkan password(‘Masukkan
Password:’, ‘Password Benar!’, ‘Password Salah’). Jadi ketika user salah memasukkan password
akan muncul box warning yang bertuliskan Password Salah. Sebaliknya jika password benar
akan muncul box warning bertuliskan Password Benar!.
Parameter juga ada yang bersifat optional artinya bersifat pilihan boleh diisi boleh tidak. Jika
kita ingin membuat parameter yang bersifat optional kita harus memberi nilai pada parameter
tersebut. Perhatikan contoh berikut!
f
unction 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 blababla…. selain itu
blablala…. 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
Secara sederhana pop-up window dapat diartikan window tambahan yang muncul mengiringi
window utama. Misalnya kita mengunjungi suatu website tetapi juga muncul window lainnya
setelah website utama muncul. Nah metode ini banyak yang dimanfaatkan para pengiklan
untuk memunculkan iklan mereka.
Makanya banyak muncul istilah pop-up blocker yang artinya menghentikan pemunculan window
pop-up. Pada pembahasan kita kali ini kita akan coba membuat pop-up window. Ya.. tentu
masih menggunakan jurus baru kita yaitu javascript.
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. Sekarang jalankan PHP DESIGNER 2006 klik File-New-HTML/XHTML lalu ketik
kode berikut ini.
<html>
<head>
<title>Membuat Pop-Up Window</title>
<script>
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>
<p>Anda juga dapat membuka window popupnya dari sini</p>
<a href=”javascript: buka_popup();”>KLIK DISINI</a>
</body>
</html>
Simpan dengan nama popup_1.html. Kemudian buatlah file baru lagi, ketik kode dibawah ini
untuk 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. Perlu anda ketahui jika anda menggunakan browser firefox atau
IE dengan SP 2 maka browser akan block terlebih dahulu dan minta persetujuan anda apakah
window akan ditampilkan. Hasil dari kode diatas akan seperti gambar 7.2
Gambar 7.2: output popup_1.html & popup_2.html
Untuk membuka window lain kita menggunakan metode open dari object window. Metode open
memiliki 3 attribut kalau istilah dalam fungsi parameter. Attribut pertama adalah lokasi file
yang akan kita buka. Attribut kedua kurang penting yaitu nama window, jika window yang akan
dibuka 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. Just Kidding…!.
Seperti biasa jalankan software favorit kita PHP DESIGNER 2006. Klik menu File-New-
HTML/XHTML. Salin kode berikut ini.
<html>
<head>
<title>No Right Click</title>
<script>
var pesan = ‘Boy, mau ngapain?’;
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 KANAN</p>
</body>
</html>
Simpan dengan nama no_klik_kanan.html. Jalankan pada browser anda.
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 klik 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 kita. Pada contoh kali ini kita akan coba membuat
hari dan tanggal sekarang.
Jalankan PHP DESIGNER 2006 klik menu File-New-HTML/XHTML. Ketik dan nikmati kode
dibawah ini.
<html>
<head>
<title>Menampilkan Hari dan Tanggal</title>
<script>
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.html, lalu jalankan pada browser. PENJELASAN SCRIPT
Bagaiaman keren kan!. Hu….. 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 2010. jika kita
menuliskan HariIni = NamaHari[sekarang.getDay()];. Maka sekarang.getDay() akan
menghasilkan nilai 6. Ingat NamaHari[6] artinya apa ya Sabtu. Hmm… akhirnya selesai sudah
penjelasan saya.
21 Komentar
Hi there, I want to subscribe for this web site to take most recent updates, therefore
Balaswhere can i do it please assist.
I like what you guys are up also. Such smart work and reporting!
BalasKeep up the superb works guys I've incorporated you guys to my blogroll.
I think it'll improve the value of my site :).
I could not resist commenting. Exceptionally well written!
BalasI absolutely love your blog.. Pleasant colors
Balas& theme. Did you build this website yourself? Please reply back as I?m
attempting to create my own blog and would love to learn where you got
this from or exactly what the theme is called.
Appreciate it!
I know this site presents quality depending posts and additional stuff,
Balasis there any other web site which presents such things in quality?
Excellent blog right here! Also your website so
Balasmuch up fast! What web host are you the usage of?
Can I am getting your associate hyperlink for your host? I wish my site loaded up as fast as yours lol.
What's up to every body, it's my first visit of this website; this website
Balascontains remarkable and genuinely excellent information for
readers.
This is the right site for anybody who wishes to understand this topic.
BalasYou know so much its almost hard to argue with you (not that I actually would want to...HaHa).
You certainly put a new spin on a subject that has been written about for years.
Wonderful stuff, just wonderful!
I always used to study piece of writing in news
Balaspapers but now as I am a user of net thus from now I
am using net for content, thanks to web.
I think the admin of this web site is genuinely working hard for
Balashis website, for the reason that here every material is quality based data.
Just want to say your article is as amazing. The clarity for your publish is just excellent and that i could think you're knowledgeable on this subject.
BalasWell along with your permission let me to seize
your feed to keep updated with coming near near post.
Thanks a million and please carry on the enjoyable work.
A fascinating discussion is definitely worth comment.
BalasI do think that you need to write more about this
topic, it may not be a taboo matter but usually people don't talk about such issues.
To the next! Many thanks!!
I was recommended this blog by my cousin. I'm not sure
Balaswhether this post is written by him as nobody else know
such detailed about my trouble. You're incredible!
Thanks!
My brother recommended I might like this web site. He was entirely right.
BalasThis post truly made my day. You cann't imagine
simply how much time I had spent for this info!
Thanks!
Hi, its pleasant post about media print, we all be
Balasaware of media is a enormous source of information.
I'm not sure exactly why but this web site is loading very
Balasslow for me. Is anyone else having this problem or is it a issue on my end?
I'll check back later and see if the problem still exists.
Hello i am kavin, its my first time to commenting anyplace,
Balaswhen i read this paragraph i thought i could also create comment due to this good post.
Having read this I thought it was rather informative.
BalasI appreciate you finding the time and energy to put this content together.
I once again find myself spending way too much time both reading and
leaving comments. But so what, it was still worthwhile!
Greetings! Very helpful advice in thhis particular post! It is the
Balaslittle changes that will make the biggest changes. Many thanks for sharing!
I've learn several good stuff here. Definitely value bookmarking for revisiting.
BalasI surprise how a lot effort you put to make the sort
of fantastic informative site.
My developer is trying too convince me to move to .net from PHP.
BalasI have always disloiked the idea because of thhe expenses.
But he's tryiong none the less. I've been uing WordPress on a variety of websites for about
a year and am anxious about switching to another platform.
I have heard fantastic things about blogengine.net. Is
there a way I can import all my wordpress posts into it?
Any kind of help would be greatly appreciated!
Pengunjung yang baik adalah pengunjung yang mengapreasikan pendapatnya dikomentar...
Terimakasih ... :D