Scribd
Unggah
105 tayangan15 halaman

Javascript Lanjutan

JavaScript memperlakukan elemen-elemen di halaman web sebagai objek yang memiliki properti dan metode. Objek-objek tersebut terorganisir secara hierarkis sehingga memudahkan akses dan manipulasi. JavaScript juga memiliki objek-objek standar seperti array, date, dan lainnya yang memudahkan pengolahan data.

Diunggah oleh

NurcholisTri
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 PPT, PDF, TXT atau baca online di Scribd
105 tayangan15 halaman

Javascript Lanjutan

JavaScript memperlakukan elemen-elemen di halaman web sebagai objek yang memiliki properti dan metode. Objek-objek tersebut terorganisir secara hierarkis sehingga memudahkan akses dan manipulasi. JavaScript juga memiliki objek-objek standar seperti array, date, dan lainnya yang memudahkan pengolahan data.

Diunggah oleh

NurcholisTri
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 PPT, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 15

JAVASCRIPT

Object
JavaScript Sebagai
Bahasa Berorientasi Objek
• JavaScript memperlakukan elemen elemen yang tampil di jendela navigator
sebagai suatu obyek , yang artinya adalah elemen :
– Diklasifikasikan berdasarkan hirarki/tingkatan khusus sehingga kita bisa
mengetahui dimana letak/lokasi obyek itu sebenernya.
– Diasosiasikan dengan kondisi atau sifat sifat khusus (properti)
• Ilustrasi :
Kebun
􀂃 Pohon
• Dahan
o Daun
o Sarang Burung
􀂃 Panjang = 20
􀂃 Warna = kuning
􀂃 Tinggi = 4
• Batang
• Akar
􀂃 Sangkar Ternak
• Ayam
• Bebek
• Sarang burung yang berada di atas pohon dapat di tuliskan sebagai berikut :
Kebun.Pohon.Dahan.Sarang Burung
• Bila ingin mengecat atau mengganti warna sarang burung yang terletak di atas
pohon, maka perintahnya :
2
Kebun.Pohon.Dahan.Sarang Burung.warna=hijau
Properti
• Properti adalah atribut dari sebuah objek.
• Penulisannya (dipisahkan dengan tanda “.”) :
nama_objek . nama_properti
• Properti dapat diberi nilai, penulisannya :
objek . properti = nilai
• Contoh :
<HTML>
<HEAD>
<TITLE>Properti defaultStatus</TITLE>
</HEAD>
<BODY>
<H1>Tes defaultStatus</H1> Nama Properti Nilai
<SCRIPT LANGUAGE = "JavaScript">
<!--
window.defaultStatus = "Selamat belajar JavaScript“ ;
//-->
</SCRIPT>
Nama Objek
</BODY>
</HTML>

3
Metode
• Properti adalah suatu kumpulan kode yang digunakan untuk
melakukan sesuatu tindakan terhadap objek.

• Penulisannya (dipisahkan dengan tanda “.”) :


nama_objek . nama_metode(“parameter”)
– Contoh :
<HTML>
<HEAD>
<TITLE>Skrip Javascript</TITLE>
</HEAD>
Nama Metode
<BODY>
<SCRIPT language="Javascript"> Parameter
<!--
document.write(“Selamat Mencoba JavaScript <BR>”):
document.write(“Semoga Sukses” !”);
// -->
</SCRIPT>
Nama Objek
</BODY>
</HTML>

4
Fungsi
• Mendefinisikan Fungsi
function nama(daftar_parameter) {
Pernyataan_1;
pernyataan_n; Nama fungsi
}

