JAVASCRIPT

Javascript adalah bahasa pemrograman berbentuk script yang disisipkan dalam dokumen HTML
untuk membuat web dinamis. Berbeda dengan PHP, Javascript dijalankan langsung di web
browser tanpa harus terhubung ke server.

Javascript dituliskan dalam pengolah kata sederhana hingga aplikasi web generator, misalnya
Notepad, Notepad++, MS Word atau Dream Weaver. Untuk menjalankan Javascript hanya
digunakan web browser.

A. Penulisan Javascript

Terdapat 4 cara untuk menuliskan Javascript yaitu:

1. tag SCRIPT

Javascript ditulis dalam tag SCRIPT.

Penulisan:

<SCRIPT>

perintah

perintah

</SCRIPT>

Contoh:

<SCRIPT>

alert(“Hallo”)

</SCRIPT>

Catatan:

a. Tanda titik koma (;) digunakan untuk memisahkan beberapa perintah yang
dituliskan dalam satu baris.
b. Javascript dapat dituliskan dalam file terpisah yang berekstensi js, file tersebut dapat
diikutsertakan dengan menambahkan atribut SRC pada tag SCRIPT.
Penulisan:

<SCRIPT SRC=”nama_file.js”></SCRIPT>

Contoh:
 <SCRIPT SRC=”kodejava.js”></SCRIPT>

2. Event Handler

yang akan dijalankan saat pengguna melakukan aksi tertentu seperti melakukan klik
pada tombol, memindahkan kursor mouse di atas gambar dan lain lain.

Penulisan:

<tagHTML namaevent="perintah">
halaman 1
Contoh:

<BUTTON onClick="alert('Hallo')">Click me

3. URL dalam atribut HREF

Script ditulis dalam atribut HREF dengan cara menuliskan javascript pada

bagian URL. Penulisan:

<TAG HREF="javascript:perintah">

Contoh:

<A HREF="javascript:alert('Hallo')">Click me</A>

B. Data

Tipe data pada Javascript ada 5 macam yaitu:

1. numerik

Data berupa angka.

Contoh: 80, -140, 92.75

2. string

Data berupa satu atau lebih karakter, diapit dengan tanda petik tunggal atau

ganda. Contoh: “Dia”, ‘Suka kamu’ (Kata/kalimat)

3. boolean

Data berupa nilai true atau false.

 4. array

Data berupa satu atau kumpulan numerik atau string.

Contoh: ["Saab", "Volvo", "BMW"]

[15, 20, 30, 5]

5. objek

Data berupa kumpulan properti yang didefinisikan sendiri.

Contoh: {firstName:"John", lastName:"Doe", age:50}

{merek:”KIA”, cc:1000, warna:”merah”, tahun:2000}

C. Variabel

1. Pengertian

Variabel adalah suatu tempat yang digunakan untuk menyimpan nilai dimana nilai
yang ada di dalamnya bisa diubah sewaktu-waktu.

halaman 2
2. Syarat penamaan variabel

a. Terdiri dari angka, huruf dan garis bawah

b. Karakter pertama harus berupa huruf atau garis bawah
c. Ditulis tanpa spasi
d. Jumlah karakter bebas
e. Case sensitive (huruf besar dan huruf kecil dibedakan)
f. Variabel harus dideklarasikan terlebih dahulu.
3. Deklarasi Variabel

Penulisan:

var nama_var

var nama_var = nilai

var nama_var1, nama_var2, nama_varn

Contoh:

var nilai

var nilai = 75
 var nama, kelas, nomer

var mobil=["Saab", "Volvo", "BMW"]

var guest={firstName:"John", lastName:"Doe", age:50}

D. Konstanta

Konstanta menyatakan nilai yang tetap di dalam program. Konstanta dideklarasikan

menggunakan CONST.

Penulisan:

CONST nama_konstanta = nilai

Contoh:

CONST phi = 3.14

CONST bonus = 10

E. Operator

1. Pengertian

Operator adalah tanda atau simbol suatu operasi.

2. Jenis-jenis Operator

