1 MODUL 7 JavaScript pada Form HTML A. TUJUAN 1. Mampu memahami konsep JavaScript pada HTML 2. Mampu memahami penggunaan JavaScript pada HTML 3. Mampu memproses form HTML menggunakan JavaScript B. PETUNJUK 1. Awali setiap aktivitas dengan do a, semoga berkah dan mendapat kemudahan 2. Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar 3. Kerjakan tugas-tugas praktikum dengan baik, sabar, dan jujur 4. Tanyakan kepada dosen apabila terdapat hal-hal yang kurang jelas C. DASAR TEORI JavaScript (biasa disingkat JS) merupakan bahasa pemrograman berbasis Java yang dapat disisipkan pada halaman web. Fungsi utamanya adalah untuk menangani operasi-operasi matematis dan logis yang tidak dapat dikerjakan pada kode HTML. Seperti pada bahasa pemrograman pada umumnya, JavaScript juga mengenal variabel, array, class, fungsi, dan prosedur. JavaScript pada halaman web biasanya disisipkan pada suatu elemen (biasanya textbox, drop-down list, button, dsb) dimana prosesnya dieksekusi / ditrigger melalui event. Berikut beberapa event yang dapat kita sisipkan pada suatu elemen HTML untuk mengeksekusi kode JavaScript: Event Fungsi Elemen didukung onclick Mengeksekusi JS ketika elemen diklik Semua onchange Mengeksekusi JS ketika terjadi perubahan nilai <select>, <input>, <textarea> onload Mengeksekusi JS ketika halaman HTML diload <body> onblur Mengeksekusi JS ketika suatu elemen kehilangan fokus <select>, <input>, <textarea> onmouseover Mengeksekusi JS ketika pointer mouse menyentuh suatu elemen Semua onmouseleave Mengeksekusi JS ketika pointer mouse lepas dari suatu elemen Semua onkeypress Mengeksekusi JS ketika tombol keyboard ditekan <input>, <textarea> onkeyup Mengeksekusi JS ketika tombol keyboard dilepas <input>, <textarea>
2 Event di atas dapat kita tambahkan pada elemen HTML sebagai attribute. Kode JavaScript pada attribute yang akan kita eksekusi harus kita tulis terlebih dahulu pada tag script. Sama persis dengan CSS, penambahan JavaScript pada HTML bisa melalui 3 (tiga) cara, yakni inline, embedded, dan linked. Kode JavaScript pada metode inline bisa kita tambahkan langsung melalui event. Kode JavaScript pada metode embedded atau linked bisa kita tambahkan pada tag head menggunakan tag script. D. LATIHAN 1. Bukalah aplikasi teks editor 2. Tuliskan kode dasar HTML Simpan sebagai index.html 3. Sisipkan kode berikut pada head:
3 function digunakan untuk membuat suatu fungsi / prosedur, diikuti dengan nama fungsi serta parameternya. var digunakan untuk mendefinisikan suatu variabel jenis apapun (int, float, ataupun char). parseint() merupakan fungsi yang digunakan untuk mengonversi variabel jenis char / string menjadi integer. Operator + dapat digunakan untuk menjumlah nilai variabel (jika jenisnya int atau float) atau untuk menggabungkan karakter (jika jenisnya char / string). 4. Kemudian tambahkan kode berikut pada body: 5. Buka index.html menggunakan browser. Jika kode benar, maka tampilannya sebagai berikut: 6. Coba isi kolom nama dan umur, kemudian klik tombol CEK. Jika prosedur dan kode benar, maka tampilannya sebagai berikut: Beberapa hasil lain:
4 Penjelasan alur kode pada fungsi CekBiodata() di atas adalah sebagai berikut: var form=document.myform; digunakan untuk memperpendek akses kita pada MyForm beserta isi di dalamnya. MyForm adalah nama form pada HTML (<form name="myform">) yang akan kita olah isinya. Jika name dari form di atas misalnya Formku (<form name="formku">), kode JavaScriptnya juga harus disesuaikan menjadi var form=document.formku; var nama=form.nama.value; digunakan untuk mendapatkan nilai (value) dari elemen Nama di dalam form MyForm, kemudian disimpan dalam variabel nama. Versi panjangnya sebenarnya var nama=document.myform.nama.value; tetapi berhubung document.myform sudah kita perpendek menjadi form (var form=document.myform;) maka form.nama.value sudah mewakili. Nama merupakan name dari <input type="text" name="nama">. Jika name nya misalnya <input type="text" name="namaanda">, maka kode JavaScript juga harus disesuaikan menjadi form.namaanda.value. var umur=parseint(form.umur.value); digunakan untuk mendapatkan nilai dari Umur di dalam form MyForm, kemudian disimpan dalam variabel umur. parseint() merupakan fungsi yang digunakan untuk mengonversi char / string menjadi integer. Mengapa harus menggunakan fungsi tersebut? Karena value dari <input type= text > selalu char / string (text), meskipun secara wujud berupa angka. var stts='mas / mbak'; digunakan untuk mendefinisikan variabel stts dengan nilai awal mas / mbak. Variabel tersebut merupakan char / string karena nilainya mengandung tanda. Kita bisa menggunakan tanda atau sebagai penanda char / string. if(umur>=25&&umur<=55)stts='pak / bu'; merupakan pengecekan nilai. Jika nilai dari umur antara 25 sampai dengan 55, maka nilai variabel stts diubah menjadi pak / bu.
5 if(umur>55)stts='eyang'; merupakan pengecekan nilai. Jika nilai dari umur lebih dari 55, maka nilai variabel stts diubah menjadi eyang. form.hasil.value='selamat datang '+stts+' '+nama; digunakan untuk mengubah nilai elemen Hasil menjadi kombinasi dari kalimat Selamat datang digabung dengan nilai dari variabel stts digabung dengan nilai dari variabel nama. Hasil dari penggabungan string tersebut dimasukkan sebagai nilai dari Hasil.
6 E. TUGAS Desainlah suatu aplikasi kasir sederhana menggunakan web seperti berikut: Ketika tombol HITUNG diklik, maka sistem akan menjumlah semua total harga yang harus dibayar: