DI SUSUN OLEH :

Nama : Siti Aminah

Npm : 20054350065
Smester : VI
Kelas : N ( Sore )

TEKNIK INFORMATIKA
UNIVERSITAS INDRAPRASTA PGRI (UNINDRA)
Jl. Nangka No.58 c Tanjung Barat,Jagakarsa,
Jakarta Selatan.

1
Fungsi tanggal dan waktu dengan menggunakan Java
Script Dan HTML

A. Pengenalan

JavaScript adalah suatu bahasa script yang menyerupai cara penulisan pada Java.
Kode JavaScript dituliskan diantara tag HTML yang akan diinterpretasikan oleh
browser klien. Java script akan membuat halaman Web anda menjadi lebih interaktif.
Menggunakan JavaScript, memungkinkan kustomisasi terhadap dokumen HTML
pada saat diakses dengan menulis melalui penanganan event terhadap elemen-elemen
dalam halaman tersebut, memeriksa data form pada sisi klien dan melakukan
perhitungan pada sisi klien.

Agar dapat bekerja dengan lancar dengan contoh JavaScript berikut ini, tentu saja
anda membutuhkan suatu browser yang mendukung JavaScript which you already
have .

B. Tentang JavaScript

JavaScript adalah bahasa script yang dinamis. Hal ini berarti bahwa tipe data pada
Javascript tidak baku tetapi dapat berubah dari suatu tipe ke tipe yang lain sesuai
dengan kebutuhan. Sebagai contoh, anda dapat menyatakan myData = 10; pada
suatu baris initialisasi, dan baris berikutnya, menyatakan myData = "Hello World!"
yang membuat tipe myData menjadi suatu string. Java Script akan secara otomatis
mengubah tipe data berdasarkan ekspresi yang ditentukan. Jadi jika anda menyatakan
myData = "10" - 2;, maka anda akan bertanya mengapa Javascript tidak
mengkonversi 2 menjadi "2" dan menghasilkan "102", jawabanya adalah karena
operator - tidak ditujukan untuk pemakaian pada string sehingga "10" - 2 tidak
memiliki arti sama sekali. Berikut ini akan membawa kita kepada suatu situasi yang
lebih menarik. Operator + dinyatakan untuk pemakaian pada numerik dan string. Jadi
akankah 10 + "20" mengembalikan nilai 30 (10+20) atau "1020" ("10" + "20").
Hal ini tentu saja akan membingungkan anda dengan pemakaian operator +,
jawabannya adalah Javascript akan selalu mengkonversi segala sesuatu ke string
sebelum melakukan evaluasi, sehingga 10 + "20" adalah sama dengan "10" + "20"
dan hasilnya adalah "1020".

Perhatian: JavaScript membedakan huruf besar dan kecil, sehingga penulisan

indoprog adalah berbeda dengan Indoprog (Ngomong-ngomong apakah
kepanjangan dari indoprog?)

2
 Berkaitan dengan keamanan yang terkandung dalam JavaScript, adalah sangat
tidak benar bahwa kode JavaScript dapat merusak sistem anda. Sehingga anda dapat
mengunakannya tanpa perasaan was-was.

C. Fungsi Date Time

Untuk memudahkan penanganan tanggal dan waktu, JavaScript menyediakan

Objek Date didalamnya. Suatu variabel Date harus dideklarasikan terlebih dahulu
sebelum kita dapat menggunakannya. Pendeklarasian Objek Date dapat menggunakan
statement JavaScript berikut ini.

dateVar = new Date();

Contoh diatas akan membuat suatu variabel dengan nama dateVar dan
mengisinya dengan tanggal dan waktu sekarang. Jika anda ingin menentukan tanggal
dan waktu lainnya, anda dapat menggunakan salah satu cara penulisan berikut.

DateVar = new Date(“month day, year hours:minutes:seconds”)

dateVar = new Date(year, month, day)
dateVar = new Date(year, month, day, hours, minutes, seconds)

D. Metode dari Object Date

Metode-metode yang paling banyak digunakan pada objek tanggal adalah

sebagai berikut :
getYear()
dateVar.getYear() mengembalikan nilai seperti 99 sesuai dengan tahun dari
dateVar.
getMonth()
mengembalikan nilai antara 0 dan 11 sesuai dengan tanggal January s/d
December.
getDate()
mengembalikan nomor hari dari bulan.
getDay()
mengembalikan nomor hari dari minggu. Nol untuk Minggu, satu untuk Senin
dan seterusnya.
getHours()
mengembalikan angka antara 0 dan23 menentukan jam dari hari.

3
 Anda mungkin pernah menggunjungi situs yang dapat menyapa Selamat Pagi
atau Selamat Malam tergantung pada waktu kunjungan anda. Hal ini dapat dilakukan
dengan memeriksa waktu sekarang dan sisipkan sapaan dengan menggunakan fungsi
document.write(). Kode berikut ini dapat melakukan hal tersebut. Sisipkan kode
tersebut dalam HTML file pada posisi dimana anda ingin sapaan tersebut muncul.

<SCRIPT LANGUAGE="JavaScript">
<!-- Memyembunyikan kode dari browser non-js
currentTime = new Date();
if (currentTime.getHours() < 12)
document.write("Selamat Pagi");
else if (currentTime.getHours() < 17)
document.write("Selamat Sore");
else document.write("Selamat Sore");

// akhir dari penyembunyian -->

</SCRIPT>

E. Membuat Jam Digital

Berikut ini adalah suatu contoh program jam digital dengna JavaScript.

Kode-nya adalah sebagai berikut :

<TABLE BORDER=4 BGCOLOR=CYAN>

<TR><TD>
<FORM NAME="clock_form">
<INPUT TYPE=TEXT NAME="clock" SIZE=26>
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide from non JavaScript browsers
function clockTick()
{
currentTime = new Date();
document.clock_form.clock.value = " "+currentTime;
document.clock_form.clock.blur();
setTimeout("clockTick()", 1000);
}
clockTick();
// End of clock -->
</SCRIPT>
</TD></TR>
</TABLE>

4
F. Statusbar dan Scroller

Pernah melihat yang tulisan berputar di status bar browser ? Itu adalah scroller.
Tulisan berputar sangat populer dan menarik perhatian bagi pemula, dan bukan
merupakan ide yang baik, karena fungsi status bar bukan ditujukan untuk hal tersebut.
Menurut anda apa fungsi status bar ?

a. Program Scroller

Berapa banyak baris script yang diperlukan untuk menghasilkan suatu

scroller ? Jawabnya Dua belas baris.

Fasilitas apa saja yang terdapat pada JavaScript sehingga memungkinkan kita
membuat suatu scroller ?

Pertama adalah kemampuan menampilkan tulisan pada status bar dengan :

window.status = "Ini akan muncul pada status bar"

Kedua adalah adanya fungsi setTimeout(). Fungsi ini memiliki dua buah
parameter. Parameter pertama adalah string yang merupakan perintah
JavaScript yang akan diaktifkan dan parameter kedua adalah jumlah milidetik
untuk mengaktifkan perintah tersebut.

Tulisan berputar pada dasarnya adalah suatu fungsi, yang pada pada setiap aksi,
memindahkan tulisan pada scrollbar sedikit ke kiri dan kemudian memanggil
setTimeout() untuk mengaktifkan kembali dirinya setelah suatu interval waktu
tertentu.

Berikut ini adalah kode lengkap untuk menghasilkan scroller.

<SCRIPT LANGUAGE="JavaScript">
<!-- Start of scroller script
var scrollCounter = 0;
var scrollText = "Teks yang anda inginkan, misalnya Viva
Indoprog";
var scrollDelay = 70;
var i = 0;

while (i ++ < 140)

scrollText = " " + scrollText;

function Scroller()
{
window.status = scrollText.substring(scrollCounter++,
scrollText.length);
if (scrollCounter == scrollText.length)
scrollCounter = 0;

5
 setTimeout("Scroller()", scrollDelay);
}

Scroller();
// End of scroller script -->
</SCRIPT>

Fungsi lainya yang kita gunakan adalah substring(), yang mana merupakan
metode dari objek string. Jika name="JavaScript", maka name.substring(4,9)
akan mengembalikan "Script".

b. Membuat tulisan berputar pada halaman anda

Jika pemrograman bukan merupakan bidang anda, dan anda menginginkan

scroller diatas, maka duplikasi saja kode diatas ke file HTML anda, dan letakkan di
antara tag <HEAD> dan </HEAD> serta ubah scrollText dan scrollDelay variabel
pada baris 4 & 5 sesuai dengan kebutuhan anda.

G. Menampilkan Icon New-Item

Ketika anda menambahkan atau melakukan modifikasi tertentu pada situs anda,
anda sering ingin menempatkan suatu icon (new) disampingnya, sehingga pengunjung
dengan mudah dapat menemukan hal-hal yang baru tersebut. Tentu saja icon tersebut
ditampilkan untuk suatu periode waktu tertentu dan kemudian dihilangkan. Pekerjaan
tersebut menjadi tidak efektif bila anda melakukan modifikasi situs secara berkala
atau situs anda cukup besar.

Dengan menggunakan JavaScript, adalah memungkinkan untuk memprogram

HTML yang menampilkan icon new untuk suatu periode waktu tertentu. Anda dapat
menulis suatu fungsi JavaScript yang mana berfungsi membandingkan waktu
sekarang dengan waktu kadaluarsa yang telah ditetapkan, atau dengan kata lain
sisipkan icon new hanya jika tanggal sekarang belum mencapai tanggal kadaluarsa.

Berikut ini kodenya :

<SCRIPT LANGUAGE="JavaScript">
<!-- Hide code from non-js browsers
function newItem(expiryDate)
{
exp = new Date(expiryDate);
cur = new Date();
if (cur.getTime() < exp.getTime())
document.write("&ltIMG SRC=\"new.gif\" WIDTH=31
HEIGHT=12 BORDER=0 ALT=\"new\">" );
}
// end hiding -->
</SCRIPT>

6
 Biasanya, fungsi seperti ini didefinisikan antara bagian <HEAD> dan </HEAD>
pada HTML. Ganti nama new.gif ke nama dari image anda dan modifikasi atribut
WIDTH dan HEIGHT ke ukuran yang sesuai. Sekarang dimana saja anda ingin
meletakkan icon new tersebut, sisipkan kode berikut :
<SCRIPT LANGUAGE="JavaScript">
<!--
newItem("10/1/2000");
// -->
</SCRIPT>
Icon akan menampilkan tanggal yang mana anda tentukan sebagai
parameter untuk newItem().

a. Meletakan tulisan pada status bar

Contoh pertama mendemontrasikan bagaimana memanipulasi tulisan pada

status bar. Ketika anda mengerakan kursor melalui suatu link, maka statusbar akan
menampilkan URL tujuan link tersebut.

Suatu kode HTML untuk suatu membentuk link dapat berupa :

<A HREF="mylink.htm">klik disini</A>

Untuk menampilkan sesuatu pada status bar ketika mouse pointer digerakan
melalui link, anda perlu menambah kode berikut :

<A HREF="mylink.htm" onMouseOver="window.status='Klik disini

untuk mengetahui lebih jauh tentang saya'; return true;"
onMouseOut="window.status=''; ">Klik disini</A>

onMouseOver adalah suatu penanganan event. Perlu diperhatikan bahwa

JavaScript akan membedakan huruf besar dan huruf kecil, tetapi Microsoft Internet
Explorer adalah lebih pemaaf dibandingkan dengan Netscape Navigator, jadi untuk
hasil yang lebih akurat, sebaiknya anda menggunakan Navigator dalam memeriksa
kebenaran script pada halaman anda.Anda mungkin merasa aneh mengapa kami
diperlukan suatu return true; pada penanganan event onMouseOver. Normalnya
browser menampilkan URL dari link pada status bar, dan potongan kode ini
memberitahukan kepada browse untuk tidak menimpa pesan kita dengan URL
tersebut.

7
b. Menampilkan tanggal "Last Updated" pada dokumen

Pada halaman kita sering ingin menampilkan informasi kepada pengunjung

tanggal terakhir kali halaman kita di Update. Berikut ini adalah potongan script yang
akan secara otomatis menghasilkan informasi terakhir kali halaman kita di Update:

<SCRIPT LANGUAGE="JavaScript">
<!-- menyembunyikan dari browser non-js
document.write("Last updated :");
document.write(document.lastModified);
// -->
</SCRIPT>

Sisipkan kode berikut pada bagian dokumen HTML anda yang akan
menampilkan informasi Last update. Perhatikan bahwa script diketik diantara tag
komentar HTML <!-- ... -->, tujuannya supaya script tersebut tersembunyi dari
browser non-JavaScript, dengan demikian tidak menimbulkan kesalahan pada
browser non-JavaScript tersebut.

Catatan : biasakan mengetik script anda diantara tag komentar HTML <!-- .. -->.

c. Menampilkan pesan dengan suatu kotak pesan

Kadang-kadang kita ingin menampilkan suatu pesan kepada pengunjung, jika

suatu tombol atau link di klik. Pada JavaScript kita dapat menggunakan fungsi
alert() yang mana akan menampilkan suatu kotak pesan. Misalnya kita ingin
memberi kejutan kepada pengunjung, begitu halaman dibuka.

Untuk melakukan hal ini, tambahkan saja kode berikut setelah tag <BODY>
(atau diantara tag <HEAD>).

