Mengenal Message Box
Dalam Java Script terdapat tiga macam message box standar, yaitu alert, confirm, dan prompt. Dalam
JavaScript ketiga message box ini merupakan bagian dari objek window.
Alert
Alert digunakan untuk menampilkan pesan / informasi yang sifatnya penting dan mendesak. Misalkan saja
informasi yang menyatakan bahwa suatu halaman web membutuhkan shcokwave player yang terinstal pada
web browser.
Bentuk umum dari message box alert adalah:
window.alert(pesan);
Untuk lebih jelasnya dapat mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>ALERT</H1>
<SCRIPT LANGUAGE="JavaScript">
window.alert("JavaScript memang hebat");
</SCRIPT>
</BODY>
</HTML>
Confirm
Confirm digunakan untuk meminta konfirmasi dari pengunjung web. Nilai yang mampu ditampung oleh
message box ini adalah nilai true atau false. Kedua nilai ini dihasilkan dari penekanan tombol Ok atau Cancel.
Penekanan tombol Ok akan menghasilkan nilai true sedangkan penekanan tombol Cancel akan menghasilkan
tombol false.
Bentuk umum dari message box confirm adalah:
window.confirm(pertanyaan);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>CONFIRM</H1>
<SCRIPT LANGUAGE="JavaScript">
var komentar;
komentar = window.confirm("Apakah Anda vegetarian?");
if (komentar) {
document.write("Anda seorang vegetarian");
} else {
document.write("Anda bukan seorang vegetarian");
}
</SCRIPT>
</BODY>
</HTML>
Prompt
Prompt dapat digunakan untuk menampung nilai yang diinputkan oleh penunjung web.
Bentuk umum dari message box prompt adalah:
window.prompt(pesan, nilai_default);
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
</HEAD>
<BODY>
<H1>PROMPT</H1>
<SCRIPT LANGUAGE="JavaScript">
var nama;
nama = window.prompt("Masukkan nama Anda", "Mbah Boedy");
document.write("Selamat Datang " + nama);
</SCRIPT>
</BODY>
</HTML>
Mengenal function
Penggunaan function memungkinkan penulisan suatu kode program secara modular atau yang sering kali
disebut sebagai modular programming. Penulisan function pada JavaScript umumnya diletakkan pada bagian
HEAD dalam dokumen HTML.
Bentuk umum dalam penulisan function adalah:
function nama_function() {
//statementstatement
yang akan dieksekusi oleh function
}
Ketika suatu function ingin digunakan yang perlu dilakukan adalah memanggil nama functionnya.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function salam() {
document.write("<H1>Hallo Apa Kabar?</H1>");
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
salam();
document.write("Header tersebut dihasilkan dari pemanggilan function salam");
</SCRIPT>
</BODY>
</HTML>
Suatu function juga bisa melewatkan suatu parameter ketika function tersebut dipanggil.
Bentuk umum penulisannya adalah:
function nama_function(parameter1, parameter2, ...) {
//statementstatement
yang akan dieksekusi oleh function
}
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function penjumlahan(a, b) {
var c;
c = a + b;
document.write("hasil penjumlahannya = " + c);
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x, y;
x = 4; y = 7;
document.write("nilai variabel x = " + x + "<BR>");
document.write("nilai variabel y = " + y + "<BR>");
penjumlahan(x, y);
</SCRIPT>
</BODY>
</HTML>
Suatu function juga bisa menghasilkan suatu nilai ketika function tersebut dipanggil. Untuk menjadikan
function yang dibuat dapat menghasilkan / mengembalikan suatu nilai ketika dipanggil, yang perlu dilakukan
adalah dengan menyertakan kata kunci return di depan nilai yang akan dikembalikan oleh function tersebut.
Berikut ini adalah bentuk umum penulisannya.
function nama_function() {
//statementstatement
yang akan dieksekusi oleh function
return nilai_kembali;
}
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function perkalian(a, b) {
var c;
c = a * b;
return c;
}
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
var x, y, z;
x = 4; y = 7;
document.write("nilai variabel x = " + x + "<BR>");
document.write("nilai variabel y = " + y + "<BR>");
z = perkalian(x, y);
document.write("x * y = " + z);
</SCRIPT>
</BODY>
</HTML>
Mengenal Event
Event adalah kejadian yang terjadi pada suatu halaman web. Kejadian ini bisa bermacammacam,
ada kejadian
penekanan tombol, kejadian pengubahan nilai pada textbox, dan bermacammacam
kejadian lainnya.
Kejadiankejadian
tersebut bisa diarahkan untuk memicu pemanggilan suatu function tertentu. Konsep
pemrograman di mana suatu function dipanggil berdasarkan suatu event tertentu dikenal dengan istilah event
handling programming.
Event onClick
Event onClick merupakan kejadian penekanan tombol mouse (click) pada komponen form. Kejadian ini bisa
berupa penekanan tombol, pemilihan checkbox maupun radio button, dan pemilihan suatu link, serta
penekanan tombol submit ataupun reset.
Pengaturan terhadap event ini dilakukan dengan menuliskan atribut onClick pada tag HTML yang
bersangkutan. Atribut ini dapat diberi nilai berupa nama function yang akan dipicu oleh event tersebut.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function salam() {
window.alert("Selamat Datang\n" + formku.nama.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="formku">
<TABLE>
<TR><TD>Nama:</TD><TD><INPUT TYPE="TEXT" NAME="nama"></TD></TR>
<TR><TD></TD><TD><INPUT TYPE="BUTTON" VALUE="Proses" onCLick="salam()"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Dalam dokument HTML untuk membuat suatu tombol bebas (selain tombol submit dan reset) dapat
menggunakan tag <INPUT> dengan menyertakan atribut TYPE yang diberi nilai BUTTON.
Label pada tombol bisa diatur menggunakan atribut VALUE.
Untuk mengakses nilai yang tertampung dalam suatu komponen, yang perlu dilakukan adalah menyebutkan
nama form tempat komponen tersebut berada, selanjutnya baru sebutkan nama komponennya dan diakhiri
dengan kata kunci value. Penyebutan itu dilakukan dengan menyertakan tanda “.” (titik) sebagai pemisah.
Hal ini berlaku juga ketika JavaScript ingin menempatkan nilai yang dihasilkan ke dalam suatu komponen
dalam form HTML.
Untuk lebih jelasnya bisa mempelajari contoh berikut ini:
<HTML>
<HEAD>
<TITLE>Ini Judul</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function penjumlahan(a, b) {
return (a + b);
}f
unction pengurangan(a, b) {
return (ab);
}
function perkalian(a, b) {
return (a * b);
}f
unction pembagian(a, b) {
return (a / b);
}
function sisa_bagi(a, b) {
return (a % b);
}f
unction proses() {
var p, q;
p = parseInt(form_hitung.x.value);
q = parseInt(form_hitung.y.value);
form_hitung.jumlah.value = penjumlahan(p,q);
form_hitung.kurang.value = pengurangan(p,q);
form_hitung.kali.value = perkalian(p,q);
form_hitung.bagi.value = pembagian(p,q);
form_hitung.modulus.value = sisa_bagi(p,q);
}
</SCRIPT>
</HEAD>
<BODY>
<H1>Kalkulator Sederhana</H1>
<FORM NAME="form_hitung">
<TABLE>
<TR>
<TD>x = </TD>
<TD><INPUT TYPE="TEXT" NAME="x" SIZE="3"></TD>
</TR>
<TR>
<TD>y = </TD>
<TD><INPUT TYPE="TEXT" NAME="y" SIZE="3"></TD>
</TR>
<TR>
<TD>x + y =</TD>
<TD><INPUT TYPE="TEXT" NAME="jumlah" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x y
=</TD>
<TD><INPUT TYPE="TEXT" NAME="kurang" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x * y =</TD>
<TD><INPUT TYPE="TEXT" NAME="kali" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x / y =</TD>
<TD><INPUT TYPE="TEXT" NAME="bagi" SIZE="3" READONLY></TD>
</TR>
<TR>
<TD>x % y =</TD>
<TD><INPUT TYPE="TEXT" NAME="modulus" SIZE="3" READONLY></TD>
</TR>
</TABLE>
<INPUT TYPE="BUTTON" VALUE="Hitung" onClick="proses()">
</FORM>
</BODY>
</HTML>
Atribut READONLY yang terdapat pada suatu textbox menjadikan nilai pada textbox tersebut tidak dapat
diubah lewat halaman web browser.
Selain atribut READONLY terdapat atribut lain yaitu atribut DISABLED yang berfungsi untuk menonaktifkan
suatu komponen form.
No comments:
Post a Comment