Post on 26-May-2019
Bahasa skrip yang ditempelkan pada kode HTML dan diproses di sisi klien. Dengan adanya bahasa ini, kemampuan dokumen HTML menjadi semakin luas atau dapat dikatakan untuk mambuat halaman web yang dinamis. Sebagai contoh, dengan menggunakan JavaScript dimungkinkan untuk memvalidasi masukan pada formulir sebelum dikirimkan ke server.
Program JavaScript dituliskan pada file HTML (.html atau .htm) dengan menggunakan tag kontainer <SCRIPT>.
tag kontainer adalah tag yang diawali dengan <NAMA TAG> dan diakhiri dengan </NAMA TAG>.
Contoh
<HTML> </HTML>
<HEAD> </HEAD>
<BODY> </BODY>
Struktur dari JavaScript adalah sbb :
<SCRIPT LANGUAGE = ”JavaScript”> <!- -
Penulisan kode javascript
// - - >
</SCRIPT>
Keterangan :
Kode <!- - // - - > umumnya disertakan dengan tujuan agar sekiranya browser tidak mengenali JavaScript maka browser akan memperlakukannya sebagai komentar sehingga tidak ditampilkan pada jendela browser.
Contoh
<html>
<head>
<title>Menampilkan tulisan</title>
</head>
<body>
<script language=”JavaScript”>
document.write(“<h1>Hallo</h1><br>”)
document.write(“Saya sedang belajar Java Script”)
</script>
</body>
</html>
Properti
Properti adalah atribut dari sebuah objek. Contoh, objek mobil punya properti warna mobil. Penulisan :
Nama_objek.nama_properti = nilai
window.defaultStatus = ”Selamat Belajar JavaScript”;
Metode
Metode adalah suatu kumpulan kode yang digunakan untuk melakukan sesuatu tindakan terhadap objek.
Penulisan :
Nama_objek.nama_metode(parameter)
document.write (”Hallo”)
Penanganan Kejadian
Penanganan kejadian (event handler) adalah sekumpulan kode yang akan dijalankan manakala pemakai melakukan suatu tindakan (biasa disebut dengan kejadian). Contoh kejadian adalah ketika pemakai mengklik tombol mouse atau ketika menutup jendela browser. Bentuk penanganan kejadian adalah seperti berikut ini : nama_kejadian="kumpulan kode"
Contoh kejadian adalah onMouseOver dan onMouseOut. Penanganan kejadian ini dapat diletakkan pada suatu link. Dalam hal ini onMouseOver adalah kejadian yang berlangsung saat penunjuk mouse menunjuk ke link dan onMouseOut adalah kejadian yang berlangsung saat penunjuk mouse tidak lagi menyorot link.
Contoh :
<A HREF = "www.detik.com"
onMouseOver = "window.status = `Anda menyorot link'; return true" onMouseOut = "window.status = " ; return true"> detik.com</A>
Pemakaian alert sebagai property window
Pemakaian metode dalam objek.
<HTML><HEAD><TITLE>Alert Box</TITLE></HEAD><BODY><SCRIPT LANGUAGE=“JavaScript”><!--window.alert(“Ini merupakan pesan untuk Anda”);//--></SCRIPT></BODY></HTML>
<HTML><HEAD><TITLE> Script JavaScript </TITLE></HEAD><BODY>Percobaan memakai JavaScript:<BR><SCRIPT LANGUAGE=“JavaScript”><!--document.write ("Selamat Mencoba JavaScript<BR>"); document.write ("Semoga sukses!");//-->
</SCRIPT></BODY></HTML>
Pemakaian prompt
Pembuatan fungsi dan cara pemanggilannya
<HTML><HEAD><TITLE>Alert Box</TITLE></HEAD><BODY><SCRIPT LANGUAGE=“JavaScript”><!--var nama = prompt("Siapa nama Anda?","Masukkannama anda"); document.write("Hai, " + nama);
//-->
</SCRIPT></BODY></HTML>
<HTML><HEAD><TITLE>Alert Box</TITLE></HEAD><BODY><SCRIPT LANGUAGE=“JavaScript”><!--function pesan(){alert ("memanggil javascript lewat body onload")}//-->
</SCRIPT></BODY></HTML>
Umumnya kesalahan yang sering terjadi pada kode JavaScript diakibatkan oleh hal-hal sebagai berikut :
1. Kesalahan karena penulisan huruf kapital dan huruf kecil.
2. Penggunaan tanda kutip yang tidak cocok.
3. Kesalahan dalam tag <SCRIPT>
• suatu nama yang digunakan untuk menyimpan nilai dan nilaiyang ada di dalamnya dapat diubah sewaktu-waktu.
• Pendeklarasian variabel pada JavaScript ditulis denganmenggunakan pernyataan var.
Contoh :
var nama = "sarah"; var nilai = 8;
var x, y, z = "9";
var alamat;
• JavaScript mengganggap semua variabel yang dideklarasikan di luar fungsi variabel global. Walaupun suatu variabel dapatdideklarasikan tanpa diberi nilai awal, sebaiknya hal seperti inidihindari.
• Variabel tidak dapat digunakan sebelum diberi sebuah nilai ataudideklarasikan secara eksplisit.
Contoh :
Document.write(nama);
Penamaan variabel harus mengikuti aturan-aturan sebagai berikut :
a. Penamaan variabel diawali dengan huruf atau tanda karakter garisbawah (_ ).
b. Nama variabel tidak boleh mengandung karakter spasi.
c. Karakter kedua dan seterusnya dapat berupa huruf, angka, ataukarakter garis bawah.
d. Penamaan variabel tidak boleh menggunakan kata kunci JavaScript.
e. Beberapa variabel yang bernama sama tidak dapat dimiliki dalamsebuah blok. Tetapi dapat digunakan asalkan variabel-variabeltersebut terletak dalam blok yang berbeda.
f. Sebaiknya penamaan variabel dibuat sesuai dengan apa yang disimpannya.
g. Huruf kapital dan huruf kecil dibedakan (CASE-SENSITIF)
JavaScript mempunyai tipe data, yaitu :
1. Bilangan atau Numerik - Misalnya : var A = 10;
2. String - Misalnya : "Sarwati Rahayu”
3. Nilai logika atau dikenal dengan istilah boolean. Nilainya berupatrue atau false. Misalnya : var nilai 1 = (nilai 2 < 100);
4. Null - Variabel yang tidak diinisialisasi. Misalnya : var total;
Fungsi paselnt() atau parseFloat() digunakan untuk Konversi tipedata string ke dalam tipe data numerik
Fungsi parselnt() adalah fungsi yang berguna untukmengkonversi string bilangan menjadi bilangan bulat.
fungsi parseFloat() adalah fungsi yang berguna untukmengkonversi string bilangan menjadi bilangan pecahan.
Dalam Java Script terdapat perintah function yang biasadigunakan untuk membagi program kedalam blok-blok perintah,dengan adanya blok-blok perintah tesebut maka akanmempermudah programmer dalam melakukan maintenance.
Bentuk perintah :
function nama-fungsi (parameter-list){
declarations and statements}
Ketentuan :
a. Nama fungsi harus valid dan unik
b. Parameter merupakan variabel yang dapat menerima argumen
c. Jumlah parameter harus sama dengan fungsi pemanggil
d. Parameter list bisa kosong
e. Declarations dan statements merupakan isi dari fungsi ataublock code
Contoh :<html>
<head>
<script language="JavaScript">
function a()
{alert("Terima kasih anda telah mengunjungi web kami");
}
</script>
</head>
<body>
<form>
<input type="button" value="Thank" onclick="a()">
</form>
</body>
</html>
Contoh :<html>
<head>
<script language="JavaScript">
<!--
function hitung()
{
var A,B;
A=parseFloat(document.data.nilai1.value);
B=parseFloat(document.data.nilai2.value);
document.data.hasil.value=A+B;
} //-->
</script>
</head>
<body>
<form name="data">
<table border="1" align="center">
<tr align="center" bgcolor="red">
<td colspan="2" bgcolor="#CC99FF">OPERASI PENJUMLAHAN</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Angka Pertama</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20" name="nilai1">
</td>
</tr>
<tr bgcolor="yellow">
<td bgcolor="#FFCCFF">Angka Kedua</td>
<td bgcolor="#FFCCFF">
<input type="text" size="20" name="nilai2">
</td>
<tr bgcolor="magenta" align="center">
<td>Hasil operasi</td>
<td>
<input type="text" size="20" name="hasil">
</td>
</tr>
<tr bgcolor="yellow" align="center">
<td colspan="2" bgcolor="#669999">
<input type="button" value="Hitung" onclick="hitung()">
</td>
</tr>
</table>
</form> </body> </html>
1. Perintah Kondisi
a. Perintah Ifpenulisan dari perintah if adalah sebagai berikut:
if (kondisi1) {
pernyataan1 }
[else {
pernyataan2}]
Jika hanya suatu perintah tunggal, tanda kurawal tidak diperlukan. Contoh berikut adalah perintah yang benar:
if (a==b) j=0
else j=1
Contoh :
<HTML> <HEAD>
<TITLE>Contoh if-else</TITLE>
</HEAD> <BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nilai = prompt ("Nilai (0-100) : ", 0);
var hasil = "";
if (nilai >= 60)
hasil = "Lulus";
else
hasil = "Tidak Lulus";
document.write("Hasil: " + hasil);
//-->
</SCRIPT>
</BODY>
</HTML>
a. Perintah Switch Casepenulisan dari perintah switch case adalah sebagai berikut:
switch (kondisi)
{
case hasilkondisi1 :
statement;
break;
case hasilkondisi2 :
statement
break;
default :
statement ;
break;
}
2. Perintah Perulangan
a. Perintah ForPerintah for pada JavaScript sama dengan yang ada di Java dan C. Perintah for mengulang suatu loop sampai kondisi menghasilkan evaluasi true atau loop keluar dengan perintah break. Syntax untuk perintah for adalah sebagai berikut : for ([ekspresi-awal;] [kondisi;] [ekspresi-penambah]) { pernyataan }Contoh :<html>
<head></head><body><script language="JavaScript"><!--for (i=1; i<=10; i++){document.write("Bilangan " + i + "<br>");}//--> </script> </body> </html>
b. Perintah WhilePada perulangan dengan WHILE, proses perulangan akan terus dikerjakan selama kondisi terpenuhi atau bernilai benar.Bentuk perintah WHILE :while (kondisi){pernyataan;
}Contoh :
<html>
<head>
</head>
<body>
<script language="JavaScript">
<!--
nilai=10;
i=1;
while (i <= nilai)
{
document.write("Bilangan " + i + "<br>");
i++;
}
//--> </script> </body> </html>
Sebuah variable pada JavaScript ternyata dapat disimpan lebihdari satu nilai. Nilai-nilai ini dikumpulkan dalam bentuk array.
Sebuah array dapat meyimpan daftar nol atau lebih nilai, yang dinyatakan dalam lingkupan kurung kotak atau disebut brackets ( [ ....] ). Sebagai contoh, ditunjukkan pada kode berikut :
Langkah pertama yaitu deklarasi variable "array1".
Nilai-nilai untuk array tersebut dimasukan didalam lingkupan kurung kotak, dan masing-masing nilainya dipisahkan dengan tanda koma.
var array1 = ["Rahma Nurlaila Ramadhani", "GHazian Fadly Azzamy", "Dafa Fauzan", "Nikita Nandya Saksana"] ;
Kemudian terdapat perintah-perintah yang berfungsi untuk menampilkan nilai-nilai yang termasuk dalam array tersebut. Masing-masing nilai-nilai didalam array tersebut diberi nomor index yang dimulai dari 0 (nol).
Jadi, untuk meng-akses nilai pertama didalam array, perlu meng-akses index yang ke-0 (nol), dan berturut-turut index ke 1, 2 dan 3 dan seterusnya jika ada.
document.writeln(array1[0]); document.writeln("<br>");document.writeln(array1[1]); document.writeln("<br>");document.writeln(array1[2]); document.writeln("<br>");document.writeln(array1[3]); document.writeln("<br>");
Output dari kode diatas adalah seperti gambar dibawah ini
<html><head><title>Latihan Array pada JavaScript</title><script type="text/javascript">var array1 = ["Rahma Nurlaila Ramadhani", "GHazian Fadly Azzamy", "Dafa Fauzan", "Nikita Nandya Saksana"] ;document.writeln(array1[0]); document.writeln("<br>");document.writeln(array1[1]); document.writeln("<br>");document.writeln(array1[2]); document.writeln("<br>");document.writeln(array1[3]); document.writeln("<br>");
document.writeln(array1[4]); document.writeln("<br>");</script><noscript>Teks ini muncul jika <i>browser</i> tidak dapat menangani JavaScript</noscript></head><body></body></html>
Dapat disimpulkan bahwa dengan meng-akses index ke 4, hal ini seakan-akan bahwa kita telah mendefinisikan/mendeklarasikan suatu index baru yang belum terinisialisasi dengan baik.
Deklarasi sebuah index baru namun belum terinisialisasi - hal ini membawa pada suatu pemikiran baru atau data baru.
Sebagai uji coba, ditambahkan baris perintah baru yang menyimpankan sebuah nilai baru pada index 4, dan kemudian data pada index 4 tersebut ditampilkan kembali pada browser. Kodenya akan berubah menjadi seperti berikut :
<html><head><title>Latihan Array pada JavaScript</title><script type="text/javascript">var array1 = [" Rahma Nurlaila Ramadhani", "GHazian Fadly Azzamy", "Dafa Fauzan", "Nikita Nandya Saksana"] ;document.writeln(array1[0]); document.writeln("<br>");document.writeln(array1[1]); document.writeln("<br>");document.writeln(array1[2]); document.writeln("<br>");document.writeln(array1[3]); document.writeln("<br>");array1[4] = "Nilai ke 5 index array ke 4" ;document.writeln(array1[4]); document.writeln("<br>");</script><noscript>Teks ini muncul jika <i>browser</i> tidak dapat menangani JavaScript</noscript></head><body></body></html>
Jika halaman web dengan kode diatas dijalankan pada browser, browser akan menampilkan hasilnya seperti ditunjukkan pada gambar berikut :
Dari hasil yang ditunjukkan pada gambar diatas, ditemukan bahwa nilaibaru ternyata dapat disimpan pada index baru, tanpa harus melakukandeklarasi ulang terhadap array-nya . Hal ini menjadi bukti bahwa array pada JavaScript bersifat dinamis.