• Operator Pemberian Nilai

Penulisan:

nama_var =nilai;

halaman 3
Contoh:

pajak = 0.1

alamat = “Jalan Borobudur 1”

• Operator Matematika
 Operator Fungsi Contoh

+ Penambahan a+b

a+11

- Pengurangan a-b

20-b

* Perkalian a*b

4*a

/ Pembagian a/b

b/7

% Modulus a%b

a%5

Operator matematika dapat dikombinasi dengan operator pemberian nilai.

Operator Penulisan Contoh Persamaan

+= var += var a += b a=a+b

var a += b + c a = a + (b +
+=operasi 5)

-= var -= var a -= b a=a-b

var -=operasi a -=b + 5 a = a – (b +

5)

*= var *= var a *= b a = a *b

var a *= b - a = a * (b - c)
*=operasi c

/= var /= var a /= b a=a/b

var /= a /= b * a = a / (b * 3)
operasi 3
 %= var %= var a %= b a=a%b

var %= a %= 3 * a = a % (3
operasi b * b)

• Operator Prefiks dan Postfiks

Operator Fungsi Contoh

++ Menambah nilai variabel dengan a++

halaman 4
1 ++a

-- Mengurangi nilai variabel a--

dengan 1
--a

• Operator Perbandingan (Relasional)

Hasil dari operasi perbandingan adalah nilai true atau false.
Operator Fungsi Contoh

== Nilai sama dengan a == b

!= Nilai tidak sama dengan a != b

=== Nilai sama dan tipe a === b

data sama

!== Nilai tidak sama atau a !== b

tipe data tidak sama

<> Tidak sama dengan a <> b

< Lebih kecil dari a<b

> Lebih besar dari a>b

<= Lebih kecil/sama dengan a <= b

 >= Lebih besar/sama dengan a >= b

• Operator Logika
Hasil dari operasi logika adalah nilai true atau false.
Operator Fungsi Contoh

! menghasilkan nilai kebalikan !a

&& menghasilkan nilai true a && b

bila semua operan
bernilai true

|| menghasilkan nilai true bila a || b

salah satu operan bernilai
false

• Operator String
Operator string hanya melibatkan data string.
Operator Operasi Contoh

+ Penggabungan a+b

+= Penggabungan dengan a += b
pemberian nilai

3. Hirarki Operator

halaman 5
Tingkat Operator
 Tertinggi () {}

++ --

*/%

+-

<><= >=

== === !=

&&

||

Terendah = += -= *= /= .=

F. Perintah Masukan

Terdapat 2 cara untuk memasukkan data yaitu menggunakan fungsi prompt dan formulir
dalam HTML.

1. Prompt
Digunakan untuk menampilkan kotak masukan.
Penulisan:
prompt(teks, nilaidefault)
Contoh :
umur = prompt(”Masukkan umur”)
umur = prompt(”Masukkan umur”, 17)
nama = prompt(”Siapa nama Anda?”)
2. Confirm
Digunakan untuk menampilkan kotak pertanyaan ya atau tidak.
Penulisan:
confirm(teks)
Contoh :
pilihan = confirm(”Anda berumur 17 tahun ke atas?”)
pil = confirm(”Asal dari Malang?”)
3. Formulir
Masukan data dilakukan menggunakan elemen-elemen dalam formulir HTML.
Pembahasan lebih lanjut pada bab VIII Formulir.
G. Perintah Keluaran

Terdapat 4 macam perintah keluaran yaitu:

1. alert atau window.alert

Digunakan untuk menampilkan data dalam kotak pesan.

Penulisan:
alert(nilai/variabel/operasi)

halaman 6
window.alert(nilai/variabel/operasi)
Contoh :
alert(”Hallo”)
window.alert(500)
window.alert(”Selamat datang”)
window.alert(a)
window.alert(a+b)

2. document.write

Digunakan untuk menampilkan data di halaman website.

Penulisan:
document.write(nilai/variabel/operasi)
Contoh :
document.write(500)
document.write(”Selamat datang”)
document.write(a)
document.write(”Nilai Ulangan : ” + nilai)

