Scribd
Unggah
66 tayangan39 halaman

Dasar Javascript

Dokumen tersebut membahas pengantar tentang JavaScript mencakup penjelasan singkat tentang apa itu JavaScript, bagaimana menulis kode JavaScript, dan jenis variabel beserta tipe datanya. "

Diunggah oleh

erviana
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
66 tayangan39 halaman

Dasar Javascript

Dokumen tersebut membahas pengantar tentang JavaScript mencakup penjelasan singkat tentang apa itu JavaScript, bagaimana menulis kode JavaScript, dan jenis variabel beserta tipe datanya. "

Diunggah oleh

erviana
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 39

A.

PENGANTAR JAVASCRIPT

Sekilas Tentang JavaScript


JavaScript adalah bahasa pemrograman yang popular. JavaScript adalah bahasa pemrograman yang
digunakan untuk HTML dan WEB, untuk Server, PC, Laptop, tablet dan lebih banyak lagi. Kode pemrograman
JavaScript dapat disisipkan kedalam halaman HTML. Pada awalnya, JavaScript mulai diperkenalkan di
browser Netscape Navigator 2. Namun waktu itu namanya bukan JavaScript, namun LiveScript.
Mengingat pada waktu itu teknologi Java sedang panas-panasnya atau sedang tren, maka pihak Netscape
memutuskan untuk mengganti namanya menjadi JavaScript, yang sepertinya nama tersebut lebih
marketible dibandingkan LiveScript. Selanjutnya pihak Microsoft (rival Netscape) pun mulai ikut-ikutan
memfasilitasi web browser buatannya, ‘Internet Explorer’, supaya bisa mendukung JavaScript. Namun
mungkin karena gengsi, pihak Microsoft memberi nama bahasa yang lain, yaitu Jscript. Mulai saat
itu, Netscape dan Microsoft mulai berlomba-lomba mengembangkan bahasa tersebut dalam versi yang
berlainan. Oleh sebab persaingan itulah terkadang suatu JavaScript mungkin bisa bekerja dengan baik di
browser Netscape, tapi tidak demqikian halnya di IE, begitu pula sebaliknya.
Untuk membuat scrip JavaScript harus digunakan editor. Editor teks yang digunakan banyak sekali,
yang paling sederhana adalah editor notepad dari windows. Anda dapat menggunakan editor teks lainnya
seperti notepad ++, Dreamweaver, JavaScript Editor dan lain lain.
Bagaimana Menulis JavaScript?
Ada dua jenis bagaimana JavaScript dibuat, pertama JavaScript ditulis dalam file yang terpisah dengan
HTML, kedua JavaScript ditulis dalam HTML. JavaScript yang ditulis diluar HTML disebut Eksternal JavaScript
dengan ektensi file .js. Dalam HTML, penulisan script diawali dengan <script> … </script>. Script yang akan
dijalankan harus diletakkan diantara <script> dan </script>. Tag <script> memiliki beberapa atribut, namun
yang terpenting adalah atribut language dan type. Karena JavaScript bukan satu-satunya bahasa
scripting, maka sangatlah perlu untuk memberitahukan kepada browser bahwa bahasa script yang
digunakan adalah JavaScript dan selanjutnya browser akan menjalankan modul pendukung
JavaScript untuk memprosesnya. Sehingga untuk JavaScript, pada tag <script> perlulah ditambahkan
atribut berikut ini:
<script language="JavaScript" type="text/JavaScript">

Script dapat diletakkan di tag <body> dan atau di tag <head> pada bagian halaman HTML.

Contoh 1

Pengantar JavaScript 1
<script language=”JavaScript” type=”text/JavaScript”>
alert(“Belajar JavaScript”);
</script>
Pada contoh 2 berikut, script di tulis pada bagan <body>

Contoh 2
<!DOCTYPE html>
<html>
<body>
...
<script language=”JavaScript” type=”text/JavaScript”>
document.write(“<h1> Belajar JavaScript</h1>”);
</script>
...
</body>
</html>
Penulisan JavaScript di dalam tag <head>
Dalam contoh berikut, script jaca diletakkan di tag <head> pada halaman HTML. Fungsi akan dipanggil
ketika tombol diklik.
Contoh 3

<!DOCTYPE html>
<html>
<head>
<script language=”JavaScript” type=”text/JavaScript”>
function cobafungsi()
{
document.getElementById("coba").innerHTML="Belajar membuat fungsi";
}
</script>
</head>
<body>
<h1>Halaman WEB</h1>
<p id="coba">A Paragraph</p>
<button type="button" onclick="cobafungsi()">Coba Fungsi</button>
</body>
</html>
Penulisan JavaScript di dalam tag <body>
Dalam contoh berikut, fungsi JavaScript diletakkan di tag <body> pada halaman HTML. Fungsi akan
dipanggil ketika tombol diklik.
Contoh 4
<!DOCTYPE html>
<html>
<body>
<h1>Halaman Web</h1>