HTML>
c = jumlah ( 2 , 3 );
<HEAD>
<TITLE>Contoh Fungsi</TITLE> Nilai balik argumen
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function jumlah(x, y) {
var hasil = x + y;
return(hasil);
}
var z = jumlah(2, 3);
document.write(z);
document.write("<BR>");
document.write(jumlah(4, 5));
//-->
</SCRIPT>
</BODY>
5
</HTML>
Fungsi Rekursif
• Fungsi rekursif adalah fungsi yang memanggil dirinya sendiri.
• Contoh : Faktorial
<HTML>
<HEAD>
<TITLE>Variabel Lokal</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function faktorial(n) {
if (n == 0)
return(1);
else
return( n * faktorial(n-1));
}

var z = 77;
document.write("4! = " + faktorial(4));
//-->
</SCRIPT>
</BODY>
</HTML>
6
Fungsi yang Dibuat Sendiri
• Memvalidasi Masukan pada Formulir

<HTML> <FORM NAME = "formku">


<HEAD> <PRE>
<TITLE>Validasi Masukan</TITLE> Nama : <INPUT TYPE = "TEXT"
</HEAD> NAME = "nama"><BR>
<BODY> <INPUT TYPE = "BUTTON"
<SCRIPT LANGUAGE = "JavaScript"> VALUE = "Kirim"
<!-- onClick =
function cekNama(form) { "cekNama(this.form)"><BR>
if (form.elements[0].value == "") { </PRE>
alert("Nama harus dimasukkan"); </FORM>
form.nama.focus(); </BODY>
form.nama.select(); </HTML>
return(false);
}
alert("Terima kasih, " +
form.elements[0].value);
return(true);
}
//-->
</SCRIPT>

7
Fungsi yang Dibuat Sendiri
• Menampilkan Jam
<HTML> function aturWaktu() {
<HEAD> var sekarang = new Date();
<TITLE>Jam</TITLE> var waktuSekarang = sekarang.toLocaleString();
</HEAD> document.formWaktu.teksWaktu.value =
<BODY> waktuSekarang;
<FORM NAME = "formWaktu"> setTimeout('aturWaktu()', 1000);
Waktu Sekarang : return(true);
<INPUT TYPE = "TEXT" }
NAME = "teksWaktu" // Menjalankan fungsi aturWaktu
VALUE = "" aturWaktu();
SIZE = "22"> //-->
</FORM> </SCRIPT>
<SCRIPT LANGUAGE = "JavaScript"> </BODY>
<!-- </HTML>

8
OBJEK
• Objek dari Navigator (Browser)
– JavaScript membagi satu halaman Navigator dalam berbagai obyek obyek,
dengan tujuan untuk memudahkan akses salah satu dari mereka dan
memanipulasinya dengan cara merubah sifat/kondisi (properti) mereka.
– Dimulai dari obyek yang paling besar diantara semuanya, kemudian turun
berdasarkan tingkatan sampai kepada obyek yang diinginkan.
• Obyek paling besar adalah obyek jendela (window) dari navigator.
• Di dalam obyek jendela, ada satu obyek yang ditampilkan dalam bentuk sebuah
halaman, kita sebut obyek dokumen atau document
• Halaman itu berisi banyak obyek seperti, formula, text, image dan lain lainya..
– Untuk mengakses satu obyek, kita harus mengakses terlebih dahulu obyek
yang paling besar( dalam hal ini obyek window )
• Contoh :
<script language="Javascript">
<!-- function ModifField()
{
if (document.forms["form1"].check_box.checked)
{document.forms["form1"].text_field.value="checkbox dipilih"}
else
{document.forms["form1"].text_field.value="checkbox tidak dipilih"}
}
// -->
</script> 9
Objek Standard JavaScript

10
Objek Array
• Obyek array adalah satu obyek yang memungkinkan kita untuk
membuat dan memanipulasi tabel, berikut ini adalah sintaks untuk
membuat tabel : var x = new Array(elemen1[, elemen2, ...]);
jika tidak ada elemen yang disebutkan dalam parameter, tabel itu akan menjadi
tabel kosong pada saat pembuatannya, sebaliknya jika elemen diisi, maka isi
tabel akan di inisialisasi oleh nilai dari elemen tersebut.
• Metode standard Objek Array :

