Siti Maesyaroh, M.Kom.

Transkripsi

1 Siti Maesyaroh, M.Kom.

2 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>

3 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.

4 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>

5 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 )

6 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 = " onmouseover = "window.status = `Anda menyorot link'; return true" onmouseout = "window.status = " ; return true"> detik.com </A>

7 Pemakaian alert sebagai property window <HTML><HEAD> <TITLE>Alert Box</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE= JavaScript >  </SCRIPT></BODY></HTML> Pemakaian metode dalam objek. <HTML><HEAD> <TITLE> Script JavaScript </TITLE> </HEAD> <BODY> Percobaan memakai JavaScript:<BR> <SCRIPT LANGUAGE= JavaScript >  </SCRIPT></BODY></HTML>

8 Pemakaian prompt <HTML><HEAD> <TITLE>Alert Box</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE= JavaScript >  </SCRIPT></BODY></HTML> Pembuatan fungsi dan cara pemanggilannya <HTML><HEAD> <TITLE>Alert Box</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE= JavaScript >  </SCRIPT></BODY></HTML>

9 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>

10 suatu nama yang digunakan untuk menyimpan nilai dan nilai yang ada di dalamnya dapat diubah sewaktu-waktu. Pendeklarasian variabel pada JavaScript ditulis dengan menggunakan 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 dapat dideklarasikan tanpa diberi nilai awal, sebaiknya hal seperti ini dihindari. Variabel tidak dapat digunakan sebelum diberi sebuah nilai atau dideklarasikan secara eksplisit. Contoh : Document.write(nama);

11 Penamaan variabel harus mengikuti aturan-aturan sebagai berikut : a. Penamaan variabel diawali dengan huruf atau tanda karakter garis bawah (_ ). b. Nama variabel tidak boleh mengandung karakter spasi. c. Karakter kedua dan seterusnya dapat berupa huruf, angka, atau karakter garis bawah. d. Penamaan variabel tidak boleh menggunakan kata kunci JavaScript. e. Beberapa variabel yang bernama sama tidak dapat dimiliki dalam sebuah blok. Tetapi dapat digunakan asalkan variabel-variabel tersebut terletak dalam blok yang berbeda. f. Sebaiknya penamaan variabel dibuat sesuai dengan apa yang disimpannya. g. Huruf kapital dan huruf kecil dibedakan (CASE-SENSITIF)

12 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 berupa true atau false. Misalnya : var nilai 1 = (nilai 2 < 100); 4. Null - Variabel yang tidak diinisialisasi. Misalnya : var total;

13 Fungsi paselnt() atau parsefloat() digunakan untuk Konversi tipe data string ke dalam tipe data numerik Fungsi parselnt() adalah fungsi yang berguna untuk mengkonversi string bilangan menjadi bilangan bulat. fungsi parsefloat() adalah fungsi yang berguna untuk mengkonversi string bilangan menjadi bilangan pecahan.

14 Dalam Java Script terdapat perintah function yang biasa digunakan untuk membagi program kedalam blok-blok perintah, dengan adanya blok-blok perintah tesebut maka akan mempermudah 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 atau block code

15 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>

16 Contoh : <html> <head> <script language="javascript">  </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>

17

18 1. Perintah Kondisi a. Perintah If penulisan 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

19 Contoh : <HTML> <HEAD> <TITLE>Contoh if-else</title> </HEAD> <BODY> <SCRIPT LANGUAGE = "JavaScript">  </SCRIPT> </BODY> </HTML>

20 a. Perintah Switch Case penulisan dari perintah switch case adalah sebagai berikut: switch (kondisi) { case hasilkondisi1 : statement; break; case hasilkondisi2 : statement break; default : statement ; break; }

21

22 2. Perintah Perulangan a. Perintah For Perintah 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">  </script> </body> </html>

23 b. Perintah While Pada 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">  </script> </body> </html>

24 Sebuah variable pada JavaScript ternyata dapat disimpan lebih dari 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 :

25 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 mengakses 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>");

26 Output dari kode diatas adalah seperti gambar dibawah ini

27 <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>

28 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>

29 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 nilai baru ternyata dapat disimpan pada index baru, tanpa harus melakukan deklarasi ulang terhadap array-nya. Hal ini menjadi bukti bahwa array pada JavaScript bersifat dinamis.