Modul 7 Java Scripts II

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 sebelumny a 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 best"); document.write("
"); document.write("I like javascript");

Membuk a window browser baru melalui link:

Membuka window baru melalui link File welcome.html harus ada terlebih dahulu dan isinya terserah anda. Menggunakan prompt :

<script> var nama = prompt("Nama anda : ", "ketikkan nama anda di sini"); document.write("Hi " + nama + " Selamat menikmati pelajaran ini!"); Prompt dengan if

<script> 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"); }

Deklarasi isi variabel dan perhitungannya :

<script> 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("
"); document.write("Hasil penjumlahan " + a + " dan " + b + " adalah : " +c); document.write("
"); 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"); }

Merespon elemen combo pada form dan link :

<SELECT onChange= "document.bgColor=this.options[this.selectedIndex].value"> Torquoise Sea Green Sky Blue Sandy Brow n Lavender Blush Deep Pink White Website Unsada Merespon password :

Username:
Password:

<script> 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 :



Anda berhasil masuk ke halaman ini Looping pada javascript : Cont oh 1 : looping for

<script> var janji = "Aku akan belajar lebih giat"; var jumlah = 23; document.write("Janji mahasiswa: "); document.write("
"); for (var x = 1; x <= jumlah; x++) { document.write( janji + "
") }

Cont oh 2 : Array dan looping

<script> 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);

Menempatkan kode javascript di file lain : Format : <SCRIPT LANGUA GE="JAVASCRIPT" SRC="mycode.j s" TYPE="TEXT/JAVASCRIPT"> Dimana mycode.js adalah file yang berisi kode javascript anda. Cont oh : Validasi form dengan file js : {ketikan program berikut} Nama file : validasi.html <script type="text/javascript" src="js.js"> <style> #pesan { color: red; font-weight:bolder; } img { vertical-align:middle; } tr { height:30px; }

Username :
Password :
Konfirmasi Password :
email :
daftar

• Cara kerjany a sederhana saja, tombol submit didisable selama data pada form belum disi dengan benar
• Ada tiga syarat yang harus dipenuhi us er:
  1. Mengisi username minimal 5 karakter
  2. Mengisi konfirmasi password sama dengan password
  3. Mengisi email dalam format yang benar
• 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).
• Tombol akan berfungsi jika semua elemen array syarat sudah bernilai 1.
• untuk lebih jelasnya silahkan lihat file javascriptnya.
• Skrip telah diujicobakan dan berhasil dengan baik pada browser Firefox 3.0, IE 7.0, Opera 8.0

Ketikkan juga program javascript berikut : File : js.js // membuat array syarat dan memberik an nilai 0 (nol) syarat = new Array(); syarat["username"] = 0; syarat["konfirmasi"] = 0; syarat["email"] = 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("pes an").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("pes an").innerHTML="Username Harus lebih dari 5 karakter"; //sembunyikan logo hideLogo(0); //memberikan nilai 0 pada elemen array syarat username

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("pes an").innerHTML=""; //tampilkan logo penanda syarat telah dipenuhi unt uk 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("pes an").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 email function cekEmail(email) { //jika format email benar if (email.indexOf("@") > 0 && email.lastIndexOf(".") > email.indexOf(" @")) { //kosongkan div pesan document.getElementById("pes an").innerHTML=""; //tampilkan logo penanda syarat telah dipenuhi unt uk kasus email showLogo(2); //memberikan nilai 1 pada elemen array email syarat["email"] = 1; } else { //tuliskan pesan error pada div pesan document.getElementById("pes an").innerHTML="Format Email masih salah"; //sembunyikan logo hideLogo(2); //memberikan nilai 0 pada elemen array syarat email syarat["email"] = 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) {

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["email"]; // 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("pes an").style.color="green"; //menuliskan pes an pada div pesan document.getElementById("pes an").innerHTML="Dat a 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("pes an").style.color="red"; } } 1.6 Latihan 1. Buatlah form javascript yang berisikan pengentrian login, paswword unt uk membuka form aplikasi tertentu. 2. Buatlah aplikasi lapis 3 untuk menu level dengan menggunakan javascripts.