MODUL PEMROGRAMAN WEB

MODUL PEMROGRAMAN WEB JAVASCRIPT

Rajif Agung Yunmar, S.Kom

STMIK “AMIKOM” Yogyakarta 2011

DAFTAR ISI

JavaScript ....................................................................................................................

1

1. Memasukkan JavaScript ........................................................................................

1

1.1 Embedded Script ..............................................................................................

1

1.2 Inline Script .......................................................................................................

2

1.3 External Script ..................................................................................................

3

2. JavaScript Object ....................................................................................................

3

2.1 Direct Object Operation ....................................................................................

4

2.2 Object Lainnya ..................................................................................................

6

3. Variabel ...................................................................................................................

6

3.1 Deklarasi Variabel .............................................................................................

6

3.2 Type Casting .....................................................................................................

8

4. Konstanta ................................................................................................................

9

5. Event ....................................................................................................................... 10 5.1 Event dan Object .............................................................................................. 12 6. Percabangan .......................................................................................................... 13 7. Fungsi ..................................................................................................................... 14 8. Kotak Dialog ........................................................................................................... 16 8.1 Alert ................................................................................................................... 16 8.2 Confirm ............................................................................................................. 17 8.3 Prompt .............................................................................................................. 18 9. Validasi .................................................................................................................... 19 Daftar Pustaka ............................................................................................................. 21

JAVASCRIPT JavaScript adalah bahasa pemrograman berbasiskan client side scripting. Yang berarti program dieksekusi disisi (browser) client, client dapat melihat skrip dan mengetahui algoritma dari program yang ditulis. JavaScript tidak memerlukan compiler khusus untuk mengeksekusi programnya, biasanya browser-lah yang bertindak sebagai compiler kode program JavaScript. Itu sebabnya terdapat beberapa perbedaan (walaupun tidak banyak) penggunaan syntax program antara satu browser dengan yang lainnya. Javascript diperkenalkan pertama kali oleh Netscape pada tahun 1995. Pada awalnya bahasa ini dinamakan "LiveScript" yang berfungsi sebagai bahasa sederhana untuk browser Netscape Navigator 2. Pada masa itu bahasa ini banyak di kritik karena kurang aman, pengembangannya yang terkesan buru buru dan tidak ada pesan kesalahan yang di tampilkan setiap kali kita membuat kesalahan pada saat menyusun suatu program. Kemudian sejalan dengan sedang giatnya kerjasama antara Netscape dan Sun (pengembang bahasa pemrograman "Java") pada masa itu, maka Netscape memberikan nama "JavaScript" kepada bahasa tersebut pada tanggal 4 desember 1995. Pada saat yang bersamaan Microsoft sendiri mencoba untuk mengadaptasikan teknologi ini yang mereka sebut sebagai "Jscript" di browser Internet Explorer 3.

1. Memasukkan JavaScript 1.1 Embedded Script Kode program JavScript ditanamkan langsung didalam halaman HTML. Kode program disisipkan diatara tag <script language="JavaScript"> ... . 08.latihan_01.php

Program JavaScript Pertama Saya!

<script language="JavaScript"> alert("Hello Dab!");

1

1.2 Inline Script Kode program JavaScript didefinisikan langsung didalam elemen HTML sebagai sebuah atribut. Atribut pada elemen HTML ini biasanya berkaitan dengan event, yaitu sebuah aksi yang dilakukan oleh seorang user. Misalnya seperti saat user menekan (klik) sebuah tombol. Lebih lengkap mengenai event akan dijelaskan pada sub-bab selanjutnya. 08.latihan_02.php Klik Dong!

2

Pada contoh latihan diatas, program JavaScript didefinisikan secara langsung sebagai value dari atribut onClick. Browser secara otomatis mengenali atribut ini sebagai sebuah JavaScript event. Program JavaScript akan dieksekusi apabila user menekan (klik) tautan / link yang sudah diberikan event tersebut. Dalam hal ini program akan menampilkan sebuah kotak dialog yang bertuliskan “Terima Kasih”.

