Modul 7 Java Scripts II

Ukuran: px

Mulai penontonan dengan halaman:

Download "Modul 7 Java Scripts II"

Farida Chandra
9 tahun lalu
Tontonan:

1 Modul 7 Java Scripts II 1.1 Tujuan a. Mahasiswa dapat mengoperasikan struktur java scripts b. Mahasiswa dapat memakai objeck dan form pada java scripts 1.2 Materi a. Java Scripts b. Pemrograman c. Form 1.3 Alat dan Bahan a. Macromedia Dreamweaver b. Page, Image 1.4 Prosedur Praktikum a. Peserta membaca dan mempelajari materi praktikum sebelumnya b. Instruktur menerangkan dan menjelaskan teori dan cara kerja c. Peserta mempraktikan materi percobaan d. Peserta membuat penyelesaian terhadap soal latihan 1.5 Teori Review Java Scripts Cobakan program berikut : <script language="javascript"> document.write("javascript membuat html menjadi semakin hebat"); Cobakan juga program berikut : <script language="javascript"> alert("ssst lagi belajar JavaScript"); Kemudian yang berikut : <script language="javascript"> document.write("javascript is the <b> best</b>"); document.write("<br>"); document.write("i like <font color=blue>javascript</font>");

2 Membuka window browser baru melalui link: <a HREF="javascript:void(0)" onclick="window.open('welcome.html')"> Membuka window baru melalui link</a> File welcome.html harus ada terlebih dahulu dan isinya terserah anda. Menggunakan prompt : var nama = prompt("nama anda : ", "ketikkan nama anda di sini"); document.write("hi " + nama + " Selamat menikmati pelajaran ini!"); Prompt dengan if var n = prompt("masukkan sebuah angka"); n = parseint(n); if (n == 0) alert("angka yang anda masukkan adalah NOL"); else if (n%2) alert("angka yang anda masukan GANJIL"); else alert("angka yang anda masukkan GENAP");

3 Deklarasi isi variabel dan perhitungannya : var a=3; var b=5; var c=a+b; var d=a/b; document.write("hasil penjumlahan a dan b adalah : " +c); document.write("<br>"); document.write("hasil penjumlahan " + a + " dan " + b + " adalah : " +c); document.write("<br>"); document.write("hasil pembagian " + a + " dan " + b + " adalah : " +d); Cobakan untuk jenis perhitungan lain : kurang, kali, pangkat, dsbnya. Menggunakan confirm bersama logika if <script language="javascript"> var respon = confirm("apakah anda ingin meneruskan pelajaran javascript?"); if (respon == true) document.write("silahkan meneruskan pelajaran"); else document.write("belajarlah di lain waktu");

4 Merespon elemen combo pada form dan link : <FORM> <SELECT onchange= "document.bgcolor=this.options[this.selectedindex].value"> <OPTION VALUE="40E0D0"> Torquoise <OPTION VALUE="2E8B57"> Sea Green <OPTION VALUE="87CEEB"> Sky Blue <OPTION VALUE="F4A460"> Sandy Brown <OPTION VALUE="FFF0F5"> Lavender Blush <OPTION VALUE="FF1493"> Deep Pink <OPTION VALUE="FFFFFF" SELECTED> White </SELECT> </FORM> <A HREF=" onclick="alert('kembali ke Unsada')">Website Unsada</A> Merespon password : <head> <title> </head> </title> <FORM NAME="login"> Username: <INPUT NAME="username"> <BR> Password: <INPUT NAME="password" TYPE=PASSWORD> <BR> <INPUT TYPE=BUTTON VALUE="Login" onclick="verifylogin()"> <INPUT TYPE=RESET> </FORM> function verifylogin() var myform = document.login; if (myform.username.value == "www" && myform.password.value == "unsada") window.location.href = "berikut.html"; else alert("username atau password yang dimasukkan salah"); Kemudian file : berikut.html dengan contoh isi sebagai berikut :

5 Anda berhasil masuk ke halaman ini Looping pada javascript : Contoh 1 : looping for var janji = "Aku akan belajar lebih giat"; var jumlah = 23; document.write("janji mahasiswa: "); document.write("<br>"); for (var x = 1; x <= jumlah; x++) document.write( janji + "<br>") Contoh 2 : Array dan looping var num = new Array(200, 400, 300, 250, 670, 430, 220, 870, 30); var l = num.length var msg = ""; for (x = 0; x < l; x++) num[x] = num[x] + 50; msg = msg + num[x]+ "\n"; alert(msg);

6 Menempatkan kode javascript di file lain : Format : <SCRIPT LANGUAGE="JAVASCRIPT" SRC="mycode.js" TYPE="TEXT/JAVASCRIPT">  </SCRIPT> Dimana mycode.js adalah file yang berisi kode javascript anda. Contoh : Validasi form dengan file js : ketikan program berikut Nama file : validasi.html <head> <title>validasi Registrasi</title> <script type="text/javascript" src="js.js"> <style> #pesan color: red; font-weight:bolder; img vertical-align:middle; tr height:30px; </style> <form> <table> <td>username :</td> <td> <input type="text" name="username" onkeyup="cekuser(this.value.length);" /> <img src="valid.gif" style="display:none;" /> </td> </tr> <td>password :</td> <td><input type="password" name="password" /></td> </tr> <td>konfirmasi Password :</td> <td> <input type="password" name="password2" onkeyup="cekkonfirmasi(this.value);" /> <img src="valid.gif" style="display:none;" /> </td> </tr> <td> </td> <td> <input type="text" name=" " onkeyup="cek (this.value);"/> <img src="valid.gif" style="display:none;" /> </td>