3. document.getElementById(id)

Digunakan untuk menampilkan data pada elemen HTML.

Penulisan:
document.getElementById("nama id").innerHTML = nilai/variabel/operasi
Contoh :
<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6
</script>

4. console.log()
 Digunakan untuk menampilkan data pada console. Dalam console, kita dapat menguji
kebenaran perintah atau menemukan kesalahan dari perintah. Untuk menjalankan console
digunakan tombol F12.

Penulisan:
console.log(nilai/variabel/operasi)
Contoh :
console.log(”Selamat Datang”)
console.log(umur)
console.log(5 + 6)

Perintah kendali dimanfaatkan untuk mengalihkan eksekusi perintah sesuai kondisi yang
terpenuhi.

A. Perintah IF

Perintah IF digunakan untuk memilih salah satu operasi yang akan dilaksanakan
berdasarkan syarat atau kondisi tertentu.

halaman 7
Penulisan

• if (kondisi)
{
perintah
}
Keterangan:
perintah akan dijalankan bila kondisi terpenuhi atau
bernilai true. Contoh:
if (jam < 12)
{
salam = "Selamat Pagi"
}
• if (kondisi)
{
perintah1
}
else
{
perintah2
}
 Keterangan:
perintah1 akan dijalankan bila kondisi terpenuhi atau bernilai
true, sebaliknya perintah2 akan dijalankan bila kondisi tidak
terpenuhi atau bernilai false.

Contoh:
if (jam < 12)
{
salam = "Selamat Pagi"
}
else
{
salam = “Selamat siang”
}
• if (kondisi1)
{
perintah1
}
else if (kondisi2)
{
perintah2
}
else if (kondisi3)
{
perintah3
}
else
{
perintah4
}
Keterangan:
perintah1 akan dijalankan bila kondisi1 terpenuhi atau
bernilai true, perintah2 akan dijalankan bila kondisi2
terpenuhi atau bernilai true, perintah 3 akan dijalankan bila
kondisi3 terpenuhi atau bernilai true, perintah 4 akan
dijalankan bila semua kondisi tidak terpenuhi
halaman 8
atau bernilai false.
Contoh:
if (jam < 12)
{
salam = "Selamat Pagi"
 }
else if (jam < 18)
{
salam = “Selamat siang”
}
else if (jam < 20)
{
salam = “Selamat petang”
}
else
{
salam = “Selamat malam”
}

B. Perintah SWITCH

Perintah SWITCH digunakan untuk menyederhanakan perintah IF – ELSEIF dengan

memilih sejumlah alternatif.

Penulisan:

switch (ekspresi)

case ekspresi1:

perintah1

break

case ekspresi2:

perintah2

break

case ekspresi3:

perintah3

break

default:

perintah4

}
 Keterangan:

- ekspresi berupa nilai.

- perintah break digunakan untuk keluar dari perintah SWITCH.

Contoh:
halaman 9
switch (goldarah)

case “A”:

sifat = “perfeksionis”

break

case “B”:

sifat = “acuh tak acuh”

break

case “AB”:

sifat = “eksentrik”

break

case “O”:

sifat = “humoris”

break

default:

sifat = “tidak jelas”

Perintah perulangan dimanfaatkan untuk melakukan perulangan pada satu perintah atau beberapa
perintah.
A. Perintah FOR

Perintah FOR digunakan untuk melakukan perulangan terhitung.

Penulisan:

for (ekspresi1; kondisi; ekspresi2)

perintah

perintah

Keterangan:

- ekspresi1 dijalankan sebelum perulangan dimulai

- perulangan akan dijalankan bila kondisi terpenuhi atau bernilai true

halaman 10
- ekspresi2 dijalankan setiap kali setelah perulangan dikerjakan.

Contoh:

for (i = 0; i <3; i++)

document.write(“Angka “ + i + “<br>”)

Hasilnya adalah tampilan:

Angka 0

Angka 1

Angka 2

B. Perintah FOR IN