<SCRIPT LANGUAGE="JavaScript">
<!-- menyembunyikan dari browser non-js
alert("Press Ok to start formatting your hard disk");
// akhir dari penyembunyian -->
</SCRIPT>

Hal ini tentu saja akan menjadi kejutan bagi pengunjung halaman anda Untuk
memahami apa sebenarnya yang terjadi, coba simak script berikut :

<A HREF="JavaScript: alert('pesan anda disini.')">

JavaScript : bagian ini akan memberitahukan kepada browser bahwa dia harus
menjalankan perintah JavaScript yang tersebut ketika link di klik.

8
Anda juga dapat membuat suatu pesan ditampilkan tombol ditekan. Coba yang berikut
ini:

<FORM>
<INPUT TYPE=BUTTON VALUE="Klik disini"
onClick="alert('pesan anda disini')">
</FORM>

Catatan :

Anda mungkin memperhatikan bahwa, cara penulisan script pada setiap contoh
diatas berbeda. Yang pertama adalah script ditulis diantara tag HTML <A
HREF=...>, yang kedua adalah diantara suatu tang <SCRIPT> ... </SCRIPT>.
Perbedaan ini adalah bahwa, script pertama akan dijalankan pada event tertentu
(MouseOver dalam hal ini), sedangkan untuk yang kedua, script langsung
dijalankan ketika ditemukan pada dokumen HTML.

d. Membuat suatu link yang dapat menutup jendela browser

Untuk menutup jendela browser yang sedang aktif anda dapat menggunakan metode
close pada objek window.

Contoh :

<A HREF="javascript:window.close()">tutup</A>

e. Membuka suatu halaman berdasarkan pilihan pemakai pada suatu dropdown

list

Anda dapat membuat suatu fungsi yang mengambil nilai item yang dipilih
pemakai, dan membuka halaman yang diinginkan

Contoh :
<SCRIPT LANGUAGE='JavaScript'>
<!--
function BuatArray() {
var jlhargumen = BuatArray.arguments.length;
for ( i = 0 ; i < jlhargumen; i++ )
{ this[i]=BuatArray.arguments[i] }
}
function buka() {
var pilih = eval(document.dropdown.site.selectedIndex);
if( (pilih > 0) && (pilih < 7) ) {
var bagian=new BuatArray( '',
'http://indoprog.terrashare.com/tutor/html/index.html',
'http://indoprog.terrashare.com/tutor/javascript/index.html',
'http://indoprog.terrashare.com/tutor/asp/index.html',
'http://indoprog.terrashare.com/tutor/php/index.html',

9
 'http://indoprog.terrashare.com/tutor/perl/index.html');
this.location=buka[pilih];
}
}
//-->
</SCRIPT>
<FORM NAME="dropdown">
<SELECT NAME="site" onChange='buka();' ALIGN="left">
<OPTION SELECTED>Pilih tutorial yang diinginkan
<OPTION>HTML
<OPTION>JavaScript
<OPTION>ASP
<OPTION>PHP
<OPTION>Perl
</SELECT>
</FORM>

Hasil :

f. Membagi Jendela Browser menjadi frame, dan klik link pada pilihan
diframe kiri akan mengupdate isi frame kanan.

Anda dapat melakukan hal tersebut dengan JavaScript, dan perhatikan contoh
berikut :

Misalnya halaman html untuk membuat frame kiri dan kanan adalah sebagai
berikut :

Contohnya.html

<html>
<head>

<title>Tutorial JavaScript</title>

<frameset cols=175,*>

<frame src="menu.html" name="kiri">

<frame src="topik1.html" name="kanan">

</frameset>

</head>
</html>

10
Pada contoh diatas, pada frame kiri akan dibuka suatu html dengan nama menu.html,
dan sebelah kanan akan diaktifkan topik1.html, dan isi dari menu.html adalah sebagai
berikut :

menu.html

<html>
<head>
<script language="JavaScript">
function buka(x)
{
top.kanan.location=x;// membuka halaman x pada frame
kanan
return false
}
</script>
</head>
<body>
<h1>Daftar Isi</h1>

<a href="" onclick="return buka('topik1.html')">Memasukan

JavaScript ke dalam HTML</a><hr>
<a href="" onclick="return buka('topik2.html')">Variabel dan
Literal</a><hr>
<a href="" onclick="return buka('topik3.html')">Ekspresi dan
Operator</a><hr>
<a href="" onclick="return buka('topik4.html')">Struktur
Kendali dan Fungsi</a><hr>
<a href="" onclick="return buka('topik5.html')">Dasar dari
Objek</a><hr>
<a href="" onclick="return buka('topik6.html')">Objek dan
Fungsi built-in</a><hr>
<a href="" onclick="return buka('topik7.html')">Objek
netscape</a><hr>
<a href="" onclick="return buka('topik8.html')">Objek
form</a><hr>
<a href="" onclick="return buka('topik9.html')">Window dan
Frame</a><hr>

</body>
</html>

Pada menu.html diatas, kita menggunakan event onclick pada masing-masing

link yang akan memanggil suatu fungsi buka yang diikuti dengan suatu parameter
yang berupa nama dokumen html target. Pada fungsi buka, kita menggunakan properti
location untuk frame kanan membuka halaman bersangkutan.

Catatan : kanan dalam hal ini adalah nama frame.

11
H. Objek Netscape

Sebagai tambahan kepada objek-objek JavaScript dan metode, Pengembang

halaman Web dapat mengakses objek-objek dan metode dalam Netscape browser.
Bagian ini akan membahas Objek Netscape Navigator dan metode-metodenya.

a. Hirarki Objek Navigator

Netscape Navigator membangun suatu hirarki instance-instance yang

berkaitan dengan dokumen yang sedang di proses.Hirarki ini penting untuk membuat
acuan kepada Objek dan propertinya. Turunan dari suatu Objek adalah properti dari
objek orang tuanya. Karena semua objek adalah merupakan turunan dari objek
window , sehingga objek window sendirinya tidak memiliki acuan ke objek maupun
properti apapun. Tetapi bagaimanapun, acuan ke suatu dokumen pada window lain
membutuhkan tambahan nama window kepada Objek acuan-nya.

b. Hal yang penting dari HTML Layout

Untuk dapat menggunakan JavaScript secara benar membutuhkan

pengertian bagaimana Netscape Navigator memproses suatu dokumen HTML. Ketika
suatu dokumen HTML di muat, browser akan mulai melakukan proses terhadap baris
pertama dari dokumen. Browser membuat layout dari layar berdasarkan perintah
HTML yang terdapat dalam dokumen tersebut. Setelah layar selesai digambar, layar
tidak dapat digambar ulang tanpa melakukan proses terhadap dokumen baru.
Bagaimana hal ini mempengaruhi frame dan window adalah topik pada bagian
berikutnya.