Pengantar JavaScript 2
<p id="coba">A Paragraph</p>
<button type="button" onclick="cobafungsi()">Coba</button>
<script language=”JavaScript” type=”text/JavaScript”>
Function cobafungsi()
{
document.getElementById("coba").innerHTML="Belajar Fungsi JavaScript";
}
</script>
</body>
</html>
Memberi Komentar pada JavaScript
Komentar pada suatu script tidak akan dieksekusi oleh JavaScript. Komentar ditambahkan pada script untuk
memberikan penjelasan script atau membuat skrip tidak dieksekusi. Untuk memberikan komentar yang
hanya satu baris gunakan //.
Berikut contoh bagaimana memberi komentar tunggal.
Contoh 5
// Write to a heading:
document.getElementById("myH1").innerHTML="Selamat datang di Homepage Saya";
// Write to a paragraph:
document.getElementById("myP").innerHTML="Ini adalah paragraph saya.";

Contoh 6
var x=5; // mendeklarasikan x dan memasangkannya dengan 5
var y=x+2; // mendeklarasikan y dan memasangkannya dengan x+2

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.”
B. VARIABEL DAN TIPE DATA

Variabel dan Tipe Data pada JavaScript


Umumnya bahasa pemrograman, JavaScript memiliki tipe data dan variabel. Variabel pada
JavaScript seperti kotak atau wadah yang digunakan untuk menyimpan informasi yang senantiasa dapat
diload. Sedangkan tipe data terkait dengan jenis data atau nilai yang disimpan dalam variabel.
Deklarasi Variabel

Pengantar JavaScript 3
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, komputer akan menyediakan beberapa bagian memori untuk menyimpan nilai pada nama
variabel tersebut. Terdapat dua cara dalam mendeklarasikan suatu variabel di dalam JavaScript. Secara
umum ada dua cara, yaitu: (1) Mendeklarasikan variabel menggunakan kata var, (2) Tanpa menggunakan
kata var dan langsung mengisikan nilai pada suatu variabel. Namun sebaiknya gunakan kata var dalam
mendeklarasikan variabel. 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 titik di tengah-tengah nama variabel.
5. Nama variabel tidak boleh memuat spasi.
6. 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;
Contoh 4
// contoh berikut adalah contoh yang salah dari penamaan variabel.
Var nama.kota; //memuat titik di tengah kata
Var nama kota; //memuat spasi
Var 1namakota; //karakter awal adalah angka, bukan huruf.
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
mendeklarasikan beberapa variabel sekaligus. Untuk mendeklarasikan beberapa variabel digunakan tanda
koma (,) untuk memisahkan variabel satu dengan yang lainnya.
Tabel berikut memuat kata tercadang yang tidak boleh digunakan untuk menamai variabel.
No Kata tercadang No Kata tercadang No Kata tercadang
1. abstract 18. Finally 35. Private
2. boolean 19. Float 36. Protected

Pengantar JavaScript 4
3. break 20. For 37. Public
4. byte 21. Function 38. Return
5. case 22. Goto 39. Short
6. catch 23. If 40. Static
7. char 24. Implements 41. Super
8. Class 25. Import 42. Switch
9. Const 26. In 43. This
10. Continue 27. Instanceof 44. Throw
11. Default 28. Int 45. True
12. Do 29. Interface 46. Try
13. Double 30. long 47. Var
14. Else 31. Native 48. While
15. extends 32. New 49. With
16. False 33. Null 50. Void
17. Final 34. Package
Cakupan Variabel
Cakupan dari variabel sangat bergantung dimana variabel tersebut dideklarasikan. JavaScript mengenal dua
jenis variabel berdasarkan cakupannya, yaitu:
1. Variabel Global.
Variabel yang dideklarasikan di luar fungsi pada suatu blok script disebut dengan variabel global.
Variabel jenis ini dapat digunakan dimana saja, baik pada fungsi atau dimanapun, sepanjang masih
dalam cakupan blok script.
2. Variabel Lokal.
Variablel yang dideklarasikan pada suatu fungsi disebut variabel local. Variabel jenis ini hanya dapat
diakses, sepanjang proses masih berada di dalam fungsi tersebut. keberadaan variabel akan berakhir
begitu proses telah mencapat akhir fungsi.
Konstanta
Konstanta merupakan variabel yang mempunyai nilai yang tetap atau tidak dapat diubah-ubah.
Untuk mendeklarasikan konstanta digunakan kata kunci const. Sintaks dan aturan penamaan konstanta sma
dengan sintaks dan aturan untuk deklarasi variabel biasa. Nilai pada konstanta harus didefinisikan pada saat
pendeklarasian. Jika hal ini tidak dilakukan, maka variabel konstanta akan bernilai undefined, dan nilai
konstanta tidak dapat diubah.
Seperti halnya variabel, konstanta juga memiliki cakupan yang terbagi atas dua jenis, yaitu: (1).
Konstanta global dan (2). Konstanta local. Konstanta digolongkan sebagai konstanta global apabila
konstanta tersebut dideklarasikan di luar fungsi pada suatu blok script. Konstanta global ini dapat digunakan
dimana saja sepanjang masih dalam cakupan blok script. Sedangkan konstanta local adalah konstanta yang
dideklarasikan pada suatu fungsi, dan cakupannya hanya sebatas pada fungsi itu saja. Ketika proses sudah
mencapai akhir fungsi, konstanta tersebut akan dihapus dari memory komputer klien.

