pengantar javascript
Post on 22-Oct-2015
76 Views
Preview:
DESCRIPTION
TRANSCRIPT
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”);
Modul Pratikum Matakuliah Dasar-dasar Web IX- 2
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 */
Modul Pratikum Matakuliah Dasar-dasar Web IX- 3
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>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 4
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>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 5
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<script type="text/javascript">
alert("Hello World");
</script>
</head>
<body>
</body>
</html>
Contoh Penggunaan Alert Box
Modul Pratikum Matakuliah Dasar-dasar Web IX- 6
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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
}
Modul Pratikum Matakuliah Dasar-dasar Web IX- 7
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>
<script type="text/javascript">
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
}
Modul Pratikum Matakuliah Dasar-dasar Web IX- 8
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>
<script type="text/javascript">
var str="Hello world!";
document.write(str.toUpperCase());
</script>
</head>
<body>
</body>
</html>
Contoh Penggunaan Method
<html>
<head>
<title>Penggunaan Property</title>
<script type="text/javascript">
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>
Modul Pratikum Matakuliah Dasar-dasar Web IX- 9
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>
<script type="text/javascript">
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>
<script type="text/javascript">
var d=new Date();
document.write(d);
</script>
<body>
</body>
</html>
Contoh Penggunaan Objek Tanggal dan Waktu
var namavariable= new Date();
Modul Pratikum Matakuliah Dasar-dasar Web IX- 10
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>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 11
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”;
namavariable[1]=“data ke-2”;
namavariable[2]=“data ke-3”;
var namavariable = new Array();
<html>
<head>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 12
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]);
Modul Pratikum Matakuliah Dasar-dasar Web IX- 13
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 14
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>
<script type="text/javascript">
var str="Is this all there is?";
var patt1=/is/gi;
document.write(str.match(patt1));
</script>
</body>
</html>
Contoh Penggunaan Modifier i dan g
<html>
<body>
<script type="text/javascript">
var str="Is this all there is?";
var patt1=/is/g;
document.write(str.match(patt1));
</script>
</body>
</html>
Contoh Penggunaan Modifier g
Modul Pratikum Matakuliah Dasar-dasar Web IX- 15
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>
<script type="text/javascript">
document.write("Browser CodeName: " + navigator.appCodeName);
document.write("<br /><br />");
document.write("Browser Name: " + navigator.appName);
document.write("<br /><br />");
document.write("Browser Version: " + navigator.appVersion);
document.write("<br /><br />");
document.write("Cookies Enabled: " + navigator.cookieEnabled);
document.write("<br /><br />");
document.write("Platform: " + navigator.platform);
document.write("<br /><br />");
document.write("User-agent header: " + navigator.userAgent);
</script>
</body>
</html>
Contoh Penggunaan Navigation Object untuk Mendeteksi Browser
Modul Pratikum Matakuliah Dasar-dasar Web IX- 16
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>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 17
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>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 18
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>
<script type="text/javascript">
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
Modul Pratikum Matakuliah Dasar-dasar Web IX- 19
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>
<script type="text/javascript">
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>
<script type="text/javascript">
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);
Modul Pratikum Matakuliah Dasar-dasar Web IX- 20
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
t=setTimeout("hitunganMulai()",1000);
<html>
<head>
<script type="text/javascript">
var c=0;
var t;
function hitunganMulai()
{
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("hitunganMulai()",1000);
}
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)
Modul Pratikum Matakuliah Dasar-dasar Web IX- 21
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” …… … … >
<script type="text/javascript">
{
skrip …..
}
</script>
<script type="text/javascript"
src="nama_file_javascript.js"></script>
top related