1.3 External Script Menempatkan kode program JavaScript secara terpisah, kode program terhubung dengan dokumen

dengan

meletakkanya

pada

elemen

head.

File

JavaScript

disimpan

menggunakan ekstensi .js. 08.latihan_03.js function sayHello(){ alert("Hello Dab!"); }

08.latihan_04.html <script language="JavaScript" src="08.latihan_03.js"> Klik Dong!

2. JavaScript Object JavaScript memperlakukan setiap element pada browser / navigator sebagai sebuah object. Sebuah object akan memudahkan kita untuk mengakses dan memanipulasi sifat / properti dari object tersebut. Object ini diklasifikasikan berdasarkan hirarki / tingkatan khusus dan dapat diasosiasikan dengan kondisi dan sifat-sifat khusus (properti). Berikut ini adalah deskripsi dari tingkatan object yang ada didalam sebuah browser: •

Object yang terbesar adalah object window (jendela) dari browser.

•

Didalam object window terdapat suatu object yang ditampilkan dalam bentuk halaman web yang disebut sebagai document.

•

Object document memiliki banyak turunan. Contohnya : form, text, image, link, dll. 3

08.latihan_05.html Klik Dong!

Contoh latihan program diatas memperlihatkan kepada kita bagaimana cara mengubah properti dari sebuah object secara on the fly. Dimana pada saat event onClick dikenakan sebuah tautan, maka program JavaScript dengan segera mengubah title halaman web tersebut melalui hirarki object window.document.title.

2.1 Direct Object Operation Pada bagian sebelumnya telah dijelaskan bahwa sebuah object dapat diakses berdasarkan hirarki object itu didalam sebuah halaman web. Namun terdapat cara lain yang dapat digunakan untuk mengakses dan mengubah properti dari sebuah object. 4

JavaScript menggunakan fungsi getElementById() untuk mengakses suatu element tertentu berdasarkan identifier yang bersifat unik. Identifier ini didefinisikan melalui atribut element yang bernama id. Perhatikan contoh berikut : 08.latihan_06.html

Nama :

Hierarchy Way Direct Way

Program tersebut diatas digunakan untuk mengubah nilai (value) properti dari object textfield

dengan

perintah

window.document.forms['form1'].txtNama.value

yang

kemudian digantikan dengan fungsi document.getElementById('txtNama_Depan').value. Yang perlu dicermati adalah : jika menggunakan cara pertama (hirarki), sebuah properti dari element HTML dapat diakses dan diubah nilainya berdasarkan atribut name. Dari contoh program diatas, value dari atribut name adalah txtNama. Sedangkan jika menggunakan cara kedua (direct access), sebuah properti diakses dan diubah nilainya berdasarkan atribut id. Dari contoh latihan diatas, value dari atribut id adalah txtNama_Depan. Dengan demikian paramenter yang digunakan oleh fungsi 5

getElementById() adalah value dari atribut id, yaitu txtNama_Depan.

2.2 Object Lainnya Selain object window yang telah kita kenal sebelumnya, terdapat object-object standar JavaScript lainnya. Object-object ini distandarisasi oleh organisasi ECMA (European Computer Manufacturer Association). Diantaranya adalah sebagai berikut: Object

Keterangan

Array

Object ini memungkinkan kita untuk membuat sebuah array. Memeiliki berbagai Met ode yang memungkinkan kita untuk menambah, menghapus dan mengurutkan element-element yang terdapat didalamnya.

Boolean

Object ini memungkinkan kita untuk membuat nilai boolean.

Date

Object yang memungkinkan kita untuk membuat dan memanipulasi tanggal dan juga durasi waktu.

Function

Memungkinkan kita untuk membuat fungsi yang dapat kita definisikan sendiri menurut kebutuhan yang diinginkan.

Math