Perintah FOR IN digunakan untuk mengulang penelusuran nama-nama properti pada sebuah
objek.
 Penulisan:

for (namavar in namaobjek)

perintah

perintah

Keterangan:

- namavar adalah nama variabel

- namaobjek adalah nama variabel bertipe objek.

Contoh:

var tamu= {nama:”Anita", namapanggil:"An", umur:12}

var text = ""

var x

for (x in tamu)

document.write(x + ”<br>”)

Hasilnya adalah tampilan:

halaman 11
nama

namapanggil

umur

C. Perintah WHILE

Perintah WHILE digunakan untuk melakukan perulangan terhitung atau tak

terhitung. Penulisan:
 while (kondisi)

perintah

perintah

Keterangan:

- perulangan akan dijalankan selama kondisi terpenuhi atau

bernilai true - pemeriksaan kondisi diletakkan di awal perulangan.
Contoh:

angka = 16

while (angka>1)

angka /= 2

document.write(angka+” “)

Hasilnya adalah tampilan:

8421

D. Perintah DO WHILE

Perintah DO WHILE digunakan untuk melakukan perulangan terhitung atau tak

terhitung. Penulisan:

do

perintah

perintah

halaman 12
 }

while (kondisi)

Keterangan:

- perulangan akan dijalankan selama kondisi terpenuhi atau bernilai true

- perulangan dijalankan minimal sekali karena pemeriksaan kondisi diletakkan di akhir
perulangan.
Contoh:

angka = 16

do

angka /= 2

document.write(angka+” “)

while (angka>1)

Hasilnya adalah tampilan:

8421

Array adalah data sejenis yang disimpan dalam sebuah variabel. Masing-masing nilai dapat
diakses menggunakan index. Index dimulai dari 0.

Penulisan:

var namaarray = [item1, item2, ...]

Contoh:

buah = [“mangga”,”jeruk”,”kelapa”,”durian”]

sayur=[,,12,8]

Penerapan Array

1. Menampilkan data pada variabel array

 buah= [“mangga”,”jeruk”,”kelapa”,”durian”]

for (x=0; x<=3; x++)

document.write( “Buah ke” + x “:” + buah[x] +”<br>”)

Hasilnya adalah tampilan:

halaman 13
Buah ke 0: mangga

Buah ke 1: jeruk

Buah ke 2: kelapa

Buah ke 3: durian

2. Mencari nilai terbesar pada variabel array

nilai = [70,60,80,85,75)

max = nilai[0]

for (x=1; x<=5; x++)

if (nilai[x] >max)

max = nilai[x]

document.write(“Nilai terbesar : “ + max +”<br>”)

Hasilnya adalah tampilan:

Nilai terbesar : 85
Objek adalah kumpulan properti yang didefinisikan sendiri dan disimpan dalam sebuah
variabel. Masing-masing nilai yang tersimpan dalam objek diakses melalui propertinya.

1. Membuat Objek

Penulisan:

var namaobjek = {properti1:nilai1, properti2:nilai2, ..., propertin:nilain}

Contoh:

buah = {nama:“mangga”,rasa:”manis”,harga:1000}

orang =

depan:”Adi”,

belakang:”Ray”,

umur:30,

namalengkap:

function()

