Assalmualaikum Warahmatullahi Wabarakatu
Bismilahirrahmanirrahiim
Untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah perintah di sisi user, yang artinya di sisi browser bukan di sisi server web kita memerlukan yang namanya javascript. Disini saya akan membahas beberapa component yang digunakan di javascript. Oke langsung saja ....
Objek Untuk memasukkan Data
Terdapat beberapa objek yang dapat digunakan untuk memeasukkan data. Objek-objek tersebut biasanya terdapat dalam suatu form. Adapun objek-objek tersebut meliputi Objek Text, Objek Radio, Objek Checkbox, Objek Textarea, dan Objek Select.
Objek Text
Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh penggunaannya dapat kita lihat pada contoh berikut :
<!Doctype Html>
<html>
<head>
<title>Objek Text JavaScript</title>
</head>
<body>
<script languange ="JavaScript">
function tekan()
{
var namastr = (document.fform.nama.value);
var alamatstr = (document.fform.alamat.value);
document.fform.onama.value = namastr;
document.fform.oalamat.value = alamatstr;
}
</script>
<form name ="fform">
<h1>
Memasukkan Data Dengan Objek Teks</H1><hr>
<pre>Nama Anda : <input type="text" size="11" name="nama">
Alamat : <input type="text" size="25" name="alamat">
</PRE><input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<h3>
Output</H3><pre>Jadi Nama Anda adalah :<input type="text" size="11" name="onama">
Alamat Anda di :<input type="text" size="25" name="oalamat">
</form>
</body>
</html>
Hasilnya seperti gambar dibawah ini :
Objek radio adalah komponen yang digunakan untuk melakukan suatu pemilihan data. Karena selalu berupa Array , untuk mengakses satu tombol radio digunakan radio[indeks]. Disamping itu objek radio juga mempunyai nili True jika dipilih dan False jika tidak. Untuk memilih suatu objek radio menggunakan properti Checked.
Contoh Program JavaScript
<!Doctype Html>
<html>
<head>
<title>Objek Radio JavaScript</title>
</head>
<body>
<script languange ="JavaScript">
<!--
function radio_box(form)
{
var ket = "";
if (form.wanita.checked == true)
{
ket = "Wanita";
}
else
{
ket = "Pria";
}
alert('Anda adalah seorang ' +ket);
</script>
<form>
<h1>
Memasukkan Data Dengan Objek Radio</H1><hr>
<p>
<input type="radio" value="wanita" name="wanita">Wanita</p>
<hr>
<p>
<input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>
Hasil dari code diatas seperti gambar dibawah ini :
Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek. Penggunaannya hampir sama seperti objek radio.
Contoh Program JavaScript
<!Doctype Html>
<html>
<head>
<title>Objek Checkbox JavaScript</title>
</head>
<body>
<script languange ="JavaScript">
function radio_box(form)
{
var ket = "";
var ket1 ="";
if (form.bola.checked == true)
{
ket = "Nonton Bola";
}
if (form.tv.checked == true)
{
ket1 = " Nonton Tv";
}
alert('Hobby anda ' +ket+''+ket1);
}
</script>
<form>
<h1>
Memasukkan Data Dengan Objek Checkbox</H1><hr>
<p>
Hobby anda :
<input type="checkbox" value="ON" name="bola">Nonton Sepak Bola
<input type="checkbox" value="ON" name="tv">Nonton televisi</p>
<hr>
<p>
<input type="button" value="CONFIRM" onclick="radio_box(this.form)">
<input type="reset" value="RESET"></p>
</form>
</body>
</html>
Hasil dari script diatas adalah seperti gambar dibawah ini :
Objek textarea menyimpan informasi tentang elemen form yang berupa kotak teks dengan banyak baris.
Contoh Program JavaScript
<!Doctype Html>
<html>
<head>
<title>Objek Checkbox JavaScript</title>
</head>
<body>
<script languange ="JavaScript">
function tekan()
{
var ketstr = (document.fform.Ket.value);
document.fform.Oket.value = ketstr;
}
</script>
<form name ="form">
<h1>
Memasukkan Data Dengan Objek TextArea</H1><hr>
<h3>
<txtarea name="Ket" rows="3" cols="30"></txtarea>
<input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<h3>
Output Keterangan :</H3><txtarea name="Oke" rows="3" cols="30"></txtarea>
</body>
</html>
Hasil dari script diatas adalah seperti gambar dibawah ini :
Objek Select menyimpan informasi tentang elemen form yang berupa kotak daftar. Objek select berguna apabila di dalam form terdapat banyak pilihan yang telas mempunyai nilai tertentu.
Contoh Program JavaScript
<!Doctype Html>
<html>
<head>
<title>Objek Select JavaScript</title>
</head>
<body>
<script languange ="JavaScript">
function tekan()
{
var jurusanstr = (document.fform.Jurusan.value);
document.fform.Ojurusan.value = jurusanstr;
}
</script>
<form name ="form">
<h1>
Penggunaan Objek Select</H1><hr>
<h3>
Masukan :<h3>
Jurusan Di LP3M :
<select name="Jurusan" Size="1">
<option value ="Manajemen Informatika"> Manajemen Informatika </option>
<option value ="Komputerisasi Akutansi"> Komputerisasi Akutansi</option>
<option value ="Akutansi Perpajakan"> Akutansi Perpajakan </option>
<option value ="Ecommerce"> Ecommerce </option>
<option value ="Ecommerce"> Cyber Secretary </option>
</select>
<p>
<input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<h3>
Output jurusan :</H3><input type="text" name="Ojurusan" size="30">
</form>
</body>
</html>
Hasil dari script diatas adalah seperti gambar dibawah ini :
sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk file pdfnya bisa didownload disini.
0 Comments
Berkomentarlah dengan baik dan sopan