Object math memungkinkan kita untuk menggunakan fungsi-fungsi matematika. Contohnya : sqrt, round, max, dll.

Number

Object ini memungkinkan kita untuk melakukan operasi dasar terhadap sebuah bilangan.

RegExp

Memungkinkan kita untuk melakukan operasi menggunakan teknik-teknik regular expression.

String

Menyediakan metode untuk melakukan manipulasi terhadap sebuah string.

pencarian

string

3. Variabel Variable adalah sebuah pengenal yang digunakan untuk menyimpan suatu nilai yang nilai tersebut dapat berubah-ubah selama dijalankannya program.

3.1 Deklarasi Variabel Terdapat dua cara yang digunakan untuk mendeklarasikan sebuah variabel pada JavaScript. Yaitu: a. Explisit Menuliskan variabel dengan diawali dengan keyword var kemudian diikuti nama variabel dan nilai yang dikandungnya. Contoh: var test = "Sesuatu"; var bil_1, bil_2, total;

6

b. Implisit Menuliskan variabel secara langsung diikuti dengan nilai yang dikandungnya. Contoh: test = "Sesuatu"; bil_1 = 5; bil_2 = 10;

Sebagaimana bahasa pemrograman lain, terdapat aturan-aturan yang berkaitan dengan deklarasi sebuah variabel. Aturan-aturan itu adalah sebagai berikut: a. Terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasi antara ketiganya. b. Tidak boleh mengandung spasi dan terdiri dari minimal satu karakter. c. Dimulai dengan huruf atau garis bawah, tidak boleh diawali dengan angka. d. Bersifat case sensitive, yaitu huruf besar dan kecil dibedakan. 08.latihan_07.html <script language="JavaScript"> var bil_1, bil_2, total; bil_1 = 5; bil_2 = 10; total = bil_1 * bil_2; document.writeln(bil_1 + " * " + bil_2 + " = " + total);

7

