MODUL 7 JavaScript pada Form HTML A. TUJUAN 1. Mampu
advertisement
Desain Web 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 onClick onChange onLoad onBlur onMouseover onMouseleave onKeypress onKeyup Fungsi Mengeksekusi JS ketika elemen diklik Mengeksekusi JS ketika terjadi perubahan nilai Mengeksekusi JS ketika halaman HTML diload Mengeksekusi JS ketika suatu elemen kehilangan fokus Mengeksekusi JS ketika pointer mouse menyentuh suatu elemen Mengeksekusi JS ketika pointer mouse lepas dari suatu elemen Mengeksekusi JS ketika tombol keyboard ditekan Mengeksekusi JS ketika tombol keyboard dilepas Sabian | STKIP PGRI TULUNGAGUNG Elemen didukung Semua <select>, <input>, <textarea> <body> <select>, <input>, <textarea> Semua Semua <input>, <textarea> <input>, <textarea> 1 Desain Web 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: Sabian | STKIP PGRI TULUNGAGUNG 2 Desain Web 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: Sabian | STKIP PGRI TULUNGAGUNG 3 Desain Web 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’. Sabian | STKIP PGRI TULUNGAGUNG 4 Desain Web 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. Sabian | STKIP PGRI TULUNGAGUNG 5 Desain Web 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: Sabian | STKIP PGRI TULUNGAGUNG 6