Materi Tentang JAVASCRIPT
JavaScript adalah bahasa yang berbentuk kumpulan skrip yang pada fungsinya berjalan pada suatu dokumen HTML, bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah-perintah di sisi user, yang artinya di sisi browser bukan di sisi server web. Secara fungsional, JavaScript digunakan untuk menyediakan akses script pada objek yang dibenamkan ( embedded ). Contoh sederhana dari penggunaan JavaScript adalah membuka halaman pop up, fungsi validasi pada form sebelum data dikirimkan ke server, merubah image kursor ketika melewati objek tertentu.
perbedaan java sript dan java :
JavaSript |
Java |
| Bahasa yang diintepresentasikan langsung oleh browsser | Bahasa yang setengah kompilasi dan memerlukan java virtual Machine untuk menterjemahkannya |
| Kode integrasi dangan HTML | Kode(applet) terpisah dari dokumen HTML, dipanggil pada saat membuka dokumen HTML |
| Bahasa dengan karakteristik yang terbatas | Bahasa dengan karakteristik yang luas (pendeklararian jenis variable) |
| Hubungan dinamis, referensi dari obyek diverivikasi pada saat loading | Hubungan statis, obyek harus ada pada saat program di loading (di kompilasi) |
| Kode program bisa diakses | Kode program tersembunyi |
Bentuk skrip dari JavaScript
Skrip dari JavaScript terletak di dalam dokumen HTML. Kode tersebut tidak akan terlihat dari dalam jendela navigator anda, karena diantara tag tertentu yang memerintahkan navigator untuk memperlakukan bahwa skrip tersebut adalah skrip dari JavaScript.Contoh dari skrip yang menunjukkan bahwa skrip tersebut adalah skrip dari JavaScript adalah sebagai berikut:
<SRIPT language=”Javasript”>
Letakkan sript anda disini
</SRIPT>
<HTML>
<HEAD>
<TITLE>Skrip Javascript</TITLE>
</HEAD>
<BODY>
Percobaan memakai javaScript:<BR>
<SCRIPTLANGUAGE=”JavaScrip”>
<!–
document.write(“Sealamat Mencoba JavaScript<BR>”);
dokumen.write(“Semoga Sukses”);
//à
</SCRIPT>
</BODY>
</HTML>
Memberikan Komentar Dalam JavaScript
Agar script tidak dibaca sebagai skrip, akan tetapi dibaca sebagai komentar dan tidak akan dieksekusi sebagai program. Contohnya adalah sebagai berikut :
<SCRIPT language=”JavaSrcipt”>
<!–
Letakkan script anda disini
//à
</SCRIPT>
Kegunaannya antara lain adalah :
- Mengingatkan kita akan bagian-bagian khusus didalam skrip tersebut, jika kita ingin merubah sesuatu di dalamnya.
- Membuat orang yang tidak mengerti skrip anda, menjadi mengerti dengan petunjuk-petunjuk yang anda buat melalui komentar, kecuali anda tidak mau mensharing program yang anda miliki.
Sebuah objek tersusun atas properti, metode, dan penanganan kejadian.
- Properti
- Adalah atribut dari sebuah objek.
- Contoh objek dalam JavaScript yaitu window.Objek ini memiliki banyak property. Salah satu diantaranya adalah defaultStatus. Properti ini menyatakan baris status yang terdapat pada jendela browser.
- Untuk mengakses sebuah property, perlu penulisan dengan bentuk sebagai berikut; nama_objek.nama_properti,
- Contoh : Nama objek Nama properti
Properti dapat diberi nilai melalui bentuk penugasan berikut:
Objek.properti=nilai
Contoh : window.dafaultStatus=”Selamat belajar JavaScript”;
<HTML>
<HAED>
<TITLE>Properti defaultStatus</TITLE>
</HEAD>
<BODY>
<H1>Tes defaultStatus</H1>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Window.defaultStatus=”Selamat belajat JavaScript”;
//à
</SCRIPT>
</BODY>
</HTML>
Window.defaultStatus
- Metode
Contoh : : Nama objek Nama properti
Document.write(“Halo”)
parameter
Jika sebuah kode tidak melibatkan parameter, tanda kurung buka dan tutup harus disertakan. Contoh : window.focus()
- Penanganan Kejadian (Event handler)
Nama_kejadian=”kumpulan kode”
Kumpulan kode berisi sebuah pernyataan, antar pernyataan dipisah dengan ;.
Contoh kejadian adalah onMouseOver (ketika penunjuk mouse menunjuk ke link) dan onMouse Out (ketika penunjuk mouse tidak lagi menyorot link).
Contoh Penanganan Kejadian
<HTML>
<HEAD>
<TITLE>Kejadian</TITLE>
</HEAD>
<BODY>
<H1>Tes Kejadian</H1>
<P>Cobalah letakkan penunjuk mouse ke link berikutdan perhatikan isi baris status. Kemudian pindahkan penunjuk mouse dari link berikut dan perhatikan isi baris status
</P>
<A HREF=”www.fujitsu.com”
onMouseOver=”window.status=’Anda menyorot link, lho’;return true”
onMouseOut=”window.status=”;return true”>fujitsu</A>
</BODY>
</HTML>
a. Menangani Pemasukan Data
<HTML>
<HEAD>
<TITLE>Pemasukan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var nama=prompt(“Siapa nama anda?”);
Document.write(“Hai,”+nama);
//– >
</SCRIPT>
</BODY>
</HTML>
b. Mengenal Jendela Peringatan
Jika karena sesuatu hal anda ingin memberikan pesan kepada pemakai, anda bisa menyajikannya dalam bentuk kotak dialog yang disebut Alert Box.
<HTML>
<HEAD>
<TITLE>Alert Box</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Window.alert(“Ini merupakan pesan untuk anda”);
//– >
</SCRIPT>
</BODY>
</HTML>
c. Mengenal Jendela Konfirmasi
<HTML>
<HEAD>
<TITLE>Konfirmasi</TITLE>
</HEAD>
</BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Var jawaban=window.comfirm(“anda ingin meneruskan?”);
Document.write(“Jawaban Anda:”+jawaban);
//– >
</SCRIPT>
</BODY>
</HTML>
d. Mengenal Hirarki Objek
Salah satu objek yang mempunyai kedudukan tertinggi dalam JavaScript adalah window. Objek ini sendiri memiliki objek lain; antara lain yaitu statusbar dan document. Dengan demikian untuk mengakses document diperlukan penulisan sebagai berikut :
Nama objek objek ini merupakan properti bagi window
Window.document.write(“halo”)
Metode milik objek document
|
|
|
Konsep Variabel Dalam JavaScript
Variabel adalah suatu objek yang berisi data-data, yang mana dapat dimodifikasiselam pengeksekusian program. Di JavaScript kita bias memberikan nama variable dengan criteria berikut ini :
- Nama variable harus dimulai oleh satu huruf (huruf besar maupun kecil) atau satu karakter”_”.
- Nama variable bias terdiri dari huruf-huruf, angka-angka atau karakter_dan & (spasi kosong tidak diperbolehkan).
- Nama variable tidak boleh memakai reserved word.
Nama variable yang benar |
Nama variable yang tidak benar | Alasan |
| Variabel | Nama Dari Variabel | Ada spasi kosong |
| Nama_Dari_Variabel | 123Nama_Dari_Variabel | Dimulai dengan angka |
| nama_dari_variabel | andry@yahoo.com | Karakter @ |
| Nama_dari_variabel 123 | Nama-Dari-Variabel | Karakter - |
| _707 | Transient | Reserved word |
Mendeklarasikan Variabel
Deklarasi variabel di JavaScript dapat kita lakukan dengan dua cara :
- Eksplisit : dengan menuliskan kata kunci var kemudian diikuti dengan nama variable dan nilai dari variable : var test=”halo”.
- Implisit : dengan menuliskan secara langsung nama dari variable dan diikuti nilai dari variabel : test=”halo”.
Navigator secara otomatis akan memperlukan pernyataan itu sebagai deklarasi dari sebuah variable. Pengaksesan variable bergantung lokasi dimana dia dideklarasikan :
Jika dia didelkarasikan di bagian awal dari skrip program, yang artinya sebelum pendeklarasian semua fungsi, maka semua fungsi di dalam program bias mengakses variabel ini, dan variable ini menjadi variabel global.
Jika dia dideklarasikan dengan menggunakan kata kunci var di dalam suatu fungsi tertentu, maka variable itu hanya bias diakses dari dalam fungsi tersebut, dan artinya variable ini tidak berguna bagi fungsi-fungsi yang lain, dan kita sebut variabel ini menjadi variabel local.
Contoh Mendeklarasikan Variabel
<HTML>
<HEAD>
<TITLE>Contoh deklarasi variabel</TITLE>
</HEAD>
<BODY>
<SCRIPT language=”JavaScript”>
<!–
Var VariabelKu;
Var VariabelKu2=3;
VariabelKu=2;
Document.write(VariabelKu*variabelKu2);
//à
</SCRIPT>
</BODY>
</HTML>
Contoh Variabel Lokal dan Global
<HTML>
<HEAD>
<TITLE>Contoh variabel Lokal dan Global</TITLE>
</HEAD>
<BOBY>
<SCRIPT language=”Javascript”>
<!–
var a=12;
var b=4;
Function Perkalian Dengan2(b)
{var a=b*2;return a;}
Document.write(“Dua kali dari”,b,” adalah”,Perkalian Dengan2(b));
document.write(“Nilai dari a adalah “,a);
//à
</SCRIPT>
</BODY>
</HTML>
Konversi jenis variabel
Meskipun JavaScript memungkinkan pengaturan perubahan jenis variabel secara transparan, kadang-kadang kita perlu juga untuk melakukan konversi jenis variabel secara paksa. Ada 2 Fungsi dasar yang memungkinkan merubah jenis variabel yang dilewatkan dengan parameter tertentu :
- Parselnt()
Parselnt(string[,basis]);
Contoh :
Var a=”123”; var b=”456”;
Document.write(a+b,”<BR>”);//hasil6
Document.write(parselnt(a)+parselnt(b),”<BR;// hasil 579
- parseFloat()
parseFloat(string);
tabel contoh tentang penggunaan fungsi parseFloat()
Contoh |
Hasil |
| parseFloat(“128.34”); | 128.34 |
| parseFloat(“128,34”); | 128 |
| parseFloat(“12.3E-6”); | 0.0000123 |
| parseFloat(“halo”); | NaN |
| parseFloat(“24.568Halo38”); | 24.568 |
| parseFloat(“halo38.24”); | NaN |
| parseFloat(“AFBBEF”); | NaN |
| parseFloat(“0284”); | 284 |
| parseFloat(“0xAB882F”); | 11241519 |
Struktur Kondisional
Adalah intruksi-insruksi yang memungkinkan kita untuk melakukan test apakah satu kondisi benar atau tidak, dan memungkinkan juga terjadinya proses iterasi didalam skrip yang kita buat.
- Pernyataan if
{daftar intruksi atau blok intruksi}
Beberapa catatan penting tentang intruksi ini :
- Kondisi harus terletak diantara dua tanda kurung.
- Kita bias meletakkan beberapa kondisi dengan menggunakan operator AND atau OR
- Pernyataan if..else
Sintaks lengkap dari instruksi ini adalah :
If(kondisi syarat1 terpenuhi) {
Daftar instruksi atau blok instruksi
}
Else {
Daftar instruksi/blok instruksi yang lain
}
- Pernyataan While
While (kondisi syarat terpenuhi) {
daftar instruksi-instruksi atau blok instruksi
}
Contoh pernyataan while
<HTML>
<HEAD>
<TITLE>Contoh while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Var bilangan=0;
While (bilangan <5) {
document.write(“JavaScript<BR;
bilangan++;
}
//à
</SCRIPT>
</BODY>
</HTML>
- Pernyatan do…while
do {
blok pernyataan
} while (kondisi);
Contoh pernyataan do .. while
<HTML>
<HEAD>
<TITLE>Contoh do while</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
Var bilangan=1;
do {
document.write(bilangan +”<BR>”);
bilangan++;
} while (bilangan <6);
//à
</SCRIPT>
</BODY>
</HTML>
- Pernyataan For
for (penghitung; kondisi loop berhenti; modifikasi penghitung){
daftar intruksi-instruksi atau blok instruksi
}
Contoh pernyataan For
<HTML>
<HEAD>
<TITLE>Contoh for</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE=”JavaScript”>
<!–
var bilangan=0;
for (bilangan=1; bilangan <=5;
bilangan++)
document.write(bilangan + “<BR>”);
//à
</SCRIPT>
</BODY></HTML>
Tidak ada komentar:
Posting Komentar