Sesuai dengan hal ini, maka instance dari suatu objek ada setelah proses
dilakukan terhadap baris HTML yang menghasilkan instance tersebut. Dengan kata
lain JavaScript tidak dapat mengacu pada suatu objek HTML seperti form, atau
menjalankan suatu fungsi sampai browser memproses perintah tersebut. Sebagai
contoh, JavaScript tidak dapat mengacu pada suatu objek form sampai browser
memproses HTML untuk form tersebut. Demikian juga dengan proses perubahan
properti, setelah browser menggunakan properti dalam menghasilkan layout window,
maka perubahan properti setelah itu tidak memiliki efek terhadap
tampilannya.Walaupun nampaknya keterbatasan tersebut berat, namun dengan
pengertian yang baik terhadap HTML proses dan JavaScript akan mengurangi
frustasi. Prinsip utama yang perlu diingat bahwa suatu dokumen HTML diproses
secara berurut dan JavaScript adalah bagian dari proses secara berurut tersebut.

12
 c. Objek Window

Objek window adalah orang tua dari semua Objek. Hal tersebut termasuk
semua window dan frame yang berada dalam suatu. Ketika browser mulai memuat
suatu dokumen HTML, hal tersebut dimulai dengan suatu instance dari objek window.
Jika dokumen HTML membuat suatu frame, informasi dari frame tersebut tersimpan
dalam suatu objek frame array. Dengan kata lain, membuka suatu window akan
menghasilkan suatu anak dari objek window. Kehebatan dari JavaScript adalah
terletak pada kemampuan untuk melakukan utilisasi properti dan metode dari objek
window.

Bagian ini akan membahas properti dari objek window berikut :

• objek Location
• objek History
• objek Document

Diantara ketiga objek tersebut, document adalah objek yang paling penting
dalam hirarki tersebut. Objek document itu sendirinya mengacu kepada objek lain.
Hal lain yang penting dari hal ini adalah sebagai berikut:

• objek form
• objek anchor
• objek link

d. Objek location

Objek location mengandung informasi tentang URL sekarang. Acuannya ke

objek tersebut adalah sebagai berikut:

[windowReference.]location[.propertyName]

Properti dari Objek location mengacu pada bagian individual dari URL:

protocol//hostname:port pathname search hash

CATATAN
Objek location dan properti location dari objek dokumen
(document.location) memiliki tujuan yang berbeda. Objek location
dapat berubah, tetapi properti location tidak dapat berubah.

Properti dari objek location adalah sebagai berikut:

• protocol. protocol menentukan metode access dari URL.

• hostname. hostname mengandung nama host dan domain, atau alamat IP, dari
host tujuan.

13
 • port. port adalah TCP/IP port, jika kosong akan digunakan port default dari