Pengantar JavaScript 5
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 5
var namakota=“Malang”; // tipe data string
var propinsi=’Jawa Timur’; // tipe data string
var x1=34; // tipe data integer
var x2=3.14; // tipe data float
var y=123e4; // tipe data integer
var x=true; // tipe data boolean
Contoh 6
//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 7
var klien={nama:”Pamungkas”, sex:”Laki-Laki”, id:”5758”};
Pada contoh di atas dideklarasikan beberapa variabel dengan berbagai tipe data. Pada contoh 5 di atas
dideklarasikan variabel dengan tipe data string, integer, float dan Boolean. Contoh 6 di atas
mendeklarasikan tipe data jenis array, dan beberapa cara variasi penulisannya. Pendeklarasian variabel
dengan tipe data object dicontohkan pada contoh 7.

C. OPERATOR PADA 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 7 5
- Pengurangan x=y – 2 3 5
* Perkalian x=y*2 10 5
/ Pembagian x=y/2 2.5 5
% Modulus (Sisa bagi) x=y%2 1 5
Increment x=++y 6 6
++
x=y++ 5 6

Pengantar JavaScript 6
Decrement x=--y 4 4
--
x=y-- 5 4
Operator Pemberian Nilai
Operator pemberian nilai digunakan untuk memberikan nilai pada variabel. Dalam contoh berikut,
diberikan x = 10, dan y = 5. Tabel berikut menjelaskan operator pemberian nilai.

Operator Contoh Sama dengan hasil


= x=y x=5
+= 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
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 Pembanding Balikan


== Sama dengan X==8 False
X==5 True
=== Sama persis dengan (nilai dan tipe data) X===”5” False
X===5 True
!= Tidak sama dengan X!=8 True
!== Tidak sama dengan (nilai atau tipe data) X!==”5” True
X!==5 False
> Lebih besar dari X>8 False
< Lebih kecil dari X<8 True
≥ Lebih besar sama dengan X>=8 False
≤ Lebih kecil sama dengan X<=8 True

Operator + yang digunakan pada tipe data String


Operator + juga dapat digunakan untuk menambahkan variabel bertipe data string atau nilai text.
Contoh 1
//untuk menambahkan dua atau lebih variabel tipe String, gunakan operator +
txt1="Selamat Datang";
txt2="Di Jurusan Matematika";
txt3=txt1+” “+txt2;

Hasil dari script di atas adalah :


Selamat Datang Di Jurusan Matematika

Contoh 2
//menambahkan String dan Bilangan

Pengantar JavaScript 7
x=5+5;
y="5"+5;
z="angka "+5;

Hasil dari script di atas adalah :


10
55
angka 5
Operator Logika
Operator logika digunakan untuk menunjukkan nilai kebenaran antara beberapa variabel atau
beberapa nilai. Diberikan nilai X = 6 dan Y = 3, tabel di bawah menjelaskan operator logika.

Operator Deskripsi Pembanding Balikan


&& Dan (X < 10 && Y > 1) 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 8
Praktikum : JavaScript Part 1
Latihan 1. My First JavaScript
Buatlah script berikut ini. Jalankan script dan berilah komentar.

<html>
<head><title>Latihan JavaScript</title></head>
<body bgcolor="white">
<p>Paragraph 1</p>
<script language="JavaScript" type="text/JavaScript">
// blok script 1
alert("blok script 1 sedang dijalankan");
</script>
<p>Paragraph 2</p>
<script language="JavaScript" type="text/JavaScript">
// blok script 2
document.bgColor = "RED";
alert("blok script 2 sedang dijalankan");
</script>
<p>Paragraph 3</p>
</body>
</html>
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>
Latihan 3. Operator Aritmatika
<html>
<body>

<script language="JavaScript" type="text/JavaScript">


var hasil;
// deklarasi dan assignment dapat dilakukan sekaligus
var bilPertama = 15;
var bilKedua = 10;
hasil = bilPertama + bilKedua;
alert(hasil); // menampilkan hasil 25
hasil = bilPertama - bilKedua;
alert(hasil); // menampilkan hasil 5
hasil = bilPertama * bilKedua;
alert(hasil); // menampilkan hasil 150
hasil = bilPertama / bilKedua;
alert(hasil); // menampilkan hasil 1.5
</script> </body> </html>

Pengantar JavaScript 9
Latihan 4. Operator Aritmatika
<html>
<body>

<script language="JavaScript" type="text/JavaScript">


var bilangan; var hasil;

bilangan = 5;
bilangan += 4; // ekuivalen dengan statement bilangan = bilangan + 4;
alert(bilangan); // menampilkan 9
hasil = bilangan + 2 - 1 * 4;
alert(hasil); // menampilkan 7

</script>
</body>
</html>
Latihan 5. Operator Aritmatika
<html>
<body>

<script language="JavaScript" type="text/JavaScript">


var harga = prompt("Masukkan harga mula-mula (Rp) : ");
var hargaDiskon;

hargaDiskon = harga - 0.2 * harga;

document.write("Harga setelah didiskon : Rp. " + hargaDiskon);


</script>
</body>
</html>
Latihan 6. Mengkonversi Tipe Data
<html>
<body>

<script language="JavaScript" type="text/JavaScript">

var teks = "2.3 adalah bilangan riil";


var bil1;
var bil2;

bil1 = parseFloat(teks); // konversi ke riil


document.write("Nilai dari bil1 = " + bil1 + "<br>");