3.2 Type Casting Seperti halnya PHP, JavaScript tidak mengenakan tipe data tertentu pada sebuah variabel atau bersifat variant. Dengan begitu, sebuah variabel dalam JavaScript dapat menampung jenis data yang berbeda-beda dalam satu siklus eksekusi program. Namun, JavaScript tetap menyediakan sebuah mekanisme untuk melihat tipe data dari sebuah variabel maupun konversi dari satu tipe data ke tipe data lainnya. 08.latihan_08.html <script language="JavaScript"> var sesuatu; sesuatu = 14; document.write("Variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("
"); sesuatu = "ada deh.."; document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));

Dari contoh latihan diatas dapat kita lihat, bahwa variabel sesuatu dapat ditugasi untuk menampung dua nilai yang berbeda didalam satu siklus eksekusi program. Fungsi typeof() digunakan untuk melihat tipe data yang terkandung didalam variabel sesuatu.

Type casting adalah mekanisme pengubahan / konversi sebuah variabel kepada tipe data tertentu. Sebagai contoh, kadangkala kita hanya ingin menggunakan bagian integer dari sebuah bilangan pecahan. Dalam JavaScript type casting ditangani oleh fungsi tertentu, berikut ini adalah beberapa fungsi yang dapat digunakan: 8

•

Number()

•

String()

•

Boolean()

•

parseInt()

•

ParseFloat()

08.latihan_09.html <script language="JavaScript"> var sesuatu; sesuatu = 14; document.write("Variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("
"); sesuatu = String(sesuatu); document.write("Variabel sesuatu bertipe : " + typeof(sesuatu)); document.write("
"); sesuatu = Boolean(sesuatu); document.write("Variabel sesuatu bertipe : " + typeof(sesuatu));

4. Konstanta Konstanta adalah sebuah tetapan nilai dalam sebuah program. Nilai konstanta tidak dapat diubah selama program dijalankan dan jika dilakukan hanya akan menyebabkan error. Deklarasi konstanta dapat dilakukan dengan cara menuliskan keyword const diikuti dengan nama konstanta dan nilai dari konstanta tersebut.

9

Sebagaimana variabel, konstanta juga yang memiliki aturan yang harus diikuti. Aturan berikut memastikan kita untuk mendeklarasikan konstanta dengan benar: a. Hanya terdiri dari huruf, angka dan karakter garis bawah ( _ ) atau kombinasinya. b. Nama konstanta harus dimulai dengan huruf atau garis bawah ( _ ). c. Konstanta tidak dapat dideklarasikan ulang dan nilainya tetap. 08.latihan_10.html <script language="JavaScript"> const pi = 3.14; var radius = 100; var luas_lingkaran, keliling_lingkaran; luas_lingkaran = pi * (radius * radius); keliling_lingkaran = 2 * pi * radius; document.write("Luas lingkaran : " + luas_lingkaran); document.write("
"); document.write("Keliling lingkaran : " + keliling_lingkaran);

5. Event Event adalah aksi yang dilakukan oleh seorang user terhadap object-object pada halaman web yang dapat memicu berjalannya program JavaScript. Sebuah event dituliskan sebagai atribut dari sebuah element HTML. Browser secara otomatis mengenali atributatribut tertentu sebagai sebuah event. Berikut ini adalah daftar atribut element yang akan

10

dikenali sebagai JavaScript event. Event

Keterangan

Abort (onAbort)

Terjadi saat user menghentikan proses load image ke halaman web

Blur (onBlur)

Terjadi ketika element kehilangan fokus, artinya user melakukan klik diluar element tersebut.

Change (onChange)

Terjadi saat user memodifikasi isi data dari sebuah element input.

Click (onClick)

Terjadi ketika user melakukan klik mouse terhadap suatu element yang berhubungan dengan event.

Double Click (onDblclick)

Terjadi saat user melakukan klik dua kali pada suatu element yang berhubungan dengan event. Event jenis ini hanya didukung versi JavaScript 1.2 keatas.

Drag and Drop (onDragdrop)

Terjadi ketika user melakukan drag drop terhadap suatu element didalam sebuah browser. Event jenis hanya didukung oleh versi JavaScript 1.2 keatas.

Error (onError)

Dijalankan ketika terdapat error pada saat memuat halaman. Event jenis hanya didukung oleh versi JavaScript 1.1 keatas.

Focus (onFocus) Terjadi saat user memberikan fokus terhadap suatu element. Key Down (onKeydown)

Terjadi ketika user menekan satu tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas.

Key Press (onKeypress)

Terjadi ketika user menekan dan tetap menahan tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas.

Key Up (onKeyup)

Terjadi saat user melepas tombol keyboard. Event ini hanya didukung oleh versi JavaScript 1.2 keatas.

Load (onLoad)

Terjadi pada saat browser memuat / memanggil suatu halaman web.

Mouse Over (onMouseover)

Terjadi ketika user meletakkan kursor mouse diatas sebuah element.

Mouse Out (onMouseout)

Terjadi saat kursor mouse meninggalkan posisinya dari atas sebuah element.

Reset (onReset) Terjadi ketika user ingin menghapus (mengembalikan data keposisi awal) data pada suatu form. Pengahapusan data ini biasa dibantu melalui sebuah tombol input dengan tipe reset. Submit (onSubmit)

Terjadi saat user ingin mengirimkan data yang telah diinputkan pada form.

Resize (onResize)

Terjadi ketika user mengubah ukuran dari jendela browser.

Select (onSelect) Terjadi saat user melakukan proses seleksi terhadap teks (sebagian atau semuanya) dari element textfield atau text area. Unload (onUnload)

Terjadi saat user hendak meninggalkan halaman yang sedang dimuat (diproses).

11

5.1 Event dan Object Tidak semua event dapat dihubungkan dengan sembarang object. Berikut ini adalah tabel hubungan antara event dan object yang dapat diasosiasikan. Event

Object

Abort

Image

Blur

FileUpload, Layer, Password, Button, Checkbox, Radio, Reset, Select, Submit, Textfield, Textarea, Window

Change

FileUpload, Select, Submit, Textfield, Textarea.

Click

Document, Link, Button, Checkbox, Radio, Reset, Select, Submit

Double Click

Document, Link

Drag Drop

Window

Error

Image, Window

Focus

FileUpload, Layer, Password, Button, Checkbox, Radio, Reset, Select, Submit, Textfield, Textarea, Window

Keydown

Document, Image, Link, Textarea

Keypress

Document, Image, Link, Textarea

Keyup

Document, Image, Link, Textarea

Load

Image, Layer, Window

Mouse Down

Button, Document, Link

Mouse Move

Not Spesified

Mouse Out

Layer, Link

Mouse Over

Area, Layer, Link

Mouse Up

Button, Document, Link

Move

Window

Reset

Form

Submit

Form

Resize

Window

Select

Textfield, Textarea

Unload

Window

12

08.latihan_11.html Klik Donk!

6. Percabangan Pernyataan percabangan digunakan untuk membandingkan suatu kondisi. Jika kondisi itu bernilai benar, maka akan dijalankan ekspresi tertentu, tetapi jika kondisi itu bernilai salah akan dijalankan ekspresi yang lainnya. Percabangan yang digunakan pada sub-bab ini adalah if. 08.latihan_12.html <script language="JavaScript"> var nilai, index; nilai = 80; if(nilai >= 85 && nilai <= 100){ index = "A"; } else if(nilai >= 70){

13

index = "B"; } else if(nilai >= 50){ index = "C"; } else if(nilai >= 30){ index = "D"; } else { index = "E"; } document.write("Nilai anda adalah : " + nilai); document.write("
"); document.write("Dengan index : " + index);

7. Fungsi Fungsi adalah sebuah blok program yang merupakan sekumpulan statement yang bertujuan untuk menyelesaikan suatu tugas tertentu. Sebuah fungsi dibuat

untuk

membantu mengerjakan tugas yang kompleks secara efektif dan efisien. Karena setelah satu fungsi dibuat, ia dapat dipanggil dibagian program manapun untuk menyelesaikan suatu tugas secara-berulang ulang. Nama fungsi merupakan deklarasi nama fungsi yang akan kita buat. Dalam deklarasinya, fungsi harus memenuhi syarat-syarat sebagai berikut: •

Tidak boleh sama dengan fungsi yang sudah ada didalam JavaScript.

•

Hanya terdiri dari huruf, angka dan garis bawah (underscore).

•

Tidak boleh diawali dengan angka.

•

Parameter bersifat optional. Namun tanda kurung harus tetap ditampilkan.

14

08.latihan_13.html <script language="JavaScript"> function ckMarital(status){ document.getElementById('txtStatus').innerHTML = status; }

Sudah Menikah? : Sudah Belum
Status : <span id="txtStatus">Tidak ditentukan

Pada contoh program diatas, fungsi ckMarital() akan dijalankan jika element radio button mendapat event klik dari user. Jika kita perhatikan, kedua element radio button memanggil fungsi ckMarital() dengan parameter this.value. Jika diterjemahkan kedalam element radio button yang pertama, parameter this.value akan bernilai “Sudah”. Nilai ini berasal dari value atribut name yang didefinisikan pada element radio button yang pertama. Sedangkan untuk radio button yang kedua, paramer this.value akan bernilai “Belum”. Fungsi ckMerital() akan mengubah properti innerHTML pada object span dengan id txtStatus yang tadinya bernilai “Tidak ditentukan” dengan isi dari parameter fungsi.

15

8. Kotak Dialog Kotak dialog adalah satu element window yang tampil pada layer paling depan. Kotak dialog memungkinkan program untuk berinteraksi dengan user dengan cara : •

Memberikan peringatan kepada user.

•

Memberikan pilihan kepada user.

•

Meminta user untuk melengkapi isian pada suatu form field.

8.1 Alert Fungsi alert memungkinkan browser untuk menampilkan satu kotak dialog yang berisi satu tombol OK dan teks keterangan (sebagai satu satu parameter dari fungsi). Pada saat kotak dialog ini muncul, user tidak punya pilihan lain selain menekan tombol OK. 08.latihan_14.html <script language="JavaScript"> alert("Perhatian!"); alert("Ini adalah contoh dari fungsi Alert.");

16

8.2 Confirm Fungsi Confirm hampir sama seperti fungsi Alert, dengan tambahan kita bisa melakukan pilihan OK atau Cancel. Pada saat kita pilih OK maka fungsi ini akan mengirimkan nilai true dan mengirimkan nilai false jika kita memilih Cancel. 08.latihan_15.html <script language="JavaScript"> function ckMarital(){ if(confirm("Apakah anda benar-benar sudah menikah?")){ document.getElementById("ckStatus").checked = true; } else { document.getElementById("ckStatus").checked = false; } }

Sudah Menikah? : Ya

Contoh program diatas dapat dijelaskan sebagai berikut : Program dijalankan ketika user menekan (event onClick) checkbox, kemudian fungsi ckMarital() segera dieksekusi. Program akan memberikan sebuah dialog konfirmasi untuk user melalui percabangan if.

17

Jika user menjawab OK, maka dialog konfirmasi akan mengembalikan nilai true yang mengakibatkan element input checkbox akan diberi checklist (

). Begitu pula jika user

menjawab Cancel, maka element checkbox tidak akan diberi checklist.

8.3 Prompt Fungsi ini sedikit berbeda dibandingkan kedua fungsi sebelumnya. Karena dilengkapi dengan satu cara untuk mendapatkan informasi yang diberikan oleh user. Fungsi ini terdiri dari 2 komponen: Pertama, teks untuk pertanyaan dan yang kedua adalah teks default dari field informasi yang akan diisi oleh user. 08.latihan_16.html <script language="JavaScript"> var nama; nama = prompt("Siapakah nama kekasih anda?",""); document.write("Nama kekasih anda adalah : " + nama);

Pada contoh program diatas, program melalui fungsi Prompt meminta user untuk menjawab sebuah pertanyaan. Jawaban user tersebut akan disimpan kedalam variabel nama untuk kemudian ditampilkan ke halaman web.

18

9. Validasi Form Pemanfaatan JavaScript yang sering dilakukan dalam operasi form adalah validasi. Validasi digunakan untuk memastikan user memberikan informasi sesuai yang programmer inginkan. Berikut ini adalah contoh dari pemanfaatan JavaScript untuk validasi form. 08.latihan_17.html <script language="JavaScript"> function ckForm(){ var str, error; str = ""; error = 0; if(document.getElementById("txtNama").value.length <= 0){ str += "- Nama tidak boleh kosong.\n"; error++; } if(document.getElementById("rdJenisKelamin_1").checked == false && document.getElementById("rdJenisKelamin_2").checked==false){ str += "- Jenis kelamin belum ditentukan.\n"; error++; } if(document.getElementById("txtAlamat").value.length <= 0){ str += "- Alamat tidak boleh kosong.\n"; error++; } if(error > 0){ alert("Terdapat kesalahan : \n" + str); return false; } else { return true; } }

Formulir Biodata

Nama :
Jenis Kelamin : Laki-Laki Perempuan
Alamat :

19

08.latihan_18.php "; print_r($_POST); echo ""; ?>

20

DAFTAR PUSTAKA

1. Alamsyah, Andry. 2003. Pengantar JavaScript. IlmuKomputer.Com. 2. Hartanto, Anggit Dwi. 2009. Modul Praktikum Pemrograman Web (Dasar). STMIK AMIKOM Yogyakarta.

21