pengantar javascript

Modul Pratikum Matakuliah Dasar-dasar Web IX- 1

BAB 9

PENGANTAR JAVASCRIPT

9.1. DASAR-DASAR JAVASCRIPT

9.1.1. BASIC

Pengertian Javascript

Javascript adalah bahasa pemrograman web yang berbasis client-side. Server hanya mengirimkan script,

selanjutnya browser yang akan menerjemahkan script javascript tersebut. Hal – hal yang bisa dikerjakan

dengan javascript adalah :

membuat halaman web lebih interaktif

mendeteksi browser yang digunakan

mengubah nilai (value) element HTML

membuat animasi

membuat game

membuat emulator

Debug script javacript

Untuk mendeteksi script yang telah kita tulis benar atau salah, sebaiknya gunakan beberapa tools berikut :

Error Console (Mozilla Firefox) . Cara mengaktifkannya (Tools > Error Console) atau menekan tombol

( Ctrl + Shift + j )

Freesje (http://www.yaldex.com/Ready/freejse.zip )

Pengenalan sysntaks javascript

Tidak seperti HTML, javascript bersifat Case Sensitive. Jadi perlu ada perhatian khusus untuk setiap

sysntaks yang ditulis pada javascript. Berikut adalah contoh syntaks javascript:

document.write(“Hello World”);

http://www.yaldex.com/Ready/freejse.zip


Model penulisan sintaksnya hampir sama dengan bahasa C/C++. Setiap syntaks harus diakhiri dengan

tanda titik koma (;).

Komentar pada javacript

Untuk membuat komentar pada javascript ada beberapa cara, yaitu :

menggunakan tanda slash 2 kali ( // ). Jenis komentar ini hanya untuk komentar dalam satu baris

menggunakan tanda yang diawali dengan /* dan di akhiri dengan */ . Komentar jenis ini sangat

panjang selama ditutup dengan tanda */.

Variable pada javascript variable dalam javacript di deklarasikan dengan menuliskan statement var lalu

diikuti dengan nama variable.

Penulisan nama variable dalam javascript bersifat Case Sensitive, jadi variable dengan nama x tidak akan

sama dengan X. Kita bisa juga langsung menginisialisasikan nilai pada saat deklarasi variabel.

<html>

<head>

<title>Penggunaan Variabel dalam JavaScript</title>

<script type="text/javascript">

var x=5;

var computer="Acer";

document.write("Nilai variable x = "+ x + "Dan Variable computer = "+ computer );

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Variabel dalam JavaScript

var x=5;

var computer=“Acer”;

var x;

var computer;

document.write(“Hello World”); // jenis komentar 1 baris

document.write(“Hello World”); /* komentar ini sangat panjang sekali, tidak

terbatas selama belum ditutup */


Operator javascript

Tabel 9.1 Operator-operator Dasar JavaScript, dengan y = 5

Operator Deskripsi Contoh Hasil

+ Penambahan x=y+2 7

- Pengurangan x=y-2 3

* Perkalian x=y*2 10

/ Pembagian x=y/2 2.5

% Modulo ( sisa pembagian ) x=y%2 1

++ Melakukan tambah 1 x=++y 6

-- Melakukan kurang 1 x=--y 4

Table berikut adalah operator – operator lanjutan . Diketahui x=10, y=5

Tabel 9.2 Operator-operator Lanjutan, dengan x=10, y=5

Operator Contoh Sama Seperti Hasil

+= x+=y x=x+y 15

-= x-=y x=x-y 5

*= x*=y x=x*y 50

/= x/=y x=x/y 2

%= x%=y x=x%y 0

<html>

<head>

<title>Penggunaan Operator dalam JavaScript</title>


var x = 10;

var y = 5;

var teks_1="hello";

var teks_2=" world";

document.write("x+=y hasilnya "+(x+=y)+"<br>");

document.write("teks_1 += teks_2 = "+(teks_1+=teks_2));

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Operator dalam JavaScript


Operator Pembanding dan Operator Logika

Tabel 9.3 Operator Pembanding, dengan x=5

Operator Deskripsi Contoh Hasil

== apakah nilainya sama dengan x==8 false

=== apakah nilai dan tipe datanya sama dengan x===5

x===”5”

true

false

!= apakah tidak sama dengan x!=8 true

> apakah lebih besar dari x>8 false

< apakah lebih kecil x<8 true

>= apakah lebih besar sama dengan x>=8 false

<= apakah lebih kecil sama dengan x<=8 true

Tabel 9.4 Operator Logika, dengan x=6, y=3

Operator Deskripsi Contoh hasil

&& and ( x<10 && y>1) true

|| or ( x==7 || x!=7) true

! not !(x==7) true

Javascript Popups Box Dalam javascript ada tiga macam popups box, yaitu:

Alert Box. Alert box sering digunakan untuk memberikan informasi. Ketika alert box muncul, user hanya

klik tombol ok untuk menyembunyikannya

<html>

<head>

<title>Penggunaan Operator Pembanding dan Logika</title>


var x = 10;

var y = 5;

document.write("x==y hasilnya "+(x==y)+"<br>");

if (x>5 && y<10)

document.write("x>5 && y<10 hasilnya "+(x>5 && y<10));

else

document.write("x>5 && y<10 hasilnya "+(x>5 && y<10));

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Operator Pembanding dan Logika


Confirm Box. Confirm box sering digunakan untuk menanyakan persetujuan tentang suatu hal

Prompt Box. Prompt box lebih sering digunakan untuk memasukkan data (input data) ke dalam

halaman web

Javascript Functions Function akan di eksekusi hanya pada saat dipanggil atau suatu kejadian. Untuk

mendefinisikan Function adalah sebagai berikut :

<html>

<head>

<title>Penggunaan Prompt Box</title>


var nama = prompt("Masukkan nama anda");

if(nama!=null)

document.write("Nama anda adalah " + nama );

else

alert("anda belum memasukkan nama");

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Prompt Box

<html>

<head>

<title>Penggunaan Confirm Box</title>


var konfirmasi=confirm("setuju atau tidak");

if(konfirmasi==true)

alert("Anda Menekan Tombol Ok");

else

alert("Anda Menekan Tombol Cancel")

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Confirm Box

<html>

<head>

<title>Penggunaan Alert Box</title>


alert("Hello World");

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Alert Box


Javascript loops Dalam javascript ada dua tipe perulangan yaitu :

FOR. Bentuk utama sintaks for adalah :

WHILE. Bentuk utama sintaks while adalah:

<html>

<head>

<title>Penggunaan For Loop</title>


var i;

for(i=1;i<=10;i++)

{

document.write("Teks baris ke - " + i +"<br>");

}

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan For Loop

for (var=startvalue;var<=endvalue;var=var+increment)

{

kode untuk dijalankan

}

<html>

<head>

<title>Penggunaan JavaScript Function</title>


function tampil_pesan()

{

alert("hello world");

}

</script>

</head>

<body>

<input type="button" value="Klik Disini" onclick="tampil_pesan()">

</body>

</html>

Contoh Penggunaan JavaScript Function

function namafungsi(var1,var2, … )

{

kode untuk di eksekusi

}


Javascript Events Dengan menggunakan Javascript memunkinkan kita untuk mendeteksi setiap Event yang

terjadi pada halaman web. Karena hal tersebutlah kita bisa memanggil Javascript tergantung pada Event

yang sedang terjadi. Contoh Event

klik mouse

halaman memuat gambar

mengirim form HTML

dll

onLoad & onUnload. onLoad adalah kondisi pada saat halaman web baru dibuka dan browser sedang

mendownload halaman. unUnload adalah kondisi pada saat halaman web telah siap di download dan

browser sudah siap untuk menampilkan seluruh content website

onFocus, onBlur & onChange. onFocus, onBlur dan onChage sering digunakan untuk validasi form

onSubmit. onSubmit sering digunakan untuk memvalidasi Form sebelum disubmit

<form method="post" action="aaa.htm" onsubmit="return checkForm()">

<input type="text" size="30" id="email" onchange="checkEmail()">

<html>

<head>

<title>Penggunaan While Loop</title>


var i=1;

while (i<=10)

{

document.write("Teks baris ke - " + i +"<br>");

i++;

}

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan While Loop

while (var<=endvalue)

{

kode untuk dijalankan

}


onMouseOver & onMouseOut. onMouseOver dan onMouseOut sering digunakan untuk membuat animasi

navigasi dan tombol

9.1.2. OBJECT

Javascript adalah bahasa pemrograman berbasis object ( OOP = Object Oriented Programming). Dengan

konsep OOP memungkinkan kita untuk mendefinisikan object sendiri dan membuat type variable sendiri.

Dalam bab ini kita tidak akan membahasa bagaimana cara membuat program dengan OOP, tapi kita hanya

menggunakan OOP yang sudah disediakan oleh javacript. Dalam javacript ada dua macam object yang

telah disediakan yaitu:l

Property. Property adalah nilai – nilai yang berhubungan dengan Objek.

Method. Method adalah tindakan (action) yang bisa dilakukan oleh objek.

<html>

<head>

<title>Penggunaan Method</title>


var str="Hello world!";

document.write(str.toUpperCase());

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Method

<html>

<head>

<title>Penggunaan Property</title>


var teks="Hello world!";

document.write(teks.length);

</script>

</head>

<body>

</body>

</html>

Contoh Penggunaan Property

<a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver

event');return false"><img src="w3s.gif" alt="W3Schools" /></a>


Javascript Date. Javascript Date adalah objek yang digunakan untuk menampilkan tanggal dan waktu. Untuk

menggunakan objek tanggal, kita perlu menciptakan pada halaman web kita, dengan cara menambahkan

kaliman berikut

Kita bisa memanipulasi tanggal dengan menggunakan method setFullYear atau dengan cara berikut ini.

Hari dalam javascript terhitung dari 0 – 6 ( minggu – sabtu ). Untuk menampilkan nama hari (yang

disamarkan dalam angka 0 – 6) menggunakan fungsi getDay().

<html>

<head>

<title>Pengaturan Tanggal dan Waktu</title>


var Date1=new Date();

Date1.setFullYear(2010,1,14);

document.write(Date1);

var Date2=new Date("February 14, 1975 11:13:00 ");

document.write(Date2);

</script>

</head>

<body>

</body>

</html>

Contoh Pengaturan Tanggal dan Waktu

d1 = new Date("October 13, 1975 11:13:00")

d2 = new Date(79,5,24)

d3 = new Date(79,5,24,11,33,0)

<html>

<head>

<title>Penggunaan Objek Tanggal dan Waktu</title>

</head>


var d=new Date();

document.write(d);

</script>

<body>

</body>

</html>

Contoh Penggunaan Objek Tanggal dan Waktu

var namavariable= new Date();


Untuk membuat jam ada beberapa hal yang harus dilakukan, yaitu :

Definisikan tanggal dan waktu untuk saat ini.

var sekarang=new Date();

Definisikan jam saat ini

var jam=sekarang.getHours();

Definisikan menit saat ini

var menit=sekarang.getMinutes();

Definisikan detik saat ini

var detik=sekarang.getSeconds();

Tambahkan angka nol di depannya jika angka tersebut lebih kecil dari 10

function checkTime(i)

{

if (i<10)

{

i="0" + i;

}

return i;

}

Tampilkan jam, menit dan detik ke dalam element HTML

document.getElementById('txt').innerHTML=jam+":"+meni+":"+detik;

Lakukan secara terus – menerus semua aktifitas di atas, supaya jam yang ditampilkan setiap detik akan

valid

t=setTimeout('startTime()',500);

<html>

<body>


var date = new Date();

var weekday = new Array(7);

weekday[0]="Minggu";

weekday[1]="Senin";

weekday[2]="Selasa";

weekday[3]="Rabu";

weekday[4]="Kamis";

weekday[5]="Jumat";

weekday[6]="Sabtu";

ocument.write("Hari ini adalah hari " + weekday[date.getDay()])

</script>

</body>

</html>

Contoh Menampilkan Nama Hari


Javascript Array Object Array adalah variable istimewa yang bisa menyimpan lebih dari 1 nilai. Setiap nilai

yang tersimpan di dalamnya akan memiliki indeks atau posisi dimana data itu di simpan dalam variable

Array tersebut. Mendefinisikan Variable Array

Memasukkan nilai ke dalam variabel Array

atau

var namavariable=new Array(“data ke-1”,”data ke-2”,”data ke-3”);

var namavariable=new Array();

namavariable[0]=“data ke-1”;



var namavariable = new Array();

<html>

<head>


function startTime()

{

var sekarang=new Date();

var jam=sekarang.getHours();

var menit=sekarang.getMinutes();

var detik=sekarang.getSeconds();

// tambakan 0 didepannya jika angkanya lebih kecil dari 10

jam=checkTime(jam);

menit=checkTime(menit);

detik=checkTime(detik);

// tampilkan jam pada element HTML dengan id=txt

document.getElementById('txt').innerHTML=jam+":"+menit+":"+detik;

/* lakukan perulangan secara terus menerus untuk menampilkan jam yang valid */

t=setTimeout('startTime()',500);

}

function checkTime(i)

{

if (i<10)

{

i="0" + i;

}

return i;

}

</script>

</head>

<body onload="startTime()">

<div id="txt"></div>

</body>

</html>

Contoh dari Penjelasan Diatas


Untuk mengakses nilai yang tersimpan pada variable Array , kira harus menyebutkan namavaribel tersebut

dan nomor indeks data yang keberapa yang ingin diakses dalam variable array.

Contoh di atas akan menghasilkan output = data ke-1

Javascript Math Object Javascript Math Object memungkinkan kita melakukan hal – hal dalam matematika

pada halaman web. Untuk mendefinisikannya kita cukup mengetik kata “ Math. ” lalu dilanjutkan dengan

nama Method.

Mathematical Constant Javascript menyediakan 8 jenis konstanta dalam matematika, yaitu : E, PI, akar

kuadrat dari dua, akar kuadrat dari ½ , log natural dari 2, log natural dari 10, log basis 2 dari E, log basis 10

dari E.

Mathematical Method Ada beberapa Mathmematical Method dalam javascript yaitu :

Round. Round Method berfungsi untuk mencari nilai integer terdekat dari nilai yang dimasukkan

maka akan menghasilkan 5

Random. Random Method berfungsi untuk menampilkan nilai secara acak antara 0 – 1

Maka akan menghasilkan outpun bilangan decimal antara 0.00 – 1.00

document.write(Math.round(4.6));

document.write(Math.round(4.6));

Math.E

Math.PI

Math.SQRT2

Math.SQRT1_2

Math.LN2

Math.LN10

Math.LOG2E

Math.LOG10E

var nilai_PI=Math.PI;

var akar_kuadrat=Math.sqrt(16);

document.write(namavariable[0]);


RegExp ( Regular Expression ) RegExp adalah objek yang menggambarkan pola karakter. Bila kita ingin

mecari dalam teks, kita bisa menggunakan pola untuk menggambarkan apa yang ingin dicari. Sintaks untuk

membuat pola

Pattern = pola yang ingin dicari, atau kata yang ingin dicari

Modifier = ada dua variable dalam modifier yaitu

i = untuk mengabaikan case sensitive

g = untuk mencari apakah mengandung pola yang dicari , bersifat case sensitive

RegExp Modifier Sesuai yang telah dijelaskan diatas modifier i dan modifier g memiliki dua fungsi yang

berbeda. Untuk lebih memahaminya, pelari contoh – contoh berikut :

Penjelasan :

match() adalah fungsi yang akan mencocokkan pola kata variable patt1 dengan kalimat yang ada pada

variable str

<html>

<body>


var str = "Visit W3Schools";

var patt1 = /w3schools/i;

document.write(str.match(patt1));

</script>

</body>

</html>

Contoh Penggunaan Modifier i

var txt=new RegExp(pattern,modifiers);

or more simply:

var txt=/pattern/modifiers;

<html>


document.write("Nilai ini akan berubah setiap kali refresh page " + Math.random() +

"<br>");

document.write("Round dari 4.8 = " + Math.round(4.8) + " Round dari 5.3 = " +

Math.round(5.3));

</script>

<body >

</body>

</html>

Contoh Penggunaan Math Objek


patt1 = /w3schools/i : maksud dari kalimat ini adalah isi pola = w3schools, modifier i menngindikasikan

bahwa tidak bersifat case sensitive, jadi walaupun pada variable str huruf besar dan huruf kecilnya tidak

sama dengan yang ada pada variable patt1, maka tetap tampilkan, asalkan kata – katanya cocok.

Kata yang digaribawahi dan ditebalkan ini yang akan ditampilkan sebagai output

Penjelasan :

Modifier g pada contoh di atas akan berfungsi untuk menyatakan bahwa pola tersebut hanya mencari kata

yang sama dengan kata pada variabel patt1 yaitu is. Jika ada maka tampilkan kata is sebanyak yang ia

dapatkan pada variable str.

Yang digaris bawahi dan ditebalkan pada teks di bawah ini adalah outputnya

Penjelasan:

Dengan menggunakan modifier i dan g mengindikasikan bahwa kata yang dicari pada variable str apakah

mengandung nilai variable patt1 (modifier g) dan tidak perduli apakah penulisan huruf besar dan huruf

kecilnya sama (modifier i).

Yang digaris bawahi dan ditebalkan pada teks dibawah ini adalah outputnya

<html>

<head><title>Penggunaan Modifier i dan g</title>

</head>

<body>


var str="Is this all there is?";

var patt1=/is/gi;


</script>

</body>

</html>

Contoh Penggunaan Modifier i dan g

<html>

<body>


var str="Is this all there is?";

var patt1=/is/g;


</script>

</body>

</html>

Contoh Penggunaan Modifier g


9.1.3. ADVANCED

Browser Detection. Javascript memungkinkan kita untuk mendeteksi jenis rowser yang digunakan oleh

pengguna. Sehingga di satu hal tertentu jika kita tidak mengijinkan halaman web kita dibuka dengan browser

lama oleh pengguna, maka dengan mudah kita bisa melakukannya dengan javascript. Ataupun kita ingin

ada perlakuan khusus, untuk jenis browser tertentu. Semeanya itu bisa kita lakukan dengan memanfaatkan

Navigation Object pada browser pengguna.

Javascript Form Validation. Javacsript bisa digunakan untuk mengecek validasi input pada form. Sebelum isi

form dikirim ke server, mengecek validasi input menjadi hal yang sangat penting. Karena untuk mencegah

ketidak akurat data sewaktu dimasukkan ke database server nantinya. Hal – hal yang sering cek validasi

yaitu :

Mengecek bahwa seluruh form tidak kosong

Mengecek user memasukkan pola e-mail yang valid

Mengecek user memasukkan tanggal yang benar

Mengecek user tidak boleh memasukkan nomor pada field khusus teks

Required Fields. Ada field tertentu dalam form yang wajib di isi oleh user, jika user tidak memasukkannya (

membiarkan kosong ) maka form tidak bisa terkirim. Untuk melakukan hal ini perhatikan contoh skrip berikut

:

<html>

<body>


document.write("Browser CodeName: " + navigator.appCodeName);

document.write("<br /><br />");

document.write("Browser Name: " + navigator.appName);


document.write("Browser Version: " + navigator.appVersion);


document.write("Cookies Enabled: " + navigator.cookieEnabled);


document.write("Platform: " + navigator.platform);


document.write("User-agent header: " + navigator.userAgent);

</script>

</body>

</html>

Contoh Penggunaan Navigation Object untuk Mendeteksi Browser


Penjelasan :

onsubmit="return validasi(this)" = kondisi yang akan memanggil fungsi validasi, dan juga mengirimkan isi

form ke fungsi tersebut. Serta mengembalikan suatu nilai true dan false.

var emailValue=formIni.email.value; = mengambil isi dari field email yang telah dimasukkan user.

if (emailValue == "")

{alert("Field email belum terisi"); return false; } = melakukan pengecekan apakah kosong, jika kosong

tampilkan pesan Alert dan kembalikan nilai false, supaya proses submit form dihentikan.

else { return true; } = kembalikan nilai true supaya proses submit dilanjutkan

Email Validation. Untuk mengecek validasi email, ada beberapa hal yang akan kita lakukan terhadap field

email yaitu :

apakah isinya mengadung karakter @

apakah isinya mengadung tanda titik .

<html>

<head>


function validasi(formIni)

{

var emailValue=formIni.email.value;

if (emailValue == "")

{ alert("Field email belum terisi"); return false;

}

else

{ return true; }

}

</script>

</head>

<body>

<form action="target.htm" onsubmit="return validasi(this)" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

Contoh Penggunaan Required Fields


Penjelasan :

var karakter_at = formIni.email.value.indexOf("@") ; = dengan menambahkan fungsi indexOf untuk

melakukan pengecekan apakan di dalam isi field email yang dimasukkan user mengandung karakter (“@”).

Jika tidak ada maka akan menampilkan nilai -1

var tanda_titik = formIni.email.value.indexOf(".") ; = dengan menambahkan fungsi indexOf untuk melakukan

pengecekan apakan di dalam isi field email yang dimasukkan user mengandung tanda titik(“.”). Jika tidak

ada maka akan menampilkan nilai -1

if (karakter_at==-1 || tanda_titik==-1 ) = karena fungsi indexOf mengembalikan nilai -1 jika ia tidak

menemukan karakter @ dan tanda titik di dalam isi field email.

Javascript Animation. Javascript memungkinkan kita untuk membuat animasi dengan menggunakan gambar

dan tulisan. Trik yang paling sering digunakan adalah membuat perbedaan disetiap event (kodisi) yang

berbeda. Misalnya, kita ingin membuat sebuah element pada saat MouseOut berbeda tampilanya dengan

pada saat MouseOver. Contoh skripnya adalah sebagai berikut :

<html>

<head>


function validasi(formIni)

{

var karakter_at = formIni.email.value.indexOf("@") ;

var tanda_titik = formIni.email.value.indexOf(".") ;

if (karakter_at==-1 || tanda_titik==-1 )

{

alert("alamat email salah. Harus mengandung karakter @ dan tanda titik ");

return false;

}

else

{ return true; }

}

</script>

</head>

<body>

<form action="target.htm" onsubmit="return validasi(this)" method="post">

Email: <input type="text" name="email" size="30">

<input type="submit" value="Submit">

</form>

</body>

</html>

Contoh Penggunaan Email Validation


Penjelasan :

document.getElementById() = fungsi yang digunakan untuk mendapatkan selector id pada skrip HTML.

document.getElementById("b1").src ="image_over.gif"; = menggantikan nilai atribut src pada id b1 dengan

nilai “image_over.gif”

document.getElementById("kondisi").innerHTML = Kondisi sekarang = onMouseOver"; menemapilkan teks “

Kondisi sekarang = onMouseOver ” pada id kondisi pada skrip HTML.

Javascript Timing Events. Javascript memungkinkan kita untuk menjalankan fungsi – fungsi tertentu pada

saat – saat tertentu juga. Misalnya kita ingin menjalankan suatu fungsi setiap satu jam sekali atau membuat

halaman web akan berubah warnanya setiap 5 menit sekali. Ada dua method dalam javascript untuk

menangani Timing Events

setTimeout() = menjalankan suatu fungsi pada saat tertentu

clearTimeout() = mebatalkan prose setTimeout()

setTimeout Method

Sintaks

<html>

<head>


function mouseOver()

{

document.getElementById("b1").src ="image_over.gif";

document.getElementById("kondisi").innerHTML = "Kondisi sekarang = onMouseOver";

}

function mouseOut()

{

document.getElementById("b1").src ="image2.gif";

document.getElementById("kondisi").innerHTML = "Kondisi sekarang = onMouseOut";

}

</script>

</head>

<body>

<a href="#" target="_blank">

<img border="0" src="image.gif" id="b1" onmouseover="mouseOver()"

onmouseout="mouseOut()" />

</a>

<div id="kondisi"></div>

</body>

</html>

Contoh Penggunaan JavaScript Animation


javacsript statement = biasanya berisi nama fungsi yang ingin dijalankan

milliseconds = waktu / kapan fungsi akan dijalankan

Kita juga bisa melakukan perulangan berkali – kali atau istilahnya infinite loop. Di bawah ini adalah contoh

penggunaan Infinite loop dengan menggunakan setTimeout method.

Penjelasan :

var c=0; var t; = Menginisialisakan variable c dengan nilai 0. Mendeklarasikan variable t, untuk digunakan

setTimeout method

document.getElementById('txt').value=c; = tampilkan isi variable c pada selector id txt pada HTML.

<html>

<head>


var c=0; var t;

function hitunganMulai()

{

document.getElementById('txt').value=c;

c=c+1;

t=setTimeout("hitunganMulai()",1000);

}

</script>

</head>

<body>

<form>

<input type="button" value="Hitunga Mulai!" onClick="hitunganMulai()">

<input type="text" id="txt" />

</form>

</body>

</html>

Contoh Penggunaan Infinite Loop

<html>

<head>


function timeMsg()

{

var t=setTimeout("alert('3 detik!')",3000);

}

</script>

</head>

<body onload="timeMsg()">

</body>

</html>

Contoh Penggunaan setTimeout, menampilkan alert box setelah 3 detik

var t=setTimeout("javascript statement",milliseconds);


c=c+1; = Lakukan penambahan 1 pada variable c

t=setTimeout("hitunganMulai()",1000); = setiap 1 detik sekali panggil fungsi hitungMulai(). Fungsi

hitungMulai() adalah fungsi dimana baris kode ini berada. Jadi setiap kali pemanggilan fungsi maka baris

kode ini pun akan ikut dijalankan, jika kode ini dijalankan dia akan memanggil fungsi hitungMulai(). Dan

begitu seterusnya hingga tidak terbatas.

clearTimeout Method

sintaks

Untuk lebih memahami tentang penggunaan clearTimeout, perhatikan contoh berikut ini :

Penjelasan :

clearTimeout(t); = t adalah nama variable pada saat kita memanggil method setTimeout, yaitu pada baris


<html>

<head>


var c=0;

var t;

function hitunganMulai()

{

document.getElementById('txt').value=c;

c=c+1;


}

function hitunganSelesai()

{

clearTimeout(t);

}

</script>

</head>

<body>

<form>

<input type="button" value="Hitungan Mulai !!" onClick="hitunganMulai()">

<input type="button" value="Hitungan Selesai !!" onclick="hitunganSelesai()">

<input type="text" id="txt" />

</form>

</body>

</html>

Contoh Penggunaan clearTimout Method

clearTimeout(setTimeout_variable)


9.2. PENGGUNAAN JAVASCRIPT PADA WEBSITE

9.2.1. EXTERNAL STYLE SHEET

Skrip Javacript telah dibuat ke dalam satu file yang terpisah, bisa kita masukkan ke dalam halaman HTML,

dengan cara menempatkan skrip berikut pada taq antara <head> dan </head>.

9.2.2. INTERNAL STYLE SHEET

Untuk menulis skrip javacript di dalam satu halaman, lakukan dengan cara berikut dan tempatkan diantara

tag <head> dan </head>

9.2.3. INLINE STYLES

Inline style adalah menuliskan skrip javacript langsung pada tag HTML. Cara pemanggilannya adalah

memanfaatkan event mouse seperti onMouseOver, onMouseOut, dll yang dimiliki oleh setiap tag HTML.

contoh :

LATIHAN

Asisten praktikum akan memberikan anda sebuah file eksternal javascript. Analisa dan jelaskan fungsi

dan kegunaan dari javascript tersebut dengan membaca seluruh script dari file tersebut.

Coba gunakan file javascript tersebut dalam sebuah file HTML.

<a href=”#” onClick=”alert(‘ Anchor Clicked’);”> Klik Disini </a>

<taq_html onMouseOver=“javascript_statement”

onMouseOut=“javascript_statement” …… … … >


{

skrip …..

}

</script>

<script type="text/javascript"

src="nama_file_javascript.js"></script>

pengantar javascript

Documents