Apa yang bisa dilakukan JavaScript :
- Menciptakan halaman web yang lebih interaktif dan menarik.
- Dapat memberikan text/content yang dinamis kedalam halaman HTML.
- Dapat memberikan reaksi tertentu pada suatu event.
- JavaScript bisa digunakan untuk validasi data pada form HTML sebelum dikirim ke server. Contoh pada validasi e-mail.
- Mendeteksi banyaknya pengunjung pada browser.
- JavaScript juga sering digunakan sebagai trik, misalnya memberikan efek mouseover pada suatu image atau link. Dengan efek ini, suatu gambar dapat berubah ketika mouse didekatkan ke gambar tersebut dan masih banyak lagi.
- Menggunakan blok awal "{" dan blok akhir "}".
- Case Sensitive artinya membedakan penamaan variable dan fungsi yang menggunakan huruf besar dan huruf kecil.
- Extension umumnya menggunakan "*.js".
- Setiap statement dapat diakhiri dengan ";" sebagaimana dengan C++, tetapi dapat juga tidak.
- Jika tidak didukung dalam browser versi lama, Scriptnya dapat disembunyikan diantara tag "<!--" dan "//-->".
- Jika program dalam satu baris terlalu panjang dapat disambung ke baris berikut dengan karakter "\".
JavaScript dapat dituliskan dalam sebuah dokumen HTML dengan 2 cara :
- Sebagai statement dan fungsi menggunakan tag SCRIPT.
- Sebagai pengontrol perintah menggunakan tag HTML.
Tag SCRIPT yang dituliskan dalam HTML dituliskan sebagai berikut :
<SCRIPT> |
JavaScript statements................ |
</SCRIPT> |
SCRIPT tersebut belum menunjukkan bahasa JavaScript, dan untuk memasukkan bahasa JavaScriptnya tinggal menggunakan atribut LANGUAGE = JavaScript, lengkapnya seperti berikut :
<SCRIPT LANGUAGE="JavaScript"> |
JavaScript statements................ |
</SCRIPT> |
- Internal dalam file HTML
Pada umumnya kita meletakkan tag <script> diantara bagian kepala dari dokumen HTML, yaitu bagian antara tag <head> dan </head>. Pemanggilan fungsi JavaScript (atau disebut juga event) diletakkan di bagian badan dokumen HTML atau bisa kita sebut diantara tag <body> dan </body>.
- Menggunakan file ekstern
Cara berikutnya adalah menuliskan kode program JavaScript dalam suatu file teks dan kemudian file teks yang berisi kode JavaScript dipanggil dari dalam dokumen HTML (khusus Netscape mulai versi 3 keatas).
Kode yang kita sisipkan ke dalam dokumen HTML adalah sebagai berikut :
<SCRIPT language="JavaScript" SRC="url/file.js"> </SCRIPT>
Dimana url/file.js adalah lokasi dan nama file yang berisi kode JavaScript, jika perintah tambahan SRC tidak disertakan maka tag SCRIPT akan mencari kode yang terletak dalam tag SCRIPT.
Contoh :
Simpan dengan nama "luar.js"
window.status="selamat semoga sukses... ";
|
Simpan dengan nama "eksternal.html"
<html>
<head>
<scriptlanguage="javascript"src="luar.js"></script>
</head>
<body>
<p>Ini contoh JavaScript dari luar<br />
<b>Lihat pojok kiri bawah</b></p>
</body>
</html>
|
Contoh penggunaannya bisa seperti di bawah ini :
<SCRIPT language="javascript"> |
<!-- letakkan komentar di sini //--> |
</SCRIPT> |
JavaScript mendukung dua bentuk format untuk komentar :
- Komentar satu baris, diawali dengan suatu double slash (//)
- Komentar banyak baris, diawali dengan suatu /* dan diakhiri dengan suatu */
Contoh :
Simpan dengan nama "cek.html"
<html>
<body>
<NOSCRIPT>
Halaman ini menggunakan program JavaScript,
Browser anda belum mendukungnya..!!
</NOSCRIPT>
<SCRIPT language="javascript">
document.write ("Browser yang ini sudah mendukung JavaScript dengan baik")
</SCRIPT>
</body>
</html>
|
Dengan tag <NOSCRIPT> ini minimal ada pemberitahuan dari browser bahwa halaman yang dibuka mengandung program JavaScript, dan memberitahukan bahwa browser yang digunakan belum mendukungnya.
Catatan :
Jika browser sudah mendukung JavaScript dan dinonaktifkan maka JavaScript yang kita buat tidak berjalan.
|
- Numerik
- Integer (bilangan bulat)
- Float (bilangan desimal)
- String (karakter, angka, tanda baca)
- Boolean (bernilai true atau false)
Operator
|
Kegunaan
|
Prioritas
|
+
|
Penjumlahan
|
3
|
-
|
Pengurangan
|
3
|
*
|
Perkalian
|
2
|
/
|
Pembagian
|
2
|
%
|
Sisa Pembagian
|
2
|
++
|
Penaikan
|
1 (Kalau terletak di depan)
|
--
|
Penurunan
|
1 (Kalau terletak di depan)
|
Operator
|
Contoh
|
Ekuivalen dengan
|
=
|
x=y
|
x=y
|
+=
|
x+=y
|
x=x+y
|
-=
|
x-=y
|
x=x-y
|
*=
|
x*=y
|
x=x*y
|
/=
|
x/=y
|
x=x/y
|
%=
|
x%=y
|
x=x%y
|
Operator
|
Penjelasan
|
Contoh
|
==
|
Sama dengan
|
5==8
|
!=
|
Tidak sama dengan
|
5!=8
|
>
|
Lebih besar dari
|
5>8
|
<
|
Lebih kecil dari
|
5<8
|
>=
|
Lebih besar atau sama dengan
|
5>=8
|
<=
|
Lebih kecil atau sama dengan
|
5<=8
|
Operator
|
Penggunaan
|
&&
|
And
|
||
|
Or
|
!
|
Not
|
Contoh :
Hasil :
- Nama variabel harus dimulai oleh satu huruf (huruf besar maupun huruf kecil) atau satu karakter "_".
- Nama variabel bisa terdiri dari huruf huruf, angka angka atau karakter "_" dan "&" (spasi kosong tidak diperbolehkan).
- Nama variabel tidak boleh memakai nama nama berikut ini (reserved oleh program):
- abstract
- boolean, break, byte
- case, catch, char, class, const, continue
- debugger, default, delete, do, double
- else, export, extends
- Dan lain lain.
Perhatian !!
JavaScript bersifat "Case Sensitive" (membedakan nama variabel antara huruf besar dan huruf kecil)
|
- Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dangan nama variabel dan nilai dari variabel.
Contoh :
var coba = "hello" - Implisit : dengan menuliskan secara langsung nama dari variabel dan diikuti nilai dari variabel.
Contoh :
coba = "hello"
- Lokal : Jika dideklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu, maka variabel itu hanya bisa diakses dari dalam fungsi tersebut, dan artinya variabel ini tidak berguna bagi fungsi fungsi yang lain.
- Global : Jika dideklarasikan di bagian awal dari script program, yang artinya sebelum pendeklarasian semua fungsi, maka semua fungsi di dalam program bisa mengakses variabel ini.
- Objek paling besar adalah objek window dari browser.
- Di dalam objek window, ada satu objek yang ditampilkan dalam bentuk sebuah halaman, kita sebagai objek dokumen atau document.
- Halaman berisi banyak objek seperti formula, image, dll.
Properti dapat diberi nilai, penulisannya :
Contoh :
Simpan dengan nama "status.html"
<html>
<head>
<title>Properti defaultStatus</title>
</head>
<body>
<h3>Tes defaultStatus</h3>
<p>Lihat di pojok kiri bawah...^^</p>
<script language="javascript">
<!--
window.defaultStatus="Selamat belajar interaktif web";
//-->
</script>
</body>
</html>
|
Penjelasan :
Contoh :
Simpan dengan nama "metode.html"
<html>
<head>
</head>
<body>
<script language="javascript">
document.write("<h2>Semangat ^^ !!</h2>");
</script>
</body>
</html>
|
Penjelasan :
Beberapa contoh event handler yang sering digunakan antara lain :
Event
|
Event akan dijalankan ketika...
|
onMouseover
|
User meletakkan kursor mouse diatas suatu elemen.
|
onFocus
|
User memberikan focus kepada suatu elemen.
|
onBlur
|
Elemen kehilangan fokus, artinya user melakukan klik diluar elemen itu.
|
onChange
|
User memodifikasi isi dari data dalam satu field data.
|
onClick
|
User melakukan klik mouse terhadap satu elemen yang berhubungan dengan event.
|
onLoad
|
Navigator user meload/memanggil suatu halaman.
|
onSubmit
|
Melakukan klik tombol submit.
|
onMouseout
|
Kursor mouse meninggalkan posisinya dari atas suatu elemen.
|
onReset
|
Menghapus data pada suatu form dengan bantuan satu tombol reset.
|
Contoh :
Mengimplementasikan Event Handler, simpan dengan nama "event.html"
<html>
<head></head>
<body>
<input type="text" size="30" onFocus="window.status='Silakan mengisi kotak';">
<br>
<input type="button" value="Lihat tanggal" onMouseover="window.status='Lihat tanggal hari ini'; return true;" onClick="alert('Anda menekan tombol');">
</body>
</html>
|
Saat mouse focus pada input text |
Saat mouse berada di atas tombol |
Event saat tombol di klik |
Sedangkan untuk while
Contoh penggunaan Switch Case, simpan dengan nama "kendali.html"
<html>
<head>
<title>switch</title>
</head>
<body>
<script language="javascript">
<!--
var tanggal = new Date();
var kode_hari = tanggal.getDay();
var nama_hari = "";
switch(kode_hari) {
case 0:
nama_hari = "Minggu";
break;
case 1:
nama_hari = "Senin";
break;
case 2:
nama_hari = "Selasa";
break;
case 3:
nama_hari = "Rabu";
break;
case 4:
nama_hari = "Kamis";
break;
case 5:
nama_hari = "Jumat";
break;
case 6:
nama_hari = "Sabtu";
break;
}
document.write("Hari ini hari " + nama_hari);
document.write(", tanggal " + tanggal.getDate() + "/" + (tanggal.getMonth() + 1) + "/" + tanggal.getYear());
//-->
</script>
</body>
</html>
|
Pemanggilan fungsi : nama_dari_fungsi();
Contoh :
Mengimplementasikan fungsi dengan IF ELSE, simpan dengan nama "fungsi_if.html"
<html>
<head>
<title>Fungsi dengan IF</title>
</head>
<body>
<table>
<form name="fungsi_if"
action="fungsi.html"
method="post">
<tr>
<td>Masukkan nilai</td>
<td>:</td>
<td>
<input type="text"
name="angka">
</td>
</tr>
<tr>
<td colspan="3">
<input type="button"
name="tombolProses"
value="Cek Nilai"
onClick="cekNilai()">
</td>
</tr>
</form>
</table>
<script language="javascript">
function cekNilai() {
if (document.fungsi_if.angka.value > 65)
document.write("Selamat anda LULUS");
else
document.write("Anda tidak LULUS");
}
</script>
</body>
</html>
|
Contoh :
Simpan dengan nama "alert.html"
<html>
<head></head>
<body>
<script language="javascript">
window.alert("Terima Kasih !!");
</script>
</body>
</html>
|
Contoh :
Simpan dengan nama "confirm.html"
<html>
<head></head>
<body>
<script language="javascript">
var r=window.confirm("Silakan tekan tombol !!");
if (r==true)
{
document.write("Anda pilih OK");
}
else
{
document.write("Anda pilih Cancel");
}
</script>
</body>
</html>
|
Contoh :
Simpan dengan nama "prompt.html"
<html>
<head></head>
<body>
<script language="javascript">
var nama=prompt("Masukkan nama anda !","user");
if (nama!=null && nama!=""){
document.write("Hallo " + nama + " ^_^");
}
</script>
</body>
</html>
|
JavaScript pada validasi buku tamu, simpan dengan nama "validasi.html"
<html>
<head>
<title>Buku Tamu</title>
<script type="text/javascript" language="javascript">
function validate() {
var a=document.getElementById("email").value.indexOf("@");
var fname=document.getElementById("fname").value;
var i=document.getElementById("isi").value;
submitOK="true";
if(fname.length==0){
alert("Silakan isi nama !");
}
if(fname.length>10){
alert("Nama tidak boleh melebihi 3 karakter !");
submitOK="false";
}
if(a==-1){
alert("bukan email yang valid !");
submitOK="false";
}
if(i.length==0){
alert("Silakan isi pesan !");
}
if(submitOK=="false"){
return false;
}
}
</script>
</head>
<body>
<form action="validasi.html" onsubmit="return validate()">
<table width="42%" border="0">
<tr>
<td width="31%">
Nama (max 10 karakter)
</td>
<td width="2%">
:
</td>
<td width="67%">
<input name="text" type="text" id="fname" size="20">
</td>
</tr>
<tr>
<td>
e-mail
</td>
<td>
:
</td>
<td>
<input name="text2" type="text" id="email" size="20">
</td>
</tr>
<tr>
<td>
Pesan
</td>
<td>
:
</td>
<td>
<textarea rows="5" cols="20" id="isi"></textarea>
</td>
</tr>
<tr>
<td>
<input name="submit" type="submit" value="Submit">
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
|
*.:。✿ Don't forget to come back again ✿.。.:*
Visit Wahyudi Blog !
Sumber : Dikutip dari modul praktikum Pemrograman Web T.Informatika UII.
wah.....
BalasHapuspostingan yg bagus.....
:120
Domain & Hosting Murah hanya di Rawahosting.com
bener2 posting yang komplit plit plit.. bagus sekali.. Terima kasih..
BalasHapusLanjutgan! :115
Terima kasih sudah berbagi ilmu javascripnya,... blog nya bagus banget nih mas
BalasHapusmisal namanya "ODIN"
BalasHapusmenampilkan alert nama ODIN bagaimana yah.
mengambil valuenya seperti apa?
terima kasih. dan mohon bantuan secepatnya http://wahyudikn.files.wordpress.com/2009/08/th_008_.gif
@ Anonymous...
BalasHapusKalau mau menampilkan alert nama ODIN tinggal tulis aja :
window.alert("Nama saya ODIN");
Ntar keluar alert "Nama saya ODIN" waktu loading page. (seperti contoh diatas)
jadi mau ngambil berdasarkan nama yang diketik di form tersebut.
BalasHapusbukan yang seperti itu.
semua datanya di simpan di database kan(form contoh)?
postinganx bner2 m'bntu...
BalasHapusmksh yahh gan..
Iya, sama sama... ^^
HapusSetau saya sih gak ada pengaruhnya ke SE.
BalasHapusKarena spider dari SE hanya bertugas mencari konten yang ditampilkan ke browser saja, sedangkan tag <NOSCRIPT> hanya untuk memberi tahu kalau browser yang digunakan tidak mendukung JavaScript.
wah Lumayan nih infonya!!!!
BalasHapus