halaman 14
{

return this.depan + " " + this.belakang

2. Mengakses Objek

Penulisan:

namaobjek.properti

atau

namaobjek[properti]

Contoh:

buah.nama
 buah.harga

orang.depan

orang.namalengkap()

buah[harga]

3. Menampilkan data pada variabel objek

buah = {nama:“mangga”,rasa:”manis”,harga:1000};

for (x in buah)

document.write( x + “:” + buah[x] +”<br>”);

Hasilnya adalah tampilan:

nama:mangga

rasa:manis

harga:1000

Fungsi adalah sekumpulan perintah untuk keperluan proses program. Fungsi dapat dimanfaatkan
berkali-kali untuk nilai yang berbeda-beda. Terdapat 2 jenis fungsi yaitu fungsi siap pakai dan
fungsi yang diciptakan sendiri (user defined).

A. Fungsi Siap Pakai

halaman 15
Javascript menyediakan beberapa jenis fungsi siap pakai, di antaranya

adalah: 1. Math.pow()

Digunakan untuk menghitung hasil pangkat bilangan

tertentu. Penulisan:
 Math.pow(bilanganyangdipangkatkan,

bilanganpemangkat) Contoh:

x = Math.pow(5, 2)

document.write(x)

Hasilnya adalah tampilan:

25

2. Math.random()

Digunakan untuk mendapatkan nilai acak antara 0 dan 1.

Penulisan:

Math.random()

Contoh:

x = Math.random() * 20

document.write(”Nilai antara 0 dan 20 adalah ”, x)

Hasilnya adalah tampilan:

Nilai antara 0 dan 20 adalah 10.18056890888484

3. Math.floor()

Digunakan untuk membulatkan angka ke bawah

Penulisan:

Math.floor(nilai)

Contoh:

x = Math.floor(5.7623)

document.write(”Pembulatannya menjadi ”, x)

Hasilnya adalah tampilan:

Pembulatannya menjadi 5

4. Math.ceil()
 Digunakan untuk membulatkan angka ke atas

Penulisan:

Math.ceil(nilai)
halaman 16
Contoh:

x = Math.ceil(5.09999)

document.write(”Pembulatannya menjadi ”, x)

Hasilnya adalah tampilan:

Pembulatannya menjadi 6

5. parseInt

Digunakan untuk mengubah string menjadi integer.

Penulisan:

parseInt(teks)

Contoh:

x = parseInt(”10.76”);

document.write(x)

Hasilnya adalah tampilan:

10

B. Fungsi User Defined

1. Jenis variabel

a. Global

Adalah variabel yang dideklarasikan di luar fungsi, sehingga dapat diakses oleh
semua perintah dan fungsi.

Contoh:
var a = 100
var b=120
function tambah()
 {
return a+b
}

b. Lokal

Adalah variabel yang dideklarasikan di dalam fungsi, sehingga hanya dapat

diakses oleh semua perintah dalam fungsi.

Contoh:
var a = 100
var b=120
function tambah()
{
var c=15
return a+b+c

halaman 17
}

2. Membuat fungsi

Penulisan:

function namafungsi (argumen1, argumen2, …, argumen-n)

perintah

perintah

return nilai/variabel/operasi

}
Keterangan:

- argumen1, argumen2, …, argumen-n adalah nama variabel yang akan mendapat

nilai - return akan menghasilkan nilai pada fungsi.

Contoh :

function jumlah(x, y)
 {
hasil = x+y
return hasil
}

3. Menggunakan fungsi

Penulisan:

namavariabel= namafungsi(nilai1, nilai2, …, nilain)

Contoh :

function kali(x, y)

return x*y

hasil=kali(5,3)

document.write(hasil)

Hasilnya adalah tampilan:

halaman 18
15

Events adalah peristiwa yang terjadi pada elemen HTML, misalnya:

- sebuah halaman web selesai dimuat

- sebuah kotak teks diubah nilainya

- sebuah tombol diklik

- dan lain-lain.

Jenis-jenis event:
1. Mouse Event
No Nama Event Dilaksanakan saat mouse …

1 onclick diklik

2 oncontextmenu diklik kanan

3 ondblclick diklik ganda

4 onmousedown ditekan/ditahan

5 onmouseenter berada di atas elemen

6 onmouseleave meninggalkan elemen

7 onmousemove bergerak/berubah posisi

8 onmouseover berada di atas elemen atau salah

satu bagian elemen

9 onmouseout meninggalkan elemen atau salah

satu bagian elemen

10 onmouseup dilepas

2. Keyboard Event
No Nama Event Dilaksanakan saat tombol …

1 onkeydown ditekan/ditahan

2 onkeypress ditekan

3 onkeyup dilepas

3. Frame/Object Event
No Nama Event Dilaksanakan saat …

1 onload objek dimuat

2 onresize ukuran tampilan dokumen diubah