7 </tr> <td colspan="2"><button type="submit" disabled="disabled">daftar</button></td> </tr> </table> <div id="pesan"></div> <div style="font:12px Verdana; margin-top: 40px; width: 600px;"> <ul> <li>cara kerjanya sederhana saja, tombol submit didisable selama data pada form belum disi dengan benar</li> <li>ada tiga syarat yang harus dipenuhi user: <ol> <li>mengisi username minimal 5 karakter</li> <li>mengisi konfirmasi password sama dengan password</li> <li>mengisi dalam format yang benar</li> </ol> </li> <li>syarat-syarat tersebut kita kumpulkan dalam sebuah array. setiap elemen array mewakili satu syarat. Pada awal program, setiap syarat diberi nilai 0 (nol) yang berarti syarat belum terpenuhi. Jika sebuah syarat dipenuhi, maka nilai syarat tersebut diganti dengan 1 (satu).</li> <li>tombol akan berfungsi jika semua elemen array syarat sudah bernilai 1.</li> <li>untuk lebih jelasnya silahkan lihat file <a href="js.js">javascriptnya</a>.</li> <li>skrip telah diujicobakan dan berhasil dengan baik pada browser Firefox 3.0, IE 7.0, Opera 8.0</li> </ul> </div> </form> Ketikkan juga program javascript berikut : File : js.js // membuat array syarat dan memberikan nilai 0 (nol) syarat = new Array(); syarat["username"] = 0; syarat["konfirmasi"] = 0; syarat[" "] = 0; //fungsi untuk mengecek jumlah karakter username yang sudah diinput function cekuser(jumlah) // jika jumlah karakter lebih dari atau sama dengan 5 if (jumlah >= 5) //kosongkan div pesan document.getelementbyid("pesan").innerhtml=""; //tampilkan logo penanda syarat telah dipenuhi showlogo(0); //memberikan nilai 1 pada elemen array syarat username syarat["username"] = 1; // jika jumlah karakter kurang dari 5 else //tuliskan pesan error pada div pesan document.getelementbyid("pesan").innerhtml="username Harus lebih dari 5 karakter"; //sembunyikan logo hidelogo(0); //memberikan nilai 0 pada elemen array syarat username

8 syarat["username"] = 0; //eksekusi fungsi ceksyarat ceksyarat(); //fungsi untuk mengecek data yang diinput pada textfield konfirmasi password function cekkonfirmasi(konfirmasi) //mengambil data pada textfield password var password = document.getelementsbytagname("input")["password"].value; //jika data pada textfield password sama dengan data pada textfield konfirmasi password if (password == konfirmasi) //kosongkan div pesan document.getelementbyid("pesan").innerhtml=""; //tampilkan logo penanda syarat telah dipenuhi untuk kasus konfirmasi password showlogo(1); //memberikan nilai 1 pada elemen array syarat konfirmasi syarat["konfirmasi"] = 1; //jika tidak sama else //tuliskan pesan error pada div pesan document.getelementbyid("pesan").innerhtml="konfirmasi Password dan Password harus sama"; //sembunyikan logo hidelogo(1); //memberikan nilai 0 pada elemen array syarat konfirmasi syarat["konfirmasi"] = 0; //eksekusi fungsi ceksyarat ceksyarat(); //fungsi mengecek format function cek ( ) //jika format benar if ( .indexof("@") > 0 && .lastindexof(".") > .indexof("@")) //kosongkan div pesan document.getelementbyid("pesan").innerhtml=""; //tampilkan logo penanda syarat telah dipenuhi untuk kasus showlogo(2); //memberikan nilai 1 pada elemen array syarat[" "] = 1; else //tuliskan pesan error pada div pesan document.getelementbyid("pesan").innerhtml="format masih salah"; //sembunyikan logo hidelogo(2); //memberikan nilai 0 pada elemen array syarat syarat[" "] = 0; //eksekusi fungsi ceksyarat ceksyarat(); //fungsi menampilkan dan menyembunyikan logo penanda syarat terpenuhi function showlogo(index) document.getelementsbytagname("img")[index].style.display=""; function hidelogo(index)

9 document.getelementsbytagname("img")[index].style.display="none"; //fungsi mengecek syarat secara keseluruhan function ceksyarat() // mencari jumlah masing-masing elemen array syarat var totalstatus = syarat["username"] + syarat["konfirmasi"] + syarat[" "]; // jika semua syarat telah terpenuhi (semua elemen syarat bernilai 1) if (totalstatus == 3) //menghilangkan atribut disabled pada tombol document.getelementsbytagname("button")[0].disabled = ""; //mengubah warna text pada div pesan menjadi hijau document.getelementbyid("pesan").style.color="green"; //menuliskan pesan pada div pesan document.getelementbyid("pesan").innerhtml="data yang anda input sudah valid"; //jika belum bernilai 3 else //mendisable tombol document.getelementsbytagname("button")[0].disabled = "disabled"; //mengubah warna text pada div pesan menjadi merah document.getelementbyid("pesan").style.color="red"; 1.6 Latihan 1. Buatlah form javascript yang berisikan pengentrian login, paswword untuk membuka form aplikasi tertentu. 2. Buatlah aplikasi lapis 3 untuk menu level dengan menggunakan javascripts.

dokumen-dokumen yang mirip

Modul 6 Java Scripts I

Modul 6 Java Scripts I 1.1 Tujuan a. Mahasiswa dapat mengoperasikan struktur java scripts b. Mahasiswa dapat memakai objeck dan form pada java scripts 1.2 Materi a. Java Scripts b. Pemrograman c. Form