bil2 = parseInt(teks); // konversi ke integer


document.write("Nilai dari bil2 = " + bil2);

</script>
</body>

Pengantar JavaScript 10
Latihan 7. Tipe Data Array

<html>
<body>

<script language="JavaScript" type="text/JavaScript">

var mhs = new Array(); // deklarasi array

// assignment

mhs[0] = "Amalia";
mhs[1] = "Faza";
mhs[2] = "Nada";

// menampilkan elemen array

document.write("mhs[0] = " + mhs[0] + "<br>");


document.write("mhs[2] = " + mhs[2] + "<br>");
document.write("mhs[1] = " + mhs[1] + "<br>");

// mengubah value elemen

mhs[1] = "Ari";

document.write("mhs[1] diubah menjadi " + mhs[1]);

</script>

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 "Coba JavaScript", dua elemen akan


berubah.</p>

</body>
</html>

Pengantar JavaScript 11
D. MEMBUAT FUNGSI

Fungsi Pada JavaScript


Fungsi adalah suatu blok kode yang dijalankan ketika ada script yang memanggil fungsi tersebut.
Fungsi merupakan bagian subprogram yang melaksanakan suatu tugas tertentu ketika diperlukan. Fungsi ini
dapat dipanggil dengan cara menuliskan nama fungsinya saja, dan disertai dengan parameter apabila ada.
Jadi parameter dalam suatu fungsi bersifat opsional. Suatu fungsi ditulis sebagai blok kode dengan syntax
sebagai berikut :

function namafungsi(parameter)
{
Beberapa code untuk dijalankan
}

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>

Proses pada script di atas adalah sebagai berikut:


Mula-mula user diminta memasukkan harga mula-mula, harga ini diassign ke dalam variabel harga,
misalnya 1000. Selanjutnya script mencetak harga setelah didiskon. Dalam hal ini, script akan memanggil
function diskon(harga) atau diskon(1000). Karena function diskon memiliki parameter hargaAwal, maka
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’.

Pengantar JavaScript 12
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.

E. 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
}

Pengantar JavaScript 13
Contoh 1
<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";
}
document.write(status);
</script>
</body>
</html>

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 14
Pernyataan if … else if … else …
Pernyataan if … else if … else … digunakan untuk mengeksekusi satu dari beberapa kode apabila
syarat yang dtentukan terpenuhi dan untuk kode apabila syarat tidak dipenuhi. Syntax dari pernyataan if …
else … sebagai berikut
if (syarat 1)
{
Kode yang dieksekusi apabila syarat 1 dipenuhi
}
else if (syarat 2)
{
Kode yang dieksekusi apabila syarat 2 dipenuhi
}
else
{
Kode yang dieksekusi apabila syarat 1 dan syarat 2 tidak dipenuhi
}

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 :

Pengantar JavaScript 15
Switch(variabel)
{
case option1 : statement 1
break;
case option2 : statement 2
break;
case option3 : statement 3
break;
...
...
...
default : statement x
break;
}

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.
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>

Pengantar JavaScript 16
<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:
  x="Hari ini adalah hari Selasa";
  break;
case 3:
  x="Hari ini adalah hari Rabu";
  break;
case 4:
  x="Hari ini adalah hari Kamis";
  break;
case 5:
  x="Hari ini adalah hari Jumat";
  break;
case 6:
   x="Hari ini adalah hari Sabtu";
  break;
}
document.getElementById("hari").innerHTML=x;
}
</script>
</body>
</html>

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 17
E. 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;
for(counter=5; counter>=1; counter--)
{
document.write("<font size='" + counter + "'>Ini adalah font
berukuran " + counter + "</font><br>");
}
</script>
</body>

Pengantar JavaScript 18
</html>
Dari contoh 1 dan contoh 2 di atas, dapat disimpulkan bahwa perulangan tidak selalu dalam bentuk
increment, akan tetapi juga dapat dalam bentuk decrement. Selain itu kenaikan atau penurunannya tidak
selalu naik 1 atau turun 1. Perhatikan contoh berikut ini :
Contoh 3
<html>
<body>
<script language="JavaScript" type="text/JavaScript">
var counter;
for(counter=1; counter<=5; counter+=2)
{
document.write("<font size='" + counter + "'>
Ini adalah font berukuran " + counter +
"</font><br>");
}
</script>
</body>
</html>
Perulangan While
Pada prinsipnya bentuk perulangan While adalah mirip dengan perulangan For. Secara umum sintaks
dari perulangan While adalah

While (syarat)
{
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>");
}
--------------------------------------------------
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.

Pengantar JavaScript 19
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.

F.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;

Pengantar JavaScript 20
Tipe Data
Contoh 1
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function baca()
{
var nilai = document.formku.input.value;
alert("Anda telah memasukkan input : " + nilai);
}
</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);
var op = document.formku.operasi.value;
var hasil;
if (op == "jumlah") hasil = bilangan1 + bilangan2;

Pengantar JavaScript 21
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