3 onscroll digunakan tombol scrollbar

4 onunload halaman ditutup, dalam tag

<body>
4. Form Event
No Nama Event Dilaksanakan saat …

1 onblur elemen tidak menjadi fokus

2 onchange nilai elemen berubah

3 onfocus elemen menjadi fokus

4 oninput elemen menerima nilai

5 oninvalid nilai elemen tidak valid

6 onreset tombol reset dipilih

7 onsubmit tombol submit dipilih

Event Handler adalah perintah untuk merespon event yang terjadi, caranya dengan
menambahkan nama event pada elemen tersebut.
halaman 19
Penulisan:

<tagHTML namaevent='perintah'>

atau

<tagHTML namaevent=”perintah”>

Contoh:

<body onload=’Javascript:alert(“Selamat datang “)’>

atau

<script>

function tampil()

alert(“Selamat datang”);

</script>
 <body onload=”tampil()”>

Data dapat diisikan melalui elemen-elemen formulir dalam tag FORM. Masukan data tersebut
ditangani atau diproses dengan cara berbeda-beda sesuai dengan elemennya.

A. Elemen Teks

Data pada elemen teks, password dan textarea diakses dengan perintah:

document.namaform.namaelemen.value

Contoh:

<script>

function baca()

var namamu = document.formku.nama.value

var passwordmu = document.formku.password.value

var keteranganmu = document.formku.keterangan.value

alert("Data Anda : " + namamu + " / " + passwordmu + " / " +

keteranganmu)

halaman 20
</script>

<pre>

<form name=formku>

Nama <input type=text name=nama>

Password <input type=password

name=password> Keterangan <textarea

 name=keterangan></textarea> <input

type=button value=OK onclick=baca()>

</form>

</pre>

B. Elemen Radio

Data pada elemen radio diakses dengan

perintah:

document.namaform.namaelemen[indeks].

checked radio pertama memiliki indeks 0

radio kedua memiliki indeks 1 dan seterusnya

Contoh:

<script>

function baca()

if (document.formku.jenis[0].checked)

jenismu = document.formku.jenis[0].value

else

jenismu = document.formku.jenis[1].value

alert("Jenis Kelamin Anda : " + jenismu)

}
 </script>

halaman 21
<pre>

<form name=formku>

Jenis Kelamin <input type=radio name=jenis value=Pria>Pria

<input type=radio name=jenis value=Wanita>Wanita <input

type=button value=OK onclick=baca()>

</form>

</pre>

C. Elemen Checkbox

Data pada elemen checkbox diakses dengan perintah:

document.namaform.namaelemen.checked

Contoh:

<script>

function baca()

hobimu = ""

if (document.formku.hobi1.checked)

hobimu += document.formku.hobi1.value

if (document.formku.hobi2.checked)

hobimu += document.formku.hobi2.value
 }

alert("Hobi Anda : " + hobimu)

</script>

<pre>

<form name=formku>

Hobi <input type=checkbox name=hobi1

value=Menyanyi>Menyanyi <input type=checkbox name=hobi2

value=Menari>Menari

halaman 22
<input type=button value=OK onclick=baca()>

</form>

</pre>

D. Elemen Select Option

Data pada elemen checkbox diakses dengan perintah:

document.namaform.namaelemen.options[indeksterpili

h].value indeksterpilih didapatkan dari perintah:

document.namaform.namaelemen.selectedIndex

Contoh:

<script>

function baca()

pilihan = document.formku.hobi.selectedIndex

hobimu =
 document.formku.hobi.options[pilihan].value

alert("Hobi Anda : " + hobimu)

</script>

<pre>

<form name=formku>

Hobi <select name=hobi>

<option value=Menyanyi>Menyanyi

<option value=Menari>Menari

<option value=Berenang>Berenang

</select>

<input type=button value=OK onclick=baca()>

</form>

</pre>

Jenis-jenis penanganan window

A. Membuka Window
halaman 23
Untuk membuka window digunakan perintah open.

Penulisan:

window.open(url, namawindow, konfigurasi)