11
Objek Array
• Contoh :
<HTML>
<HEAD>
<TITLE>Properti prototype</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
function tampilkanElemenArray() {
for (var i = 0; i < this.length; i++) {
document.write("[" + i + "] = " +
this[i] + "<BR>");
}
}
Array.prototype.cetak = tampilkanElemenArray;
var musik = new Array("Jazz", "Rock",
"keroncong", "Dangdut");
var tanaman = new Array("Aglaonema", "Begonia",
"Bromelia");
document.write("Isi array musik: <BR>");
musik.cetak();
document.write("Isi array tanaman: <BR>");
tanaman.cetak();
//-->
</SCRIPT>
</BODY>
</HTML> 12
•
Objek Date (Waktu)
Obyek date memungkinkan kita untuk bekerja dengan semua variabel yang
berhubungan dengan penanggalan dan juga durasi waktu.
• Sintaks sintaks untuk membuat obyek date adalah berikut ini :
• Nama_dari_obyek = new Date()
sintaks ini memungkinkan kita untuk menyimpan tanggal dan jam saat ini.
• Nama_dari_obyek = new Date(“hari, bulan tanggal tahun
jam:menit:detik”)
parameter berbentuk string dengan batas batas pemisah sepeti format
diatas.
• Nama_dari_obyek = new Date(tahun, bulan, hari)
parameter adalah 3 integer yang dipisahkan oleh tanda koma
• Objek Waktu Standard
getMonth(), getSecond(),
getTime(),toLocalString()
,setDate(X),setDay(X),
setHours(X),setMonth(X)
, setTime(X) , dll……

Contoh : lihat
Pembahasan SWITCH

13
Objek Radio
<HTML> Info:
<HEAD> <INPUT TYPE = "TEXT"
<TITLE>Mengakses Objek radio</TITLE> NAME = "fieldMusik"
</HEAD> SIZE = "40">
<BODY> </FORM>
Klik pada musik yang paling Anda sukai<BR> <SCRIPT LANGUAGE = "JavaScript">
<FORM NAME = "formTes" <!--
METHOD = "GET"> function info() {
<INPUT TYPE = "RADIO" for (var i = 0; i < 4; i++)
NAME = "radioMusik" if (document.formTes.radioMusik[i].checked)
VALUE = "Jazz" document.formTes.fieldMusik.value =
onClick = "info()">Jazz<BR> document.formTes.radioMusik[i].value;
<INPUT TYPE = "RADIO" }
NAME = "radioMusik" //-->
VALUE = "Keroncong" </SCRIPT>
onClick = "info()">Keroncong<BR> </BODY>
<INPUT TYPE = "RADIO" </HTML>
NAME = "radioMusik"
VALUE = "Dangdut"
onClick = "info()">Dangdut<BR>
<INPUT TYPE = "RADIO"
NAME = "radioMusik"
VALUE = "Lainnya"
onClick = "info()">Lainnya<BR>
<HR>
14
Objek Password
<SCRIPT LANGUAGE = "JavaScript">
<HTML> <!--
<HEAD> function cekPassword() {
<TITLE>Mengakses Objek password</TITLE> if (document.formTes.password_1.value !=
</HEAD> document.formTes.password_2.value)
<BODY> alert("Dua password yang Anda masukkan
<FORM NAME = "formTes" tidak sama");
ACTION = "tesform.htm" else
METHOD = "POST"> window.location.href = "tesform.htm";
<PRE> }
Password Pengganti : <INPUT TYPE = "PASSWORD" //-->
NAME = "password_1"> </SCRIPT>
Password Sekali Lagi: <INPUT TYPE = "PASSWORD" </BODY>
NAME = "password_2"> </HTML>
</PRE>
<INPUT TYPE = "BUTTON"
NAME = "tombolProses"
VALUE = "Proses"
onClick = "cekPassword()">
</FORM>

15

Anda mungkin juga menyukai