Javascript
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
1. 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
Script ditulis dalam atribut HREF dengan cara menuliskan javascript pada
<TAG HREF="javascript:perintah">
Contoh:
B. Data
1. numerik
2. string
Data berupa satu atau lebih karakter, diapit dengan tanda petik tunggal atau
3. boolean
5. objek
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
Penulisan:
var nama_var
Contoh:
var nilai
var nilai = 75
var nama, kelas, nomer
D. Konstanta
Penulisan:
Contoh:
CONST bonus = 10
E. Operator
1. Pengertian
2. Jenis-jenis Operator
nama_var =nilai;
halaman 3
Contoh:
pajak = 0.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
var a += b + c a = a + (b +
+=operasi 5)
*= var *= var a *= b a = a *b
var a *= b - a = a * (b - c)
*=operasi c
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)
halaman 4
1 ++a
• Operator Logika
Hasil dari operasi logika adalah nilai true atau false.
Operator Fungsi Contoh
• 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
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
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)
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
Penulisan:
switch (ekspresi)
case ekspresi1:
perintah1
break
case ekspresi2:
perintah2
break
case ekspresi3:
perintah3
break
default:
perintah4
}
Keterangan:
Contoh:
halaman 9
switch (goldarah)
case “A”:
sifat = “perfeksionis”
break
case “B”:
break
case “AB”:
sifat = “eksentrik”
break
case “O”:
sifat = “humoris”
break
default:
Perintah perulangan dimanfaatkan untuk melakukan perulangan pada satu perintah atau beberapa
perintah.
A. Perintah FOR
Penulisan:
perintah
perintah
Keterangan:
halaman 10
- ekspresi2 dijalankan setiap kali setelah perulangan dikerjakan.
Contoh:
document.write(“Angka “ + i + “<br>”)
Angka 0
Angka 1
Angka 2
B. Perintah FOR IN
Perintah FOR IN digunakan untuk mengulang penelusuran nama-nama properti pada sebuah
objek.
Penulisan:
perintah
perintah
Keterangan:
Contoh:
var x
for (x in tamu)
document.write(x + ”<br>”)
halaman 11
nama
namapanggil
umur
C. Perintah WHILE
terhitung. Penulisan:
while (kondisi)
perintah
perintah
Keterangan:
angka = 16
while (angka>1)
angka /= 2
document.write(angka+” “)
8421
D. Perintah DO WHILE
terhitung. Penulisan:
do
perintah
perintah
halaman 12
}
while (kondisi)
Keterangan:
angka = 16
do
angka /= 2
document.write(angka+” “)
while (angka>1)
8421
Array adalah data sejenis yang disimpan dalam sebuah variabel. Masing-masing nilai dapat
diakses menggunakan index. Index dimulai dari 0.
Penulisan:
Contoh:
buah = [“mangga”,”jeruk”,”kelapa”,”durian”]
sayur=[,,12,8]
Penerapan Array
halaman 13
Buah ke 0: mangga
Buah ke 1: jeruk
Buah ke 2: kelapa
Buah ke 3: durian
nilai = [70,60,80,85,75)
max = nilai[0]
if (nilai[x] >max)
max = nilai[x]
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:
Contoh:
buah = {nama:“mangga”,rasa:”manis”,harga:1000}
orang =
depan:”Adi”,
belakang:”Ray”,
umur:30,
namalengkap:
function()
halaman 14
{
2. Mengakses Objek
Penulisan:
namaobjek.properti
atau
namaobjek[properti]
Contoh:
buah.nama
buah.harga
orang.depan
orang.namalengkap()
buah[harga]
buah = {nama:“mangga”,rasa:”manis”,harga:1000};
for (x in buah)
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).
halaman 15
Javascript menyediakan beberapa jenis fungsi siap pakai, di antaranya
adalah: 1. Math.pow()
tertentu. Penulisan:
Math.pow(bilanganyangdipangkatkan,
bilanganpemangkat) Contoh:
x = Math.pow(5, 2)
document.write(x)
25
2. Math.random()
Penulisan:
Math.random()
Contoh:
x = Math.random() * 20
3. Math.floor()
Penulisan:
Math.floor(nilai)
Contoh:
x = Math.floor(5.7623)
document.write(”Pembulatannya menjadi ”, x)
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)
Pembulatannya menjadi 6
5. parseInt
Penulisan:
parseInt(teks)
Contoh:
x = parseInt(”10.76”);
document.write(x)
10
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
Contoh:
var a = 100
var b=120
function tambah()
{
var c=15
return a+b+c
halaman 17
}
2. Membuat fungsi
Penulisan:
perintah
perintah
return nilai/variabel/operasi
}
Keterangan:
Contoh :
function jumlah(x, y)
{
hasil = x+y
return hasil
}
3. Menggunakan fungsi
Penulisan:
Contoh :
function kali(x, y)
return x*y
hasil=kali(5,3)
document.write(hasil)
halaman 18
15
- dan lain-lain.
Jenis-jenis event:
1. Mouse Event
No Nama Event Dilaksanakan saat mouse …
1 onclick diklik
4 onmousedown ditekan/ditahan
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 …
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:
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()
keteranganmu)
halaman 20
</script>
<pre>
<form name=formku>
</form>
</pre>
B. Elemen Radio
perintah:
document.namaform.namaelemen[indeks].
Contoh:
<script>
function baca()
if (document.formku.jenis[0].checked)
jenismu = document.formku.jenis[0].value
else
jenismu = document.formku.jenis[1].value
}
</script>
halaman 21
<pre>
<form name=formku>
</form>
</pre>
C. Elemen Checkbox
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
}
</script>
<pre>
<form name=formku>
value=Menari>Menari
halaman 22
<input type=button value=OK onclick=baca()>
</form>
</pre>
document.namaform.namaelemen.options[indeksterpili
document.namaform.namaelemen.selectedIndex
Contoh:
<script>
function baca()
pilihan = document.formku.hobi.selectedIndex
hobimu =
document.formku.hobi.options[pilihan].value
</script>
<pre>
<form name=formku>
<option value=Menyanyi>Menyanyi
<option value=Menari>Menari
<option value=Berenang>Berenang
</select>
</form>
</pre>
A. Membuka Window
halaman 23
Untuk membuka window digunakan perintah open.
Penulisan:
Keterangan:
Konfigurasi Kegunaan Nilai
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”)
window.location.reload. Penulisan:
window.location.reload()
Contoh:
window.location.reload()
Penulisan:
window.location = url
Contoh:
Penulisan:
window.close()
Contoh:
Penulisan:
window.print()
Contoh:
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:
<script>
function animasi()
halaman 25
}
function detik2()
function detik4()
</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:
Contoh:
<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()">
</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