Keterangan:
Konfigurasi Kegunaan Nilai

Width Mengatur lebar ukuran dalam

window pixel
 Height Mengatur tinggi ukuran dalam
window pixel

Toolbar Menampilkan 1 atau 0

toolbar browser

Menubar Menampilkan 1 atau 0

menubar browser

Scrollbars Menampilkan 1 atau 0

scrollbar pada
window

Resizeabl Mengatur 1 atau 0

e window dapat
diubah
ukurannya atau
tidak

Contoh:

window.open(“http://www.google.com”,”windowku”,

”width=300,height=200”)

window.open(“http://www.yahoo.com”,”yahoo”,

”width=400,height=300,toolbar=1”)

B. Memperbarui Tampilan Halaman Window

Untuk memperbarui tampilan halaman window digunakan perintah

window.location.reload. Penulisan:

window.location.reload()

Contoh:

window.location.reload()

C. Membuka Halaman Baru

 Untuk membuka halaman baru digunakan perintah window.location.

Penulisan:

window.location = url

Contoh:

<input type=button onclick="window.location = 'http://www.google.com'" value=Buka>

halaman 24
D. Menutup Window

Untuk menutup window digunakan perintah window.close

Penulisan:

window.close()

Contoh:

<input type=button onclick=”window.close()” value=Tutup>

E. Mencetak Tampilan Halaman Window

Untuk mencetak tampilan halaman window digunakan perintah window.print

Penulisan:

window.print()

Contoh:

<input type=button onclick=”window.print()” value=Cetak>

Untuk mengatur jalannya animasi secara otomatis diperlukan timer. Terdapat 3 perintah dasar
untuk mengatur timer.

A. Membuat Timer

Perintah yang digunakan untuk membuat timer adalah setTimeOut. Perintah ini akan
menjalankan suatu fungsi setelah durasi waktu tertentu (dalam satuan milidetik).

Penulisan:
 variabeltimer = setTimeOut(fungsi, durasi)

Contoh:

<input type=button onclick="animasi()" value=Start>

<p id="demo">Klik tombol Start untuk memulai</p>

<script>

function animasi()

time1 = setTimeout(detik2, 2000)

time2 = setTimeout(detik4, 4000)

halaman 25
}

function detik2()

document.getElementById("demo").innerHTML = "2 detik";

function detik4()

document.getElementById("demo").innerHTML = "4 detik";

</script>

Hasilnya adalah:

Saat pengguna menekan tombol Start, fungsi animasi akan dipanggil. Dalam hitungan
detik ke-2, tampil teks “2 detik” dan dalam hitungan detik ke-4, tampil teks “4 detik”.
B. Membuat Timer Berulang

Perintah yang digunakan untuk membuat timer berulang adalah setInterval. Perintah ini
akan menjalankan suatu fungsi setiap durasi waktu tertentu (dalam satuan milidetik).

Penulisan:

variabeltimer = setInterval(fungsi, durasi)

Contoh:

<input type=button onclick="animasi()" value=Start>

<p id="demo">Klik tombol Start untuk memulai</p>

<script>

function animasi() {

time1 = setInterval(detik1,1000)

function detik1()

document.getElementById("demo").innerHTML += "."

halaman 26
}

</script>

Hasilnya adalah:

Saat pengguna menekan tombol Start, fungsi animasi akan dipanggil tiap 1 detik sekali
dan menambahkan karakter titik di layar.

C. Menghapus Timer

Perintah yang digunakan untuk menghapus timer adalah clearInterval. Perintah ini akan
menghapus pemanggilan fungsi yang dipasang menggunakan fungsi setTimeOut atau
setInterval.

Penulisan:

clearTimeOut(variabeltimer)

Contoh:

<body onload="animasi()">

<img src=1.jpg width=600 height=400 id=gbr>

</body>

<script>

var x=1

timer = setInterval("berubah()",1000)

function berubah()

if(x<5)

x++

document.getElementById("gbr").src = x+".jpg"

else

clearInterval(timer)

halaman 27
</script>
halaman 28