Dasar Javascript PDF
Dasar Javascript PDF
selanjutnya
browser
akan
menjalankan
modul
pendukung
untuk memprosesnya. Sehingga untuk Javascript, pada tag <script> perlulah ditambahkan
Script dapat diletakkan di tag <body> dan atau di tag <head> pada bagian halaman HTML.
Contoh 1
<script language=JavaScript type=text/javascript>
alert(Belajar Javascript);
</script>
Pengantar Javascript
Pengantar Javascript
Untuk memberikan komentar lebih dari satu baris, gunakan /* dan */. Jadi script yang terletak di antara /*
dan */ akan dianggap sebagai komentar. Berikut contoh memberi komentar yang lebih dari satu baris.
Contoh 7
/*
Kode berikut akan ditulis ke heading dan paragraph.
Dan akan menampilkan halaman homepage
*/
document.getElementById("myH1").innerHTML="Selamat datang di Homepage Saya";
document.getElementById("myP").innerHTML=" Ini adalah paragraph saya.";
Pengantar Javascript
Deklarasi Variabel
Dalam javascript, setiap kali akan menggunakan variabel, langkah pertama yang harus dilakukan
adalah mendeklarasikan keberadaan nama variabel. Hal ini perlu dilakukan karena dengan adanya deklarasi
nama variabel, computer akan menyediakan beberapa bagian memori untuk menyimpan nilai pada nama
variabel tersebut. Untuk mendeklarasikan variabel digunakan kata var. Dalam mendeklarasikan nama
variabel ada beberapa aturan yang harus diperhatikan, yaitu :
1. Nama variabel harus dimulai dengan huruf
2. Nama variabel juga dapat dimulai dengan $ dan _
3. Nama variabel adalah casesensitive (memperhatikan besar kecilnya huruf).
4. Jangan menggunakan Reserved Word atau kata tercadang sebagai nama variabel. Kata tercadang adalah
kata yang sudah built in dalam javascript yang sudah bermakna khusus. Penggunaan kata tercadang ini
akan mengakibatkan error.
Contoh 1
var namakota;
namakota=Malang;
Contoh 2
var namakota=Malang;
Contoh 3
var namakota=malang, propinsi=Jawa Timur, kode=3, x=6.23;
Pada contoh 1 di atas, dideklarasikan variabel namakota. Pada awal pendeklarasian, nilai dari variabel
namakota adalah null (kosong). Kemudian variabel namakota diberi nilai Malang. Untu memberikan nilai
pada suatu variabel digunakan tanda petik dua () apabila tipe datanya berupa string. Pada contoh 2
mendeklarasikan variabel namakota yang sekaligus memberi nilai pada variabel namakota. Contoh 3 di atas
Pengantar Javascript
mendeklarasikan beberapa variabel sekaligus. Untuk mendeklarasikan beberapa variabel digunakan tanda
koma (,) untuk memisahkan variabel satu dengan yang lainnya.
Tipe Data
Tipe data pada javascript meliputi : String, Integer, Float, Array, Object dan Booleans. Tipe data string
adalah data yang memuat karakter, misalnya Malang. String adalah sebarang text yang ada di dalam tanda
petik, baik petik ganda () maupun petik tunggal (). Tipe data integer dan float merupakan tipe data
numerik. Dalam mendeklarasikan tipe data object digunakan tanda kurung kurawal (, - ). Setiap property
dalam tipe data object dipisahkan dengan menggunakan tanda koma (, ). Tipe data Booleans terdiri dari dua
nilai, yaitu true atau false. Berikut beberapa contoh penggunaan tipe data pada javascript.
Contoh 4
var namakota=Malang;
var propinsi=Jawa Timur;
var x1=34;
var x2=3.14;
var y=123e4;
var x=true;
//
//
//
//
//
//
tipe
tipe
tipe
tipe
tipe
tipe
data
data
data
data
data
data
string
string
integer
float
integer
boolean
Contoh 5
//berikut beberapa cara mendeklarasikan Array
var mobil=new Array();
mobil[0]=Toyota;
mobil[1]=Daihatsu;
mobil[2]=Honda;
var bulan=new Array(Januari,Febuari,Maret,April);
var kampus=[UM,UNMUH,KANJURUHAN,UIN MAULANA MALIK,ITN];
Contoh 6
var klien={nama:Pamungkas, sex:Laki-Laki, id:5758};
Pada contoh di atas dideklarasikan beberapa variabel dengan berbagai tipe data. Pada contoh 4 di atas
dideklarasikan variabel dengan tipe data string, integer, float dan Boolean. Contoh 5 di atas
mendeklarasikan tipe data jenis array, dan beberapa cara variasi penulisannya. Pendeklarasian variabel
dengan tipe data object dicontohkan pada contoh 6.
Pengantar Javascript
Operator Aritmatika
Operator aritmatika digunakan untuk melakukan operasi aritmatika antara variabel dan atau nilai.
Misal diberikan y = 5, tabel berikut menjelaskan tentang operator aritmatika.
Operator
Deskripsi
Contoh
Nilai x
Nilai y
Penjumlahan
x=y+2
Pengurangan
x=y 2
Perkalian
x=y*2
10
Pembagian
x=y/2
2.5
x=y%2
Increment
x=++y
x=y++
x=--y
x=y--
++
--
Decrement
Contoh
Sama dengan
hasil
x=y
+=
x+=y
x=x+y
x=15
-=
x -=y
x=x y
x=5
*=
x*=y
x=x*y
x=50
/=
x/=y
x=x/y
x=2
%=
x%=y
x=x%y
x=0
Pengantar Javascript
x=5
Operator Pembanding
Operator pembanding digunakan dalam pernyataan logika untuk menentukan kesamaan atau
perbedaan diantara nilai-nilai. Diberikan nilai X = 5, tabel dibawah ini menjelaskan operator pembanding
Operator
==
===
Deskripsi
Sama dengan
Sama persis dengan (nilai dan tipe data)
!=
!==
Pembanding
Balikan
X==8
False
X==5
True
X===5
False
X===5
True
X!=8
True
X!==5
True
X!==5
False
>
X>8
False
<
X<8
True
X>=8
False
X<=8
True
Pengantar Javascript
Operator Logika
Operator logika digunakan untuk menunjukkan nilai kebenaran antara beberapa variabel atau
beberapa nilai. Diberikan nilai X = 6 dan Y = 3, table dibawah menjelaskan operator logika.
Operator
Deskripsi
Pembanding
Balikan
&&
Dan
True
||
Atau
(X == 5 || Y == 5)
False
Negasi/Ingkaran
!(x==y)
True
Operator Bersyarat
Javascript juga memuat operator bersyarat yang memberikan suatu nilai ke suatu variabel berdasarkan
kondisi yang sama.
Syntaxnya :
NamaVariabel=(syarat)?nilai 1: nilai 2
Contoh 3 :
<!DOCTYPE html>
<html>
<body>
<p>Klik tombol untuk memeriksa usia</p>
Usia:<input id="usia" value="18" />
<p>Apakah Usianya mencukupi?</p>
<button onclick="myFunction()">Coba Cek Usia</button>
<p id="coba"></p>
<script>
function myFunction()
{
var usia,periksa;
usia=document.getElementById("usia").value;
periksa=(usia<18)?"Terlalu Muda":"Usia memenuhi";
document.getElementById("coba").innerHTML=periksa;
}
</script>
</body>
</html>
Pengantar Javascript
Latihan 2. Variabel
<html>
<head>
<title>Contoh Javascript</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var variabelku;
variabelku = "Hello"; // bertipe string
alert(variabelku);
variabelku = 54321; // bertipe numerik
alert(variabelku);
</script>
</body>
</html>
Pengantar Javascript
Pengantar Javascript
10
Pengantar Javascript
11
Latihan 8. Statement
<!DOCTYPE html>
<html>
<body>
<h1>Belajar Javascript</h1>
<p id=paragraf">Ini adalah suatu paragraf</p>
<div id="Div">Ini adalah div.</div>
<p>
<button type="button" onclick="myFunction()">Coba Javascript</button>
</p>
<script>
function myFunction()
{
document.getElementById("paragraf").innerHTML="Halo Semuanya";
document.getElementById("Div").innerHTML="Bagaimana Kabar And?";
}
</script>
<p>Ketika Anda mengklik
berubah.</p>
</body>
</html>
Pengantar Javascript
12
MEMBUAT FUNGSI
Contoh 1
<html>
<head>
</head>
<body>
<script language="JavaScript" type="text/javascript">
function diskon(hargaAwal)
{
var diskon;
diskon = 0.5 * hargaAwal;
hargaDiskon = hargaAwal - diskon;
return hargaDiskon;
}
var harga = prompt("Masukkan harga mula-mula (Rp) : ");
document.write("Harga stlh diskon 50% : Rp. " + diskon(harga));
</script>
</body>
</html>
Pengantar Javascript
13
nilai dari hargaAwal ini sama dengan nilai dari variabel harga, pada contoh ini adalah bernilai 1000.
Selanjutnya akan dihitung nilai diskon yaitu 0.5 * 1000 = 500, dan hargaDiskon yaitu 1000 500 = 500.
Perintah return hargaDiskon, artinya akan mengembalikan nilai hargaDiskon (500) ke function yang
memanggilnya, yaitu diskon(harga), lihat tanda panah pada script di atas. Sehingga akan tercetak
Harga stlh diskon 50% : Rp. 500.
Suatu function tidak harus terdapat return value. Perhatikan contoh berikut ini.
Contoh 2
<html>
<head>
<script language="JavaScript" type="text/javascript">
function cetakTeks(teks)
{
document.write(teks + "<br>");
}
</script>
</head>
<body>
<script language="JavaScript" type="text/javascript">
var kata = "Hallo";
var i;
for(i=0; i<=5; i++)
{
cetakTeks(kata);
}
</script>
</body>
</html>
Latihan
1. Buatlah satu aplikasi web untuk mengkonversi suhu dengan menggunakan fungsi
2. Buatlah satu aplikasi web untuk menampilkan besar diskon dari pembelian barang. Inputan berupa :
harga barang dan besar diskon.
Pengantar Javascript
14
PERNYATAAN BERSYARAT
Pernyataan Bersyarat
Pernyataan bersyarat digunakan untuk menampilkan aksi yang berbeda berdasarkan kondisi yang
berbeda. Pernyataan bersyarat dalam Javascript antara lain :
1. Pernyataan if
2. Pernyataan if else
3. Pernyataan if else if
4. Pernyataan Switch
Pernyataan if
Pernyataan if digunakan untuk mengeksekusi code apabila syarat yang ditentukan di penuhi (bernilai
benar). Pernyataan if memiliki syntax sebagai berikut :
if (syarat)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
Contoh 1
<html>
<body>
<script language="JavaScript" type="text/javascript">
var bil;
var status;
bil = prompt("Masukkan sebarang bilangan
: ");
Pengantar Javascript
15
Pernyataan if else
Pernyataan if else digunakan untuk mengeksekusi beberapa kode apabila syarat yang dtentukan
terpenuhi dan untuk kode apabila syarat tidak dipenuhi. Syntax dari pernyataan if else sebagai berikut
if (syarat)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
Else
{
Kode yang dieksekusi apabila syarat tidak dipenuhi
}
Contoh 2
<html>
<body>
<script language="JavaScript" type="text/javascript">
var tanggal;
var status;
tanggal = prompt("Masukkan tanggal hari ini : ");
if (tanggal > 15)
{
status = "Tanggal " + tanggal + " adalah tanggal tua";
}
else
{
status = "Tanggal " + tanggal + " adalah tanggal muda";
}
document.write(status);
</script>
</body>
</html>
Pengantar Javascript
16
Contoh 3
<html>
<body>
<script language="JavaScript" type="text/javascript">
var bil;
var status;
bil = prompt("Masukkan sebarang bilangan : ");
if (bil > 10)
{
status = "Anda telah memasukkan bilangan lebih besar dari 10";
}
else if (bil < 10)
{
status = "Anda telah memasukkan bilangan lebih kecil dari 10";
}
else
{
status = "Anda telah memasukkan bilangan sama dengan 10";
}
document.write(status);
</script>
</body>
</html>
Pernyataan Switch
Pernyataan switch memiliki fungsi yang sama dengan pernyataan if else if else Syntax dari
pernyataan ini adalah sebagai berikut :
Switch(variabel)
{
case option1 :
statement
break;
case option2 :
statement
break;
case option3 :
statement
break;
...
...
...
default
: statement
break;
}
1
2
3
Proses dari SWITCH di atas adalah melakukan cek pada value variabel. Apabila valuenya sama dengan
option1 maka statement yang dilakukan adalah statement 1. Apabila valuenya sama dengan option2 maka
statement 2 yang dijalankan, begitu seterusnya. Namun apabila tidak ada value yang sama, maka
statement x lah yang dijalankan.
Pengantar Javascript
17
Tipe data dari variabel yang akan dicek haruslah ordinal, misalnya integer. Dalam hal ini tipe data riil tidak
dapat digunakan. Untuk memastikan bahwa nilai yang akan dicek pada variabel adalah bertipe integer,
sebaiknya gunakan perintah parseInt().
Contoh 4
<html>
<body>
<script language="JavaScript" type="text/javascript">
var nilaiAngka;
var nilaiHuruf;
nilaiAngka = parseInt(prompt("Masukkan sebuah bil bulat 1 s/d 5 : "));
switch(nilaiAngka)
{
case 1 : document.write("Anda memasukkan bilangan 1");
break;
case 2 : document.write("Anda memasukkan bilangan 2");
break;
case 3 : document.write("Anda memasukkan bilangan 3");
break;
case 4 : document.write("Anda memasukkan bilangan 4");
break;
case 5 : document.write("Anda memasukkan bilangan 5");
break;
default : document.write("Bilangan yang Anda masukkan tidak 1 s/d 5");
break;
}
</script>
</body>
</html>
Contoh 5
<!DOCTYPE html>
<html>
<body>
<p>Klik Tombol untuk mengetahui hari ini.</p>
<button onclick="fungsihari()">Cek Hari</button>
<p id="hari"></p>
<script>
function fungsihari()
{
var x;
var d=new Date().getDay();
switch (d)
{
case 0:
x="Hari ini adalah hari Minggu";
break;
case 1:
x="Hari ini adalah hari Senin";
break;
case 2:
Pengantar Javascript
18
Latihan
1. Buatlah script Javascript untuk mengkonversi nilai angka ke nilai huruf dengan aturan sebagai berikut :
80 100 : A
70 79
:B
60 69
:C
50 59
:D
0 49
:E
Apabila nilai yang dimasukkan tidak dalam rentang 0 100, maka akan muncul keterangan nilai yang
dimasukkan tidak valid.
2. Buatlah script Javascript untuk menampilkan hari dan tanggal.
Contoh tampilan : Hari ini adalah Selasa, 5 Febuari 2013.
Pengantar Javascript
19
STRUKTUR PERULANGAN
Perulangan adalah suatu blok perintah atau kode yang diulang selama syarat bernilai True. Dalam
javascript, perulangan ini dapat dinyatakan dalam 2 bentuk, yaitu dengan For dan While. Pada bagian ini
akan dijelaskan penggunaan For untuk perluangan terlebih dahulu.
Perulangan FOR
Perulangan For sering digunakan untuk mebuat perulangan dengan jumlah perulangan telah
diketahui secara pasti. Syntax dari perulangan for adalah sebagai berikut :
For (statement 1; statement 2; statement 3)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
Keterangan :
Statement 1 akan dieksekusi sebelum perulangan dimulai
Statement 2 mendefinisikan kondisi untuk menjalankan perulangan
Statement 3 dieksekusi setiap kali kode blok selesai dieksekusi.
Contoh 1
<html>
<body>
<script language="JavaScript" type="text/javascript">
var counter;
for(counter=1; counter<=5; counter++)
{
document.write("<font size='" + counter + "'>
Ini adalah font berukuran " + counter +
"</font><br>");
}
</script>
</body>
</html>
Contoh 2
<html>
<body>
<script language="JavaScript" type="text/javascript">
var counter;
Pengantar Javascript
20
Perulangan While
Pada prinsipnya bentuk perulangan While adalah mirip dengan perulangan For. Secara umum sintaks
dari perulangan While adalah
For (statement 1; statement 2; statement 3)
{
Kode yang dieksekusi apabila syarat dipenuhi
}
Dalam sintaks di atas, bagian statement akan terus diulang selama syarat bernilai True.
Sebagai contoh, perhatikan statement dalam For dan While berikut ini. Kedua statement adalah ekuivalen
atau sama (perhatikan dengan warna sama)
for(counter=1; counter<=5; counter++)
{
document.write("Hello World <br>");
}
--------------------------------------------------
Pengantar Javascript
21
counter = 1;
while(counter<=5)
{
document.write("Hello World <br>");
counter++;
}
Meskipun semua statement For dapat juga dinyatakan sebagai While, namun tidak berlaku sebaliknya.
Tidam semua statement While dapat dinyatakan dalam For. Inilah kelebihan perulangan While.
Kelebihan While dibandingkan For adalah bahwa ehile dapat digunakan apabila jumlah perulangan tidak
diketahui. Sedangkan untuk For harus diketahui jumlah perulangannya.
Sebagai contoh perumpamaan, misalkan ada statement begini: Saya akan terus makan selama saya masih
lapar. Statement tersebut adalah juga termasuk konsep perulangan dalam kehidupan sehari-hari. Dalam
hal ini, jumlah berapa kali harus makan tidak diketahui. Melainkan hanya syarat makannya saja yang
diketahui, yaitu selama masih lapar. Perhatikan contoh berikut ini. Script ini akan terus meminta user untuk
mengisikan suatu angka selama angka yang dimasukkan bukan angka 5.
Contoh 4
<html>
<body>
<script language="JavaScript" type="text/javascript">
var angka;
while(angka != 5)
{
angka = prompt("Masukkan sebuah angka : ");
}
document.write("Anda telah memasukkan angka 5");
</script>
</body>
</html>
Perhatikan syarat (yang dicetak biru) pada script di atas. Syarat tersebut bermakna, selama nilai angka
tidak sama dengan 5, maka user akan selalu diminta memasukkan angka. Sehingga dalam kasus ini
tidak diketahui berapa jumlah perulangan yang harus dilakukan, namun perulangannya tergantung dari
syarat. Untuk kasus seperti ini, kita tidak bisa membuatnya dengan FOR.
Pengantar Javascript
22
PEMROSESAN FORM
Pada bagian ini akan dipaparkan bagaimana memproses suatu input data yang berasal dari
komponen form, seperti textbox, textarea, combo box, radio, button, dan lain lain. Pada dasarnya untuk
semua tag komponen form, disisipkan dalam tag form.
Form
Tag form dalam HTML memiliki syntax sebagai berikut :
<form name=namaform>
...
...
...
</form>
Contoh 1
<form name=coba_form>
<input type=text name=edit1>
<input type=text name=edit2>
...
...
</form>
Untuk membaca value yang diinputkan melalui komponen dalam form menggunakan javascript
menggunkan obyek document dengan syntax sebagai berikut :
document.namaform.namakomponen.value;
Sebagai contoh, script berikut ini adalah script untuk membaca nilai yang diinputkan user melalui
komponen text lalu menampilkan sebagai alert.
Contoh 1
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function baca()
{
var nilai = document.formku.input.value;
alert("Anda telah memasukkan input : " + nilai);
}
Pengantar Javascript
23
</script>
</head>
<body>
<h1>Baca Input</h1>
<form name="formku">
Masukkan sebuah input <input type="text" name="input">
<input type="button" name="button" value="OK" onclick="baca()">
</form>
</body>
</html>
Apabila script di atas dijalankan, maka akan muncul tampilan seperti berikut :
Selanjutnya, perhatikan contoh di bawah ini. Pada contoh ini, akan dibuat semacam kalkulator sederhana
yang mengoperasikan penjumlahan, pengurangan, perkalian dan pembagian dari dua bilangan.
Contoh 2
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function hitung()
{
var bilangan1 = parseFloat(document.formku.bil1.value);
var bilangan2 = parseFloat(document.formku.bil2.value);
Pengantar Javascript
24
var op = document.formku.operasi.value;
var hasil;
if (op == "jumlah") hasil = bilangan1 + bilangan2;
else if (op == "kurang") hasil = bilangan1 - bilangan2;
else if (op == "kali") hasil = bilangan1 * bilangan2;
else if (op == "bagi") hasil = bilangan1 / bilangan2;
document.formku.hasil.value = hasil;
}
</script>
</head>
<body>
<h1>Kalkulator Sederhana</h1>
<form name="formku">
Bil Pertama <input type="text" name="bil1">
<select name="operasi" onchange="hitung()">
<option value="jumlah">Dijumlahkan</option>
<option value="kurang">Dikurangkan</option>
<option value="kali">Dikalikan</option>
<option value="bagi">Dibagi</option>
</select>
Bil Kedua <input type="text" name="bil2"> =
<input type="text" name="hasil">
</form>
</body>
</html>
Berikut tampilan dari script di atas
Pengantar Javascript
25
EVENT HANDLER
Pada pembahasan sebelumnya telah diberikan beberapa contoh script yang telah menggunakan even
handler onclick() yaitu apabila suatu elemen diklik maka akan terjadi suatu efek/action tertentu. Apakah
ada event yang selain onclick()? Jawabannya jelas ada, berikut beberapa event yang dapat kita gunakan.
MOUSE EVENTS
Event
onclick
ondblclick
onmousedown
onmousemove
onmouseout
onmouseover
onmouseup
Keyboard Events
Event
onkeydown
onkeypress
onkeyup
Description
Muncul ketika user mengklik elemen/ komponen
Muncul ketika user mengklik ganda pada elemen/komponen
Muncul ketika user menekan pada mouse
Muncul ketika user menggerakkan pointer mouse
Muncul ketika user menggerakkan pointer mouse keluar dari elemen/komponen
control
Muncul ketika user menggerakkan pointer mouse melalui/melewati elemen
Muncul ketika user melepas tombol mouse
Description
Muncul ketika user menekan suatu tombol pada keyboard
Muncul ketika user menekan suatu tombol keyboard dan akan terus muncul sampai
user melepas tombol
Muncul ketika user melepas tombol yang telah ditekan
Pengantar Javascript
Description
Muncul ketika window telah selesai loading
Muncul ketika user mengubah ukuran window
Muncul ketika user keluar dari halaman/dokumen web
26
Contoh 1
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function dekati()
{
document.formku.status.value = "Anda mendekati obyek link";
}
function jauhi()
{
document.formku.status.value = "Anda menjauhi obyek link";
}
</script>
</head>
<body>
<h1><a href="" onmouseover="dekati()" onmouseout="jauhi()">
Obyek Link</a>
</h1>
<form name="formku">
<textarea name="status"></textarea>
</form>
</body>
</html>
Berikut tampilan dari script di atas
Referensi :
*1+. www.w3school.com
*2+. Ari, Rosihan. Dasar Javascript. Diakses melalui www.rosihanari.net
*3+. Goodman, Danny with Michael Morrison. Javascript 5 Bible. Wiley Pubhlising,inc.
Pengantar Javascript
27