G. 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 Description
onclick Muncul ketika user mengklik elemen/ komponen
ondblclick Muncul ketika user mengklik ganda pada elemen/komponen
onmousedown Muncul ketika user menekan pada mouse
onmousemove Muncul ketika user menggerakkan pointer mouse
onmouseout Muncul ketika user menggerakkan pointer mouse keluar dari elemen/komponen
control
onmouseover Muncul ketika user menggerakkan pointer mouse melalui/melewati elemen
onmouseup Muncul ketika user melepas tombol mouse
KEYBOARD EVENTS
Event Description
onkeydown Muncul ketika user menekan suatu tombol pada keyboard
onkeypress Muncul ketika user menekan suatu tombol keyboard dan akan terus muncul sampai
user melepas tombol
onkeyup Muncul ketika user melepas tombol yang telah ditekan

Pengantar JavaScript 22
HTML CONTROL EVENTS
Event Description
onblur Muncul ketika HTML control kehilangan focus
onchange Muncul ketika HTML control kehilangan focus dan nilainya berubah
onfocus Muncul ketika HTML control sedang focus
onreset Muncul ketika user menekan tombol reset dalam form
onselect Muncul ketika user memilih teks pada HTML control
onsubmit Muncul ketika user melakukan submit form
WINDOW EVENTS
Event Description
Onload Muncul ketika window telah selesai loading
Onresize Muncul ketika user mengubah ukuran window
Onunload Muncul ketika user keluar dari halaman/dokumen web

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

Pengantar JavaScript 23
Referensi :
[1]. Ari, Rosihan. Dasar JavaScript. Diakses melalui www.rosihanari.net
[2]. Goodman, Danny with Michael Morrison. JavaScript 5 Bible. Wiley Pubhlising,inc.
[3]. Purnomo, Vita Prihatoni. 2008. 100% JavaScript. Dian Rakyat, Jakarta.
[4]. www.w3school.com
Tips dan Trik Javascript.
Mereload/refresh halaman secara otomatis
Untuk mereload halaman web secara otomatis, dapat digunakan

LATIHAN JAVASCRIPT
1. FORM TOKO (DISKON)
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function proses()
{
var harga_unit=document.formtoko.harga_unit.value;
var jumlah_pembelian=document.formtoko.jumlah_pembelian.value;
var total_harga, diskon, diskon_rupiah, jumlah_bayar, keterangan;
var dibayar=document.formtoko.dibayar.value;
total_harga=harga_unit*jumlah_pembelian;
document.formtoko.total_harga.value=total_harga;
if((jumlah_pembelian>5) && (jumlah_pembelian<=10))
{
document.formtoko.diskon_persen.value=5+"%";
diskon_rupiah=5*total_harga/100;
}
else if((jumlah_pembelian>10) && (jumlah_pembelian<=15))
{
document.formtoko.diskon_persen.value=10+"%";
diskon_rupiah=10*total_harga/100;
}
else if(jumlah_pembelian>15)
{
document.formtoko.diskon_persen.value=15+"%";
diskon_rupiah=15*total_harga/100;
}
else
{
document.formtoko.diskon_persen.value=0+"%";
diskon_rupiah=0*total_harga/100;
}

document.formtoko.diskon_rupiah.value=diskon_rupiah;
jumlah_bayar=total_harga-diskon_rupiah;
document.formtoko.jumlah_bayar.value=jumlah_bayar;
keterangan=dibayar-jumlah_bayar;
if(keterangan<0)
{
document.formtoko.keterangan.value="Kurang Rp. "+keterangan;
}

Pengantar JavaScript 24
else if(keterangan==0)
{
document.formtoko.keterangan.value="Pas";
}
else
{
document.formtoko.keterangan.value="Kembali Rp. "+keterangan;
}

}
</script>
</head>
<body>
<form name=formtoko method=post action="">
<font size=5><b>TOKO BANYAK UNTUNG</b></font/>
<hr>
<table>
<tr>
<td width=200>Nama Produk</td>
<td>:</td>
<td><input type="text" name="nama_produk" placeholder="Isikan Nama Produk" size="50"></td>
</tr>
<tr>
<td>Harga tiap Unit</td>
<td>:</td>
<td><input type="text" name="harga_unit" placeholder="Harga tiap unit(dalam Rupiah)"
size="30"></td>
</tr>
<tr>
<td>Jumlah Pembelian</td>
<td>:</td>
<td><input type="text" name="jumlah_pembelian" placeholder="Jumlah Pembelian"
size="20"></td>
</tr>
<tr>
<td>Total Harga</td>
<td>:</td>
<td><input type="text" name="total_harga" size="30"></td>
</tr>
<tr>
<td>Diskon</td>
<td>:</td>
<td><input type="text" name="diskon_persen" size="10">Rp. <input type="text"
name="diskon_rupiah" size="30"></td>
</tr>
<tr>
<td>Jumlah yang harus dibayar</td>
<td>:</td>
<td><input type="text" name="jumlah_bayar" size="30"></td>
</tr>
<tr>
<td>Dibayar</td>
<td>:</td>
<td><input type="text" name="dibayar" size="30" placeholder="yang dibayarkan pembeli"></td>
</tr>
<tr>
<td>Keterangan</td>

Pengantar JavaScript 25
<td>:</td>
<td><input type="text" name="keterangan" size="40"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input type="button" value="Proses" onclick="proses()"><input type="reset"
value="Reset"></td>
</tr>
</table>
<hr>
Kasir: Syaiful Hamzah Nasution
</form>
</body>
</html>

2. ARITMATIKA
<html>
<body>
<script language="javascript" type="text/javascript">
var a = prompt("Masukkan suku pertama barisan aritmatika :")
var b = prompt("Masukkan beda dari barisan aritmatika :")
var n = prompt("Masukkan suku ke-berapa yang diinginkan :")
var i, teks="", suku;
for(i=1;i<=n;i++)
{
suku= parseFloat(a)+parseFloat(b*(i-1));
if(1<n)
{
teks=teks+suku+",";
}
else
{
teks=teks+suku;
}
}
document.write("Anda memasukkan suku awal: "+a+", dengan beda: "+b+"<br>");
document.write(n+" suku pertama barisan aritmatika tersebut adalah:<br>"+teks);
document.write("<br>---------------------------------------<br>");
document.write("By: Eggy Arie");
</script>
</body>
</html>
3. BINTANG
<html>
<body>
<script language="JavaScript" type="text/JavaScript">
var n=prompt("Masukkan jumlah pengulangan");
var i;
var tanda="";
for(i=1; i<=n; i=i+1)
{
tanda=tanda+"*";
document.write(tanda+"<br>");
}
</script>
</body>

Pengantar JavaScript 26
</html>
4. DISKON
<html>
<head>
</head>
<body BGCOLOR="#CCCCFF">
<script language="JavaScript" type="text/JavaScript">
function prosesharga(hargaawal,diskon)
{
var besardiskon=hargaawal*diskon/100;
var hargadiskon=hargaawal-besardiskon;
document.write("Harga Awal : Rp. "+hargaawal+"<br>");
document.write("Besar Diskon : "+ diskon +"% (Rp. "+ besardiskon+")<br>");
document.write("Harga setelah didiskon: Rp. "+hargadiskon);
}
var hargaawal=prompt("Masukkan Harga Awal (dalam Rp)");
var diskon=prompt("Masukkan Besar Diskon (dalam %)");
prosesharga(hargaawal,diskon);
</script>
<hr>TERIMAKASIH ATAS KUNJUNGAN ANDA DAN SILAHKAN DATANG KEMBALI
</body>
</html>
5. DISKON (37,5%)
<html>
<head>
</head>
<body bgcolor="#33CCFF">
<script language="JavaScript" type="text/JavaScript">
function diskon(hargaAwal)
{
var diskon;
diskon = 0.375 * hargaAwal;
hargaDiskon = hargaAwal - diskon;
return hargaDiskon;
}
var harga = prompt("Masukkan harga mula-mula (Rp) : ");
document.write("Harga setelah diskon 37.5% : Rp. " + diskon(harga));
</script>
</body>
</html>
6. FAKTORIAL
<html>
<body>
<script language="JavaScript" type="text/JavaScript">
var n;
var i;
var hasil=1;
n = prompt("Masukkan nilai yang akan difaktorialkan : ");
for(i=1; i<=n; i=i+1)
{
hasil=hasil*i;
}
document.write("Nilai dari "+ n +"! adalah =" + hasil);
</script>
</body>
</html>

Pengantar JavaScript 27
7. FAKTORIAL (IF...ELSE)
<html>
<body>
<script language="JavaScript" type="text/JavaScript">
var n;
var i;
var teks="";
var hasil=1;
n = prompt("Masukkan nilai yang akan difaktorialkan : ");
for(i=1; i<=n; i=i+1)
{
hasil=hasil*i;
if (i<n)
{
teks=teks+ i +"x";
}
else
{
teks=teks+ i;
}
}
document.write("Nilai dari "+ n +"! adalah = " + hasil+ "<br>"+n+"!="+teks);
</script>
</body>
</html>
8. FIBONACCI
<html>
<body>
<script language="javascript" type="text/javascript">
var n=prompt("Masukkan n suku pertama barisan Fibonacci");
var i;
var u1=1,u2=1,un;
if (n==1)
{
document.write("1 Suku pertama barisan Fibonacci adalah<br>1");
}
else if(n==2)
{
document.write(n + "2 Suku pertama barisan fibonacci adalah <br>1,1, ");
}
else if(n>2)
{
document.write(n + " Suku pertama barisan Fibonacci adalah <br>1,1, ");
for(i=3;i<=n;i=i+1)
{
un=u1+u2;
u1=u2;
u2=un;
if(i<n)
{
document.write(un+" ,");
}
else
{
document.write(un);
}
}

Pengantar JavaScript 28
}
else
{
document.write("n harus bilangan asli. Ulangi lagi dengan cara merefresh halaman");
}
</script>
</body>
</html>
9. FOR (++)
<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>
10. FOR (--)
<html>
<body>
<script language="JavaScript" type="text/JavaScript">
var counter;
for(counter=5; counter>=1; counter--)
{
document.write("<font size='" + counter + "'>Ini adalah font berukuran " + counter + "</font><br>");
}
</script>
</body>
</html>
11. FOR
<html>
<body>
<script language="JavaScript" type="text/JavaScript">
var counter;
for(counter=1; counter<=5; counter+=2)
{
document.write("<font size='" + counter + "'>Ini adalah font berukuran " + counter + "</font><br>");
}
</script>
</body>
</html>
12. FOR
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function cetakTeks(teks)
{
document.write(teks + "<br>");
}
</script>
</head>
<body bgcolor="#FFCCCC">
<script language="JavaScript" type="text/JavaScript">

Pengantar JavaScript 29
var kata = "Hallo";
var i;
for(i=0; i<=5; i++)
{
cetakTeks(kata)
}
</script>
</body>
</html>
13. SWITCH (HARI)
<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:
x="Hari ini adalah hari Selasa";
break;
case 3:
x="Hari ini adalah hari Rabu";
break;
case 4:
x="Hari ini adalah hari Kamis";
break;
case 5:
x="Hari ini adalah hari Jumat";
break;
case 6:
x="Hari ini adalah hari Sabtu";
break;
}
document.getElementById("hari").innerHTML=x;
}
</script>
</body>
</html>
14. IF
<html>
<body>
<script language="JavaScript" type="text/JavaScript">
var bil;
var status;
bil = prompt("Masukkan sebarang bilangan :");
if (bil > 10)

Pengantar JavaScript 30
{
status = "Anda telah memasukkan bilangan lebih besar dari 10";
}
document.write(status);
</script>
</body>
</html>
15. IF...ELSE...
<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>
16. IF...ELSE IF
<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>
17. INPUT FORM
<html>
<head>
<script language="JavaScript" type="text/Javascript">
function baca()
{
var nilai = document.formku.input.value;
alert("Anda telah memasukkan input : " + nilai);

Pengantar JavaScript 31
}
</script>
</head>
<body>
<h1>Input Nama</h1>
<form name="formku">
Masukkan sebuah input <input type="text" name="input">
<input type="button" name="button" value="next" onclick="baca()">
</form>
</body>
</html>
18. KALKULATOR SEDERHANA
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
function hitung()
{
var bilangan1 = parseFloat(document.formku.bil1.value);
var bilangan2 = parseFloat(document.formku.bil2.value);
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>
19. FORM
<html><head><title>Display Form Input</title>
<script language="JavaScript">
function tampil(myform)
{
JendelaBaru=window.open(",",'width=500,height=200');
inputnama="<b>Nama Anda:"+myform.nama_pengguna.value+"</b><br>";
JendelaBaru.document.write(inputnama);
inputtelp="<b>Nomor Telepon Anda:"+myform.telp.value+"</b><hr>";
JendelaBaru.document.write(inputtelp);
}

Pengantar JavaScript 32
function close_window()
{
JendelaBaru.window.close();
}
</script>
</head><hr><body><h3>Display Data Form di Jendela Kecil</h3><p>
<form name="formtest">
Silahkan masukkan nama Anda <br>
<input type="text" size="50" name="nama_pengguna"><p>
Silahkan masukkan nomor telp Anda <br>
<input type="text" size="30" name="telp"><p>
<input type="button" value="Tampilkan Data" onClick="tampilForm(this.form)";>
</form>
<font size="+1"><a href="javascript:void()" onClick="close_window()">
Klik untuk menutup Jendela Kecil</a></font>
</body>
</html>
20. NILAI (IF)
<html>
<head> </head>
<SCRIPT language="Javascript">
function test () {
var val1=document.kirim.T1.value
if (val1 >= 0)
document.kirim.T2.value="E"
if (val1 > 0)
document.kirim.T2.value="E"
if (val1 > 50)
document.kirim.T2.value="D"
if (val1 > 60)
document.kirim.T2.value="C"
if (val1 > 70)
document.kirim.T2.value="B"
if (val1 > 80)
document.kirim.T2.value="A"
}
</SCRIPT>
<body>
<form method="POST" name="kirim">
<p>NILAI ANGKA &nbsp&nbsp&nbsp&nbsp <input type="text" name="T1" size="2"><br><br>
NILAI HURUF <input type="text" name="T2" size="2">
</p>
<p><input type="button" value="HASIL" name="B1" onclick=test()>
</p>
</form>
</body>
</html>
21. NILAI ANGKA (parseInt)
<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");

Pengantar JavaScript 33
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>
22. SUHU
<html>
<head>
</head>
<body bgcolor="#CCCCFF">
<script language="JavaScript" type="text/JavaScript">
function konversiKelvin(suhu)
{
konversiCelcius = parseInt(suhu) + 273;
return konversiCelcius;
}
function konversiReamur(suhu)
{
konversiCelcius = parseInt(suhu) * 4/5;
return konversiCelcius;
}
function konversiFahrenheit(suhu)
{
konversiCelcius = parseInt(suhu) *9/5 + 32;
return konversiCelcius;
}
var suhu = prompt("Masukkan suhu awal (C) : ");
document.write("Suhu setelah dikonversi <hr>");
document.write("Suhu " + suhu + "<sup>o</sup> C =" + konversiKelvin(suhu) + " K <br>");
document.write("Suhu " + suhu + "<sup>o</sup> C =" + konversiReamur(suhu) + "<sup>o</sup> R
<br>");
document.write("Suhu " + suhu + "<sup>o</sup> C =" + konversiFahrenheit(suhu) + "<sup>o</sup> F
<br>");
</script>
</body>
</html>
23. FORM TOKO
<html>
<head>
<title>TOKO SAYA</title>
<script language="JavaScript">
function tampil(myform)
{
JendelaBaru=window.open(",",'width=500,height=200');
inputnama="<b>Nama Produk:"+myform.nama_produk.value+"</b>";
JendelaBaru.document.write(inputnama);
inputharga="<b>Harga tiap Unit:"+myform.harga_tiap_unit.value+"</b>";

Pengantar JavaScript 34
JendelaBaru.document.write(inputharga);
}
function close_window()
{
JendelaBaru.window.close();
}
</script>
</head><hr><body><h3> TOKO SAYA</h3>

<pre>
<form name="formtoko">
Nama Produk : <input type="text" size="60" name="nama_produk"><br>
Harga tiap Unit : <input type="text" size="60" name="harga"><br>
Jumlah Pembelian : <input type="text" size="60" name="jumlah"><br>
Total : <input type="text" size="60" name="total"><br>
Diskon (%) : <input type="text" size="15" name="diskon"> Rp.<input type="text" size="36"
name="Rp."> <br>
Jumlah yang harus dibayar : <input type="text" size="60" name="jumlah"><br>
Dibayar : <input type="text" size="60" name="nama_produk"><br>
Keterangan : <input type="text" size="60" name="keterangan"><br>

<input type="button" value="Proses" onClick="Proses";> <input type="button"


value="Reset" onClick="Reset";></p>
</form>
</pre>

</body>
</html>
24. USIA
<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>
25. ANGKA (WHILE)
<html>
<body>
<p>Klik tombol untuk memeriksa usia</p>

Pengantar JavaScript 35
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>
26. CONTOH 1
<html>
<head><title>Latihan JavaScript</title></head>
<body bgcolor="#FFCCFF">
<p>Paragraph 1</p>
<script language="JavaScript" type="text/Javascript">
// blok script 1
alert ("blok script 1 sedang dijalankan");
</script>
<p>Paragraph 2</p>
<script language="Javascript" type="text/Javascript">
// blok script 2
document.bgColor = "PINK";
alert("blok script 2 sedang dijalankan");
</script>
<p>Paragraph 3</p>
</body>
</html>
27. CONTOH 2
<html>
<head>
<title>Contoh JavaScript</title>
</head>
<body bgcolor="#CC66FF">

<script language="JavaScript" type="text/Javascript">


var variabelku;
variabelku = "Hello"; // bertipe string
alert(variabelku);
variabelku = 54321; // bertipe numerik
alert(variabelku);
</script>
</body>
</html>
28. CONTOH 3
<html>
<body>

Pengantar JavaScript 36
<script language="JavaScript" type="text/JavaScript">
var hasil;
// deklarasi dan assigment dapat dilakukan sekaligus
var bilPertama = 15;
var bilKedua = 10;

hasil = bilPertama + bilKedua;


alert(hasil); // menampilkan hasil 25

hasil = bilPertama - bilKedua;


alert(hasil); // menampilkan hasil 5

hasil = bilPertama * bilKedua;


alert(hasil); // menampilkan hasil 150

hasil = bilPertama / bilKedua;


aleet(hasil); // menampilkan hasil 1.5

</script>

</body>
</html>
29. CONTOH 4
<html>
<body>

<script language="JavaScript" type="text/JavaScript">


var bilangan; var hasil;

bilangan = 5;
bilangan += 4 // ekuivalen dengan statement bilangan = bilangan + 4;
alert(bilangan); // menampilkan 9
hasil = bilangan + 2 - 1 * 4;
alert(hasil); // menampilkan 7

</script>

</body>
</html>
30. CONTOH 5
<html>
<body>

<script language="JavaScript" type="text/JavaScript">


var harga = prompt("Masukkan harga mula-mula (Rp) : ");
var hargaDiskon;

hargaDiskon = harga - 0.33 * harga;

document.write("Harga setelah didiskon : Rp. " + hargaDiskon);


</script>

</body>
</html>
31. CONTOH 6
<html>
<body>

Pengantar JavaScript 37
<script language="JavaScript" type="text/JavaScript">

var teks = "2.3 adalah bilangan riil";


var bil1;
var bil2;

bil1 = parseFloat(teks); // konversi ke riil


document.write("Nilai dari bil1 = " + bil1 + "<br>");

bil2 = parseInt(teks); // konversi ke integer


document.write("Nilai dari bil2 = " + bil2);

</script>

</body>
</html>
32. CONTOH 7
<html>
<body>

<script language="JavaScript" type="text/JavaScript">

var mhs = new Array(); // deklarasi array

// assignment

mhs[0] = "Eggy";
mhs[1] = "Arie";
mhs[2] = "Pramesti";

// menampilkan elemen array

document.write("mhs[0] = " + mhs[0] + "<br>");


document.write("mhs[2] = " + mhs[2] + "<br>");
document.write("mhs[1] = " + mhs[1] + "<br>");

// mengubah value elemen

mhs[1] ="Egg";

document.write("mhs[1] diubah menjadi " + mhs[1]);

</script>

</body>
</html>
33. CONTOH 8
<!DOCTYPE html>
<html>
<body>

<h1>Belajar JavaScript</h1>

<p id="paragraf">Ini adalah suatu paragraf</p>


<div id="Div">Ini adalah div.</div>

Pengantar JavaScript 38
<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 Anda?";
}
</script>

<p>Ketika Anda mengklik "Coba JavaScript", dua elemen akan berubah.</p>

</body>
</html>

Pengantar JavaScript 39

Anda mungkin juga menyukai