Gudang Ilmu Pendidikan: MATERI Lengkap Java Script & contohnya

MATERI LENGKAP PENGENALAN JAVASCRIPT

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

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 dapat diletakkan di tag <body> dan atau di tag <head> pada bagian halaman HTML.

Contoh 1

alert(“Belajar Javascript”);

</script>

Pada contoh 2 berikut, script di tulis pada bagan <body>

Contoh 2

<!DOCTYPE html>

<html>

<body>

...

document.write(“<h1> Belajar Javascript</h1>”);

</script>

...

</body>

</html>

Penulisan Fungsi pada Javascript

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>

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>

<p id="coba">A Paragraph</p>

{

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

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

TIPE DATA DAN VARIABEL

Tipe Data dan Variabel pada Javascript

Lazimnya 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

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

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”; // 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 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.

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

-- 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 + 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 x=5+5;

y="5"+5;

z="angka "+5;

Hasil dari script di atas adalah :

angka 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 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 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 (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>

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>

Praktikum 7 : Javascript Part 1

Latihan 1. My First Javascript

Buatlah script berikut ini. Jalankan script dan berilah komentar.

<html>

<head><title>Latihan Javascript</title></head>

<p>Paragraph 1</p>

// blok script 1

alert("blok script 1 sedang dijalankan");

</script>

<p>Paragraph 2</p>

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

var variabelku;

variabelku = "Hello"; // bertipe string alert(variabelku);

variabelku = 54321; // bertipe numerik

alert(variabelku);

</script>

</body>

</html>

Latihan 3. Operator Aritmatika

<html>

<body>

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>

Latihan 4. Operator Aritmatika

<html>

<body>

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>

hargaDiskon = harga - 0.2 * harga;

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

</script>

</body>

</html>

Latihan 6. Mengkonversi Tipe Data

<html>

<body>

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>

Latihan 7. Tipe Data Array

<html>

<body>

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>

</body>

</html>

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>

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>

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>

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

Suatu function tidak harus terdapat return value. Perhatikan contoh berikut ini.

Contoh 2

<html>

<head>

function cetakTeks(teks)

{

document.write(teks + "<br>");

}

</script>

</head>

<body>

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.

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>

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)

{

} Else

{

}

Kode yang dieksekusi apabila syarat dipenuhi

Kode yang dieksekusi apabila syarat tidak dipenuhi

Contoh 2

<html>

<body>

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>

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)

{

}

else

{

}

Kode yang dieksekusi apabila syarat 2 dipenuhi

Kode yang dieksekusi apabila syarat 1 dan syarat 2 tidak dipenuhi

Contoh 3

<html>

<body>

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

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>

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.

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>

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>

var counter;

for(counter=5; counter>=1; counter--)

{

document.write("<font size='" + counter + "'>Ini adalah font berukuran " + counter + "</font><br>");

}

</script>

</body>

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

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

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>");

}

--------------------------------------------------

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>

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.

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>

Contoh 1

...

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

function baca()

{

var nilai = document.formku.input.value;

alert("Anda telah memasukkan input : " + nilai);

}

</script>

</head>

<body>

<h1>Baca Input</h1>

Masukkan sebuah input <input type="text" name="input">

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

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>

Bil Pertama <input type="text" name="bil1">

<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"> =

</form>

</body>

</html>

Berikut tampilan dari script di atas

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

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>

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>

</body>

</html>

JANGAN LUPA BACA JUGA : Materi bahasa C Lengkap

DOWNLOAD MATERI PDF/DOC DI SINI !!!!!!!!!!!!!!!!!!!!

Referensi :

www.w3school.com

Ari, Rosihan. Dasar Javascript. Diakses melalui www.rosihanari.net

Goodman, Danny with Michael Morrison. Javascript 5 Bible. Wiley Pubhlising,inc.

Gudang Ilmu Pendidikan

Pages

Test Footer

Random post

Wednesday, October 3, 2018

MATERI Lengkap Java Script & contohnya

MATERI LENGKAP PENGENALAN JAVASCRIPT

Bagaimana Menulis Javascript ???

Memberi Komentar pada Javascript.

Tipe Data dan Variabel pada Javascript

Deklarasi Variabel

No comments:

Post a Comment