Scribd
Unggah
97 tayangan11 halaman

Struktur Objek dalam JavaScript

Modul ini membahas objek-objek yang dapat digunakan untuk memasukkan data dalam JavaScript seperti objek teks, radio, checkbox, textarea, dan select. Setiap objek dijelaskan beserta contoh kode programnya. Modul ini juga memberikan soal latihan untuk membuat form input menggunakan berbagai objek tersebut.

Diunggah oleh

riganormanda p
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
97 tayangan11 halaman

Struktur Objek dalam JavaScript

Modul ini membahas objek-objek yang dapat digunakan untuk memasukkan data dalam JavaScript seperti objek teks, radio, checkbox, textarea, dan select. Setiap objek dijelaskan beserta contoh kode programnya. Modul ini juga memberikan soal latihan untuk membuat form input menggunakan berbagai objek tersebut.

Diunggah oleh

riganormanda p
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd

1

MODUL PERKULIAHAN

W152100023 –
Pemrograman
Web
JAVASCRIPT OBJEK

Abstrak Sub-CPMK

Mengenali struktur JAVASCRIPT - Mahasiswa dapat memahami objek-objek


terhadap Objek Text, Objek yang ada di javascript
Radio, Objek Checkbox, Objek - Mahasiswa dapat membuat program
Textarea, dan Objek menggunakan objek-objek di javascript
Select.

OBJEK JAVASCRIPT
Objek Untuk Memasukkan Data

Terdapat beberapa objek yang dapat digunakan untuk memasukkan 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.

1. Objek Text
Untuk menginputkan data kita dapat menggunakan komponen/objek text. Contoh
penggunaannya dapat kita lihat pada contoh berikut :

Contoh Program :
<html>
<head><title>Latihan Dengan Objek Text</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>
<BR>
<input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">

2022 Pemrograman Web


2 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
<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>

Output :

2. Objek Radio
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.

2022 Pemrograman Web


3 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Contoh Program :
<html>
<head><title>Latihan Dengan Objek Radio</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>

2022 Pemrograman Web


4 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Output :

3. Objek Checkbox
Objek checkbox menyimpan informasi tentang elemen form yang berupa kotak cek.
Penggunaannya hampir sama seperti objek radio.
Contoh Program :
<html>
<head><title>Latihan Dengan Objek Checkbox</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>

2022 Pemrograman Web


5 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
<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>

Output :

4. Objek TexArea
Objek textarea menyimpan informasi tentang elemen form yang berupa kotak teks
dengan banyak baris.

Contoh Program :
<html>
<head><title>Latihan Dengan Objek TextArea</title></head>
<body>
<script languange ="JavaScript">
<!--

2022 Pemrograman Web


6 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
function tekan()
{
var ketstr = (document.fform.Ket.value);
document.fform.Oket.value = ketstr;
}
//-->
</script>
<form name ="fform">
<H1> Memasukkan Data Dengan Objek TextArea</H1><hr>
<h3>Keterangan :<h3><br>
<textarea name="Ket" rows="3" cols="30"></textarea>
<BR><BR>
<input type="button" value="kirim" onclick="tekan()">
<input type="reset" value="ulang">
<H3>Output Keterangan :</H3>
<textarea name="Oket" rows="3" cols="30"></textarea>
</form>
</body>
</html>

Output :

5. Objek Select
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 :

2022 Pemrograman Web


7 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
<html>
<head><title>Latihan Dengan Objek Select</title></head>
<body>
<script languange ="JavaScript">
<!--
function tekan()
{
var jurusanstr = (document.fform.Jurusan.value);
document.fform.Ojurusan.value = jurusanstr;
}
//-->
</script>
<form name ="fform">
<H1> Penggunaan Objek Select</H1><hr>
<h3>Masukan :<h3>
Jurusan :<select name="Jurusan"
Size="1">
<option value ="Teknik Informatika"> Teknik
Informatika </option>
<option value ="Manajemen Informatika"> Manajemen
Informatika </option>
<option value ="Teknik Komputer"> Teknik Komputer
</option>
<option value ="Teknik Industri"> Teknik Industri
</option>
<option value ="Teknik Elektro"> Teknik Elektro
</option>
</option>
<option value ="Teknik Sipil"> Teknik Sipil </option>
<option value ="Teknik Arsitektur"> Teknik Arsitektur
<option value ="Teknik Perencanaan Wil. Kota ">
Perencanaan Wil. Kota </option>
</select>

2022 Pemrograman Web


8 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
<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>

Output :

2022 Pemrograman Web


9 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Soal :
Buatlah halaman seperti berikut, yang mencakup semua materi yang terdapat pada modul
ini.
1. Input berupa : NIM, NAMA, JENIS KELAMIN, AGAMA, STATUS, JURUSAN,
KOMENTAR. (SESUAIKAN OBJEK YANG DIPAKAI) Gambar 1
2. Proses terjadi ditombol KIRIM
3. Output : lihat pada gambar 2
4. Isi dengan NIM, NAMA ANDA
5. Tugas individu, dikumpulkan minggu ke 5, dalam bentuk print out KODE HTMLnya
serta Tampilannya

Gambar 1

2022 Pemrograman Web


10 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/
Gambar 2

DAFTAR PUSTAKA

- Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit Andi,
Yogyakarta, 2002

- Ahmad Bustami, Cara Mudah Belajar Internet HomeSite dan HTML, Penerbit Dinastindo,
Jakarta 1999

- Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002

- Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998

- https://www.petanikode.com/javascript-fungsi/

- https://kelasprogrammer.com/membuat-fungsi-javascript/

2022 Pemrograman Web


11 Umniy Salamah, ST., MMSI
Biro Bahan Ajar E-learning dan MKCU
http://pbael.mercubuana.ac.id/

Anda mungkin juga menyukai