protocol tersebut.
• pathname. pathname meliputi path resource pada host tujuan.
• search. property search adalah string yang dimulai dengan tanda ? yang
digunakan untuk script CGI.
• hash. property hash adalah suatu string yang dimulai dengan tanda hash(#)
dan diikuti dengan suatu anchor name.
• href. property ini merupakan keseluruhan dari URL. Jika acuan dibuat
ke[windowName.]location, property href menjadi asumsi.
• host. Property ini ekivalen dengan hostname:port.

CATATAN
Walaupun JavaScript memungkinkan modifikasi pada properti
individual, praktek pemrograman yang umum adalah mengubah
properti href. Pendekatan ini mencegah hasil error dari browser
sebelum akses URL belum berubah secara keseluruhan.

Contoh :

<a href=""
onmouseover="parent.location='http://www.indoprog.com/'">
Langsung ke homepage Indoprog</A>

e. Objek History

Akses ke objek History adalah topik yang kontroversial karena

memungkinkan script mengirim history kembali ke server. Untuk mencegah
pemakaian yang menyimpang, Netscape Navigator 2.01 keatas telah menghilangkan
Objek ini.

Contoh 1 :
<a href="#" onClick="history.go(-1)">Back</a>
<input type=button value="Back" onClick="history.go(-1)">

Contoh 2 :
<HEAD>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
var agree=confirm("Apakah anda yakin untuk melanjutkan
PROSES ?");
if (agree)
document.write("");
else
history.go(-1); // Kembali ke halaman sebelumnya
// End -->
</SCRIPT>
</HEAD>

14
 f. Objek document

Objek document menyimpan properti, objek, dan metode yang mewakili

dokumen. Hal tersebut mengacu pada bagian dokumen HTML yang didefinsikan oleh
tag <BODY></BODY>. Bagian ini mendiskusikan komponen dari objek dokumen,
kecuali objek form (yang akan dibahas pada bagian berikutnya).

g. Properti objek document

Option HTML ke tag <BODY> mendefinisikan properti objek document.

JavaScript mengacu pada semua properti ini, kecuali untuk image background.

CATATAN
String yang diperlukan untuk mengubah properti color adalah dalam
format document.colorProperty = "#RRGGBB" atau
document.colorproperty="colorName". Property color lainnya
didefinisikan dalam tag <HEAD></HEAD> yang mendahului tag
<BODY>.

Properti color untuk Objek document adalah sebagai berikut:

• bgColor. Property ini menentukan warna latarbelakang dari dokumen.

Property bgColor secara langsung mengupdate tampilan.
• fgColor. Property ini menentukan warna text dari dokumen. Setelah
browser menyelesaikan layout dari dokumen HTML., browser
mengabaikan perubahan pada propery ini. Kecuali tag <FONT> atau
metode fontcolor metode menyediakan suatu mekanisme alternatif untuk
mengubah warna text.
• linkColor. linkColor mewakili warna dari suatu link yang didefinsikan
oleh HREF.
• alinkColor. property control warna dari suatu active link. Dengan kata
lain, hal tersebut adalah warna dari link ketika terpilih.
• vlinkColor. Situs yang pernah dikunjungi, browser menampilkan warna
untuk link tersebut.

Contoh 1:

<FORM>
<SELECT onChange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPTION VALUE="40E0D0"> Torquoise
<OPTION VALUE="2E8B57"> Sea Green
<OPTION VALUE="87CEEB"> Sky Blue
<OPTION VALUE="F4A460"> Sandy Brown

15
 <OPTION VALUE="FFF0F5"> Lavender Blush
<OPTION VALUE="FF1493"> Deep Pink
<OPTION VALUE="FFFFFF" SELECTED> White
</SELECT>
</FORM>

Hasil :

Objek document juga mengandung properti berikut yang tidak berkaitan dengan
warna:

• lastModified. Property read-only yang berkaitan dengan tanggal terakhir

dokumen dimodifikasi.
• location. Property read-only yang biasanya sama dengan nilai dari lokasi
Objek, kecuali redirection digunakan untuk URL
• referrer. Property read-only mengandung URL untuk dokument yang mana
di link ke dokumen tersebut.
• title. Property read-only mengandung nilai yang ditentukan pada
tag<TITLE></TITLE>.

Contoh 1 :

<SCRIPT LANGUAGE="JavaScript">
<!--
document.write("Update terakhir :");
document.write(document.lastModified);
// -->
</SCRIPT>

Contoh 2:

<form name=404form>
<script language="JavaScript">

<!-- Begin
var from = document.referrer;
document.write("<input type=text name=referrer
value='" + from + "'>");
// End -->
</script>
</form>

h. The anchors Objek

Objek anchors mengandung suatu array dari semua anchors yang

dideklarasikan dengan atribut NAME dari tag <A> </A>. Array tersebut dimulai dari 0
dan berlanjut sampai document.anchors.length - 1. Nilai dari
document.annchors[index] adalah null.

16
 TIP
Sebelum menggunakannya untuk memberikan nilai seperti
location.hash, adalah mungkin untuk memeriksa keabsahan dari
anchor dengan membandingkannya dengan panjang array; anda
menggunakan bilangan berurut untuk menentukan anchors

i. Objek link

Array link mengandung Objek link yang didefinisikan oleh tag <A></A>
atau dengan metode link. Array tersebut meliputi objek untuk atribut HREF dan NAME.
Dengan tambahan ke atribut TARGET, properti dari masing-masing Objek link adalah
identik dengan Objek location.

CATATAN
link array adalah suatu array read-only. Entries tambahan
ditambahkan dengan tag <A></A>. Metode link melakukan
modifikasi terhadap isi dalam array link

Objek link memiliki dua event handler: onClick dan onMouseOver. Bagian ini
disebut sebagai "The Form Objek," pada bagian selanjutnya di bab ini,
menggambarkan bagaimana mengunakan event handler.

j. Properti cookie

Property cookie mengandung suatu nilai string dari isi cookier dari file
cookies.txt untuk dokumen tersebut. Untuk suatu keterangan lengkap tentang
bagaimana menggunakan cookies, lihat bagian Netscape cookie specification. Metode
substring, charAt, indexOf, dan lastIndexOf dapat digunakan untuk memisahkan
string cookie.

k. The document Objek Metodes

Objek document mengandung lima metode:

1. document.write()
2. document.writeln()
3. document.open()
4. document.close()
5. document.clear()

Sebagaimana yang ditunjukkan pada contoh sebelumnya, metode document.write,

tanpa mengacu pada suatu window, menulis text ke window yang sekarang.

17
 Metode document.writeln() adalah sama dengan document.write,
selain itu juga menyisip suatu karakter newline pada akhir dari argumen. Format dari
metode ini adalah sebagai berikut:

document.write(ekspresi [, ekspresi2] ... [ekspresiN])

document.writeln(ekspresi [, ekspresi2] ... [ekspresiN])

Tipe default MIME adalah text/html.Bagaimanapun, metode

document.open(["mimetype"]) memungkinkan untuk membuka type MIME
lainnya, seperti text/plain, image/gif, image/jpeg, image/x-bitmap, dan plugIn. Metode
document.open() membuka suatu stream untuk mengumpulkan output dari metode
write dan write.ln. Jika tipe MIME adalah text atau image, browser membuka
suatu stream untuk layout, untuk plugIn, browser membukanya pada suatu plug-in.
Jika suatu dokumen telah siap dalam target windows, mthod open menghapusnya.

Contoh :

<SCRIPT>
document.write(Date()+".")
</SCRIPT>

Stream tersebut tetap terbuka sampai browser menemukan metode

document.close(). document.close() memaksakan isi dari stream ditampilkan.
Metode document.clear() membersihkan isi dari window.

Contoh :

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var clocktext, timeday;
var pagetitle = document.title;
function scroll() {
today = new Date();
sec = today.getSeconds();
hr = today.getHours();
min = today.getMinutes();
// 12 Hour clock fix by Michael Mann
if (hr < 12) { timeday = " AM"; }
else { timeday = " PM"; }
if (hr > 12) hr = hr - 12;
if (hr <= 9) hr = "0" + hr;
if (min <= 9) min = "0" + min;
if (sec <= 9) sec = "0" + sec;
var clocktext = " - " + hr + ":" + min + ":" + sec +
timeday;
clocktimer = setTimeout("scroll()", 1000);
document.title = pagetitle + clocktext;
}
if (document.all) scroll();
// End -->
</script>

18
I. Window dan Frame

Window dan frame membuat bingung banyak pengembang halaman Web dari
pada aspek-aspek browser lainnya. Ketika Netscape Navigator berjalan, suatu window
akan dibuka, dan tergantung bagaimana pengaturan optionnya, serta memuat suatu
dokumen ke dalam window tersebut. Jika anda memilih menu option File | New Web
Browser, suatu window baru akan di buka. Dalam hal ini menutup jendela yang
sebelumnya tidak akan menutup jendela yang baru tersebut.

Pada sisi yang lain, frame dibuat berdasarkan tag <FRAMESET></FRAMESET>

dalam dokumen HTML. Layar akan dibagi menjadi sejumlah frame. Ketika
dokumen frame ditutup, frame menghilang karena keberadaannya
tergantung pada dokumen tersebut.

a. Properti Objek Window

Suatu fasilitas umum dari JavaScript adalah kemampuannya untuk membuat

dan memanipulasi window. Kemampuan ini tidak hanya terbatas pada menampilkan
pesan, tetapi sangat tergantung pada parameter yang diberikan. berikut ini adalah
properti dari objek window yang akan mempengaruhi fleksibilitas dari jendela
browser:

• defaultStatus. defaultStatus adalah pesan yang dimunculkan pada status

bar ketika tidak ada tulisan yang ditampilkan disana. Jika diset dari
onMouseOver event handler, event handler harus mengembalikan true untuk
perubahan status.
• frames. Property ini adalah suatu array yang mengandung object frame.
Frame mewarisi semua properti dan metode dari objek window.
• length. nilai dari properti ini adalah jumlah frame dalam frame array.
• parent. Dari suatu acuan frame, ini adalah window yang mana frameset
berada. Suatu frame diantara frameset tersebut dapat mengacu pada frame lain
dalam frameset dengan menggunakan parent.frames[index] tanpa
memiliki acuan ke nama window.
• self. Ini adalah sama dengan window atau frame yang sekarang.
• status. Ini adalah pesan transient yang mana diset dengan onMouseOver
event handler.
• top. Property ini digunakan sebagai acuan window yang laing atas. Dapat
digunakan oleh child windows atau embedded filesets untuk mengacu pada
window original.
• window. Property ini adalah sama dengan window sekarang.

19
Contoh:

<AHREF="http://www.indoprog.com"
onMouseOver="window.status='Klik disini untuk keterangan
lebih lengkap'; return true;" onMouseOut="window.status='';
">Klik disini</A>

Bentuk untuk mengacu properti window adalah

window.propertyName

self.propertyName

top.propertyName

parent.propertyName

windowVar.propertyName

propertyName

b. Metode Objek Window

Berikut ini adalah metode dari objek window atau frame:

• alert("message"). Metode ini membuat suatu kotak dialog peringatan

dengan suatu tombol OK tunggal. Digunakan untuk menampilkan pesan
yang tidak membutuhkan keputusan pemakai.
• close(). Metode ini menutup window acuan. Harus mengandung window
acuan seperti window.close dan close() tanpa acuan adalah sama
dengan document.close.
• confirm("message"). Metode confirm menampilkan suatu dialog box
konfirmasi dengan tombol OK dan Cancel. OK mengembalikan nilai true,
dan Cancel mengembalikan nilai false.
• [windowVar = ][window.]open("URL", "windowName"
["windowFeatures"]. Metode ini membuka suatu Jendela browser yang
baru. Nama object windowVar adalah nama dari jendela baru dan
digunakan sebagai acuan untuk properti dan metodes-nya.URL
menentukan URL yang akan dibuka ke jendela baru. Jika optionnya null,
suatu window kosong akan dibuka. Variabel windowName adalah nama
yang digunakan pada atribut TARGET dari <FORM> dan <A> tag. Variabel
windowFeatures adalah suatu comma-separated list dari option berikut:

toolbar=yes|no

location=yes|no

directories=yes|no

status=yes|no

20
 menubar=yes|no

scrollbars=yes|no

resizable=yes|no

width=pixels

height=pixels

• Jika tidak ada yang ditentukan, maka semuanya bernilai true. Jika salah
satu ditentukan, maka semua yang lain menjadi false. Jika salah satu di
tentukan tanpa nilai, maka nilainya adalah true.

NOTE
Setelah terbuat, window adalah tidak terikat pada parent window,
jika parent window di tutup, window yang dibuat tersebut tetap
buka.Event onUnLoad menangani penutupan window yang dibuat

• prompt("message" [, inputDefault]). metode prompt menampilkan

suatu prompt dialog box dengan suatu message, suatu input field, dan
tombol OK, dan sebuah tombol Cancel. inputDefault adalah suatu string,
integer, atau property dari suatu object yang mana mewakili nilai default
untuk inout field. Jika inputDefault tidka ditentukan, input fied
menampilkan nilai <undefined>.
• timeoutID=setTimeout(expression, msec). Dengan metode ini,
evaluasi dari ekspresi adalah jumlah delay dalam milidetik. timeoutID
adalah hanya digunakan oleh metode clearTimeout.
• clearTimeout(timeoutID). Metode ini membatalkan time-out yang
ditentukan oleh metode setTimeout.

Metode sebelumnya menggunakan acuan berikut:

window.metodeName(parameters)

self.metodeName(parameters)

top.metodeName(parameters)

parent.metodeName(parameters)

windowVar.metodeName(parameters)

metodeName(parameters)

21
 PERHATIAN
Metode open() dan close() perlu mengunakan acuan
window.open() dan window.close() untuk menghindari scope
dengan document.open() dan document.close()

J. Membagi Window kedalam Frame

Frames membagi suatu window secara multiple, memiliki scrollbar masing-

masing. Frame dibuat dengan tag <FRAMESET></FRAMESET> dalam dokumen HTML.
Masing-masing dokumen membuat suatu frame array untuk dokumen. Jika suatu
dokumen dibuka pada salah satu frame memiliki suatu <FRAMESET> tag, frame akan
terbagi lagi menjadi frame oleh dokumen tersebut. Hirarki dari frameset adalah
penting sebagai acuan properti dan metode dari frame.

CATATAN
Frames memiliki semua properti dari suatu window. Seluruh hirarki
untuk struktur frame adalah sama dengan struktur window.

Contoh :

<html>
<head>

<script language="JavaScript">

if (top.location != this.location)

top.location = this.location
//membuat html tidak berada
//dalam frame lain
</script>

<title>Tutorial JavaScript</title>

<frameset cols=175,*>

<frame src="daftar.html" name="kiri">

<frame src="topik1.html" name="kanan">

</frameset>

</head>
</html>

22
file daftar.html

<html>
<head>

<script language="JavaScript">

function buka(x)
{
top.frames[1].location=x;
return false
}

</script>

</head>

<body>

<h1>Daftar Isi</h1>
<a href="" onclick="return buka('topik1.html')">Memasukan
JavaScript ke dalam HTML</a><hr>
<a href="" onclick="return buka('topik2.html')">Variabel dan
Literal</a><hr>
<a href="" onclick="return buka('topik3.html')">Ekspresi dan
Operator</a><hr>
<a href="" onclick="return buka('topik4.html')">Struktur
Kendali dan Fungsi</a><hr>
<a href="" onclick="return buka('topik5.html')">Dasar dari
Objek</a><hr>
<a href="" onclick="return buka('topik6.html')">Objek dan
Fungsi built-in</a><hr>
<a href="" onclick="return buka('topik7.html')">Objek
netscape</a><hr>
<a href="" onclick="return buka('topik8.html')">Objek
form</a><hr>
<a href="" onclick="return buka('topik9.html')">Window dan
Frame</a><hr>

</body>
</html>

23
K. Proteksi Password
Kadang-kadang kita ingin memproteksi halaman untuk kalangan sendiri. Usaha
yang dapat kita lakukan untuk melakukan proteksi tersebut adalaj dengan
menanyakan username dan password. Ketika pengunjung melakukan klik pada
tombol submit, kode JavaScript pada halaman akan memeriksa apakah username dan
jika password benar, maka halaman yang sebenarnya akan ditampilkan. Kodenya
adalah sebagai berikut. sedikit forward dan berhasil.
Masalahnya adalah orang dapat melakukan suatu View|Source dan menemukan
username serta password untuk halaman yang di proteksi password, tentu saja contoh
ini kurang sempurna contoh ini kurang baik. Yang kita butuhkan adalah suatu metode
di mana pada HTML source-nya tidak akan kelihatan username dan password serta
halaman target. Suatu metode yang umum digunakan adalah membuat nama halaman
target berdasarkan username dan password yang dimasukkan oleh pemakai dan
mengarahkan browser ke halaman tersebut. Perhatikan hasil modifikasi fungsi
verifyLogin(.
Sekarang fungsi akan melakukan pengabungan terhadap username, pasword dan
".html" serta mengarahkan browser ke lokasi tersebut. Jadi jika pengunjung
memasukkan secret sebagai username dan page sebagai password, dia akan
mendapatkan secretpage.html. Atau dengan kata lain mereka tidak akan mengetahui
username dan paswword yang benar dan memasukan foo sebagai username dan bar
sebagai password, mereka akan diarahkan ke html yang tidak ada foobar.html dan
mendapatkan kesalahan yang menyatakan halaman tersebut tidak ada.

M. Memasukkan JavaScript kedalam HTML

JavaScript adalah pemrograman sisi klien yang akan dijalankan oleh browser
dari pengunjung, dan program JavaScript biasa ditanamkan didalam halaman web
untuk menghasilkan halaman yang dinamis. Untuk mempelajari JavaScript sebaiknya
anda menguasai dasar-dasar HTML Script sehingga akan memudahkan anda untuk
menyisipkan program JavaScript secara baik dan benar.

Ketiklah Contoh berikut dan simpan ke file Hello.html

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Menyembunyikan script terhadap browser non-JavaScript
document.write("Hello world.")
// akhir dari penyembunyian -->
</SCRIPT>

</HEAD>

</HTML>

24
Sebenarnya ada dua cara menanamkan JavaScript kedalam dokumen HTML anda,
yaitu :

1. Mengapit JavaScript tersebut dengan tag <SCRIPT>...</SCRIPT>

Contoh :

<SCRIPT LANGUAGE="JavaScript">

<!-- Menyembunyikan script terhadap browser non-JavaScript

Perintah-perintah JavaScript anda diketik disini.

// -->

</SCRIPT>

2. Menggunakan tag HTML yang menangani event.

Contoh :

<A HREF="http://www.indoprog.com" onMouseOver="window.status='Klik

disini untuk mengetahui lebih jauh tentang saya'; return true;"
onMouseOut="window.status=''; ">Klik disini</A>

a. Dengan menggunakan Tag <SCRIPT>

Walaupun Netscape Navigator akan mengolah semua teks dalam tag <SCRIPT>
sebagai JavaScript, tetapi adalah lebih baik melakukan deklarasi LANGUAGE yang
menentukan jenis bahasa script yang digunakan. karena ada beberapa bahasa script
lainnya untuk HTML, mendeklarasikan jenis bahasa script adalah suatu praktek yang
baik. Marilah kita memulai dengan suatu program sederhana yang akan mencetak
HelloWorld.

Contoh :

<HTML>
<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Menyembunyikan script terhadap browser non-
JavaScript
document.write("Hello world.")
// akhir dari penyembunyian -->
</SCRIPT>

</HEAD>

</HTML>

25
 Contoh diatas menunjukkan program Javascript diketik diantara tag <HEAD>
dan </HEAD>. Jika contoh JavaScript diatas diketikkan diantara tag <BODY>, juga akan
memiliki hasil yang sama. Tetapi karena bagian heading akan dibaca terlebih dahulu
dibandingankan dengan bagian <BODY>, menempatkan semua fungsi maupun variabel
global pada bagian heading adalah praktek pemrograman yang baik. Dan semua
perintah JavaScript yang berkaitan dengan dokumen ditempatkan pada bagian body
HTML.

Perhatian : Tidak semua browser mampu memproses JavaScript, sehingga untuk

menghindari kesalahan penampilan pada browser tersebut, anda perlu
mengetikkan JavaScript diantara tag komentar HTML sebagai berikut :

<!-- Menyembunyikan script terhadap browser non-JavaScript

Perintah-perintah JavaScript anda ketik disini.
// akhir dari penyembunyian -->

b. Dengan menggunakan Event

Menangani Event akan mengubah halaman yang static menjadi lebih dinamis.
Event adalah hasil terhadap aksi yang dilakukan oleh pemakai, seperti klik pada
mouse, klik pada tombol submit di suatu form, dan keluar dari halaman. Netscape
mengenali sejumlah event, tetapi kita tidak akan mendiskusinya sekarang.

Contoh :

<FORM>
<INPUT TYPE=BUTTON VALUE="Coba Klik" onClick="alert('Hello
world')">
</FORM>
Top of Form

M. Ekspresi dan Operator

Literal dan variabel dihubungkan oleh operator dan akan menghasilkan ekspresi.
JavaScript menyediakan berbagai operator yang memungkinkan programmer menulis
sejumlah ekspresi dari yang paling sederhana sampai yang paling sulit.

Contoh :

temp = 24

pada contoh diatas, temp adalah variabel, 24 adalah variabel, = adalah operator, dan
temp=24 adalah ekspresi.

26
 Operator JavaScript dapat dibagi menjadi beberapa kategori berikut:

• Assignment operator
• Arithmetic operator
• Bitwise operator
• Logical operator
• Comparison operator
• String operator

JavaScript memiliki operator binari maupun unari. Suatu operator binari

memiliki format.

operand1 operator operand2

Sebagai contoh , 9 * 7 atau temp = 24 adalah ekspresi dengan operator

binari.

Operator unari memiliki dua format:

1. operand operator

atau

2. operator operand

a. Assignment Operator

Operator pemberi nilai (=) adalah suatu operator binari yang digunakan
untuk memberi nilai ke operand di sisi kiri (biasanya berupa suatu variabel)
yang didasarkan pada nilai operand sebelah kanan (seperti NamaDepan =
"Hendra" atau x = y * 9). Table 3 adalah daftar singkat operator pemberi
nilai. Table 3. Daftar Operator assignment

Shorthand operator Artinya Contoh

X += y x = x + Y x +=
X -= y x = x - y x -=
X *= y x = x * y x *=
X /= y x = x / y x /=
X %= y x = x % y x %=
X <<= y x = x << y x <<=
X >>= y x = x >> y x >>=
X >>>= y x = x >>> y x >>>=
x &= y x = x & y x &= 0xC0
x |= y x = x | y x |= 0x0F
x ^= y x = x ^ y x ^= 0XFF

27
 Catatan
Bagi yang tidak familiar dengan pemrograman C, hati-hati dengan
perbedaan antara assignment operator (=) dan comparison operator
(==)

b. Arithmetic Operator

Sesuai dengan fungsinya operator aritmatika melakukan operasi perhitungan

aritmatika terhadap suatu nilai numerik baik dalam literal maupun variabel.
JavaScript mendukung operator standard aritmatika untuk penjumlahan (+),
pengurangan (-), perkalian (*), dan pembagian (/). Juga memiliki operator
modulus (%), increment (++), decrement (--), dan unary negation (-).

Operator modulus (%) adalah suatu operator binary yang mengembalikan nilai
sisa dari suatu pembagian bulat operand1 terhadap operand2. Sebagai contoh,
hasil dari 27 % 6 adalah 4.

Operator increment unary adalah menambah nilai satu ke variabel operand,

sedangkan operator decrement unary mengurangi satu dari padanya.
Bagaimanapun, nilai yang dikembalikan tergantung dari posisi operator terhadap
operand Jika operator berada didepan (++x atau --x), nilai yang dikembalikan
adalah x+1 atau x-1. Ketika operator dibelakang(x++ or x--), nilai x
dikembalikan sebelum ditambah atau dikurang.Operator khusus unari arithmetic
adalah operator unari negation operator. Ia membalikan tanda dari nilai yang
diberikan pada suatu variabel. Sebagai contoh, jika x = -7, -x mengubah nilai
menjadi 7.

c. Bitwise Operator

Untuk programmer yang perlu menangani bit. JavaScript menyediakan satu set
dari operator bitwise. Untuk operator ini, JavaScript melakukan konversi terhadap
operand menjadi integer 32-bit sebelum melakukan operasi padanya. Operator
logika bitwise adalah

• Bitwise AND (&), akan mengembalikan nilai dari logika AND antara
sepasang bit. Sebagai contoh , 0x0f & 0x0a mengembalikan 0x0a.
• Bitwise OR (|), akan mengembalikan nilai dari logika OR antara setiap
pasangan dari bit. Sebagai contoh, 0x05 | 0x0a mengembalikan 0x0f.
• Bitwise XOR (^), akan mengembalikan nilai dari logika exclusive OR
between antara tiap pasangan bit. Sebagai contoh, 0x0f ^ 0x0a
mengembalikan 0x05.

JavaScript juga menyediakan satu set bitwise untuk operasi shift operand1
terhadap jumlah yang ditentukan di operand2. Operand ini adalah

28
 • Shift left (<<), akan mengeser bit ke kiri dengan jumlah tertentu. Bit yang
melewati batas kiri akan diabaikan, dan suatu bit nol akan digeser dari kanan.
Sebagai contoh, 0x0f << 2 mengembalikan 0x3c.
• Sign propagating shift right (>>) mempertahankan bit tanda dari nilai ketika
melakukan geser ke kanan sesuai dengan jumlah yang ditentukan. Bit yang
tergeser melewati bata kanan akan diabaikan, kecuali bit tanda, bit nol akan
digeser dari kiri.. Sebagai contoh, 10 >> 2 mengembalikan 2 dan -10 >> 2
mengembalikan -2.
• Zero-fill right shift (>>>) sama seperti >>, cuma tidak mempertahankan bit
tanda ketika dilakukan pergeseran sesuai dengan jumlah yang ditentukan.

d. Logical Operator

Operator logika membutuhkan operand dengan nilai Boolean (true atau false) dan
mereka akan mengembalikan suatu nilai logika. Operator logika adalah sebagai
berikut :

• Logical AND (&&)

• Logical OR (||)
• Logical NOT (!)

Operator logika NOT adalah suatu unary operator yang mempertahankan nilai
ekspresi.

e. Comparison Operator

Operator perbandingan diterapkan pada perbandingan pada data numerik dan data
string serta tidak dapat dilakukan pada nilai Boolean. Masing-masing operand harus
memiliki tipe yang sama: nemerik dibandingkan dengan numerik atau string dengan
string. Hasil dari perbandingan adalah sautu nilai Boolean. Operator perbandingan
adalah:

• Equal (==)
• Not equal (!=)
• Greater than (>)
• Greater than or equal to (>=)
• Less than (<)
• Less than or equal to (<=)

JavaScript juga mendukung ekspresi secara kondisi (conditional expression) yang

mana berbentuk.

(kondisi) ? nilai_benar : nilai_salah

29
Jika kondisi adalah benar, ekspresi memiliki dari true_value. Sebaliknya memiliki
nilai dari false_value. Seperti saudaranya yang berbasis bahasa C, ekpresi kondisi
adalah ekspresi standard dan dapat digunakan dimana saja, dan dapat dilihat sebagai
berikut :

status_baterai = (voltase > 1.3) ? "baik" : "buruk"

f . String Operator

Operator string (+) mengabung dua nilai string dan mengembalikan satu string
dimana merupakan hasil gabungan dari keduanya. Sebagai contoh :

"Java" + "Script"
Menghasilkan :
"JavaScript"

Operator shorthand += mengabung string kiri dengan string dikanan operand dan
memberikan nilai baru pada operand disebelah kiri.

g. Urutan operasi

Dalam ekspresi yang kompleks dimana melibatkan lebih dari satu

operator, urutan operasi dari operator menentukan nilai hasil evaluasi. Dengan
menggunakan tanda kurung, programmer dapat mengatur aturan tersebut. Table .4
adalah urutan prioritas operasi dari yang paling rendah sampai yang paling tinggi.
Table 4. Prioritas urutan operasi dari prioritas rendah sampai tinggi.

Keterangan Operator
Assignment = += -= *= /= %= <<= >>= >>>= &= ^= |=

Conditional ?:

Logical OR ||

Logical AND &&

Bitwise OR |

Bitwise XOR ^

Bitwise AND &

Equality == !=

Relational < <= > >=

Bitwise shift << >> >>>

Addition/subtraction +-

Multiply/divide */%

Negation/increment ! ~ - ++ -

Call, member () []

30
N. Struktur Kendali dan Fungsi
Untuk membuat suatu halaman yang dinamis dan interaktif, perancang halaman
Web membutuhkan perintah-perintah yang dapat mengatur aliran dari informasi.
Berdasarkan hasil komputasi yang telah dilakukan, JavaScript akan membuat
keputusan jalur mana yang akan dieksekusi. Kita akan membahas tentang perintah
kondisi dan loop dalam JavaScript.Walaupun semua kode harus ditulis dalam
penanganan event, tetapi hal ini adalah praktek pemrograman yang kurang baik.
Sebagai pengantinya, gunakan fungsi, kode akan menjadi lebih modular dan dapat
digunakan kembali (reusable).

Perintah kondisi

Sebagai tambahan terhadap ekspresi kondisi yang telah dijelaskan bagian

sebelumnya. JavaScript memiliki suatu perintah kondisi if. Tata cara penulisan dari
perintah kondisi tersebut adalah sebagai berikut:

if (kondisi1) {

pernyataan1 }

[else {

pernyataan2}]

kondisi adalah ekspresi JavaScript yang mana hasil evaluasinya memiliki nilai
Boolean true atau false. contoh pemakaian statement if:

if (n>3) {

status = true

if (j != n) j = 0 }

else j = n

Perhatian
Bagi programmer C harus berhati-hati dengan evaluasi kondisi pada
JavaScript. Suatu kondisi numerik yang mengasilkan nol adalah
tidak sama dengan suatu Boolean true pada JavaScript, dan
sebaliknya suatu nilai bukan nol tidak sema dengan Boolean false.
Pada JavaScript hasil dari suatu kondisi harus data type Boolean.

31