F 33720 KPI 7 Java Script 2

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 :
<html>
<body>
<script language="javascript">
document.write("JavaScript membuat html menjadi semakin hebat");
</script>
</body>
</html>
Cobakan juga program berikut :
<html>
<body>
alert("Ssst… lagi belajar JavaScript");
</script>
</body>
</html>
Kemudian yang berikut :
<html>
<body>
document.write("JavaScript is the <b> best</b>");
document.write("<br>");
document.write("I like <font color=blue>javascript</font>");
</script>
</body>
</html>
Membuk a window browser baru melalui link:
<html>
<body>
<a HREF="javascript:void(0)" onclick="window.open('welcome.html')">

Membuka window baru melalui link</a>
</body>
</html>
File welcome.html harus ada terlebih dahulu dan isinya terserah anda.
Menggunakan prompt :
<html>
<body>
<script>
var nama = prompt("Nama anda : ", "ketikkan nama anda di sini");
document.write("Hi " + nama + " Selamat menikmati pelajaran ini!");

</script>
</body>
</html>
Prompt dengan if
<html>
<body>
<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");
}
</script>
</body>
</html>
Deklarasi isi variabel dan perhitungannya :
<html>
<body>
<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("Hasil penjumlahan " + a + " dan " + b + " adalah : " +c);
document.write("Hasil pembagian " + a + " dan " + b + " adalah : " +d);
</script>
</body>
</html>
Cobakan untuk jenis perhitungan lain : kurang, kali, pangkat, dsbnya.
Menggunakan confirm bersama logika if
<html>
<body>
var respon = confirm("Apakah anda ingin meneruskan pelajaran javascript?");
if (respon == true)
{
document.write("Silahkan meneruskan pelajaran");
}
else
{
document.write("Belajarlah di lain waktu");
}
</script>
</body>
</html>
Merespon elemen combo pada form dan link :
<html>
<body>
<FORM>
<SELECT onChange=
"document.bgColor=this.options[this.selectedIndex].value">
<OPT ION VALUE="40E0D0"> Torquoise
<OPT ION VALUE="2E8B57"> Sea Green
<OPT ION VALUE="87CEEB"> Sky Blue
<OPT ION VALUE="F4A460"> Sandy Brow n
<OPT ION VALUE="FFF0F5"> Lavender Blush
<OPT ION VALUE="FF1493"> Deep Pink
<OPT ION VALUE="FFFFFF" SELECT ED> White
</SELECT>
</FORM>
<A HREF="http://www.unsada.ac.id" onclick="aler t('Kembali ke Unsada')">Website

Unsada</A>
</body>
Merespon password :
</html>
<html>
<head>
<title> </title>
</head>
<body>
<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>
<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");
}
</script>
Kemudian file : berikut.html dengan contoh isi sebagai berikut :
</body>
</html>
<html>
<body>
Anda berhasil masuk ke halaman ini
</body>
</html>
Looping pada javascript :

Cont oh 1 : looping for
<html>
<body>
<script>
var janji = "Aku akan belajar lebih giat";
var jumlah = 23;
document.write("Janji mahasiswa: ");

for (var x = 1; x <= jumlah; x++)
{
document.write( janji + "<br>")
}
</script>
</body>
</html>
Cont oh 2 : Array dan looping
<html>
<body>
<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);
</script>
</body>
</html>
Menempatkan kode javascript di file lain :
Format :
<SCRIPT LANGUA GE="JAVASCRIPT" SRC="mycode.j s"
TYPE="TEXT/JAVASCRIPT">

</SCRIPT>
Dimana mycode.js adalah file yang berisi kode javascript anda.
Cont oh :
Validasi form dengan file js : {ketikan program berikut}
Nama file : validasi.html

<html>
<head>
<title>Validasi Registrasi</title>
<script type="text/javascript" src="js.js"></script>
<style>
#pesan {
color: red;
font-weight:bolder;
}
img {
vertical-align:middle;
}
tr {
height:30px;
}
</style>
<body>
<form>
<table>
<tr>
<td>Username :</td>
<td>
<input type="text" name="username" onkeyup="cekUser(this. value.length);"
/>
<img src="valid.gif" style="display:none;" />
</td>
</tr>
<tr>
<td>Password :</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td>Konfirmasi Password :</td>
<td>
<input type="password" name="password2"
onkeyup="cekKonfirmasi(this. value);" />
</td>
</tr>
<tr>
<td>email :</td>
<td>
<input type="text" name="email" onkeyup="cekEmail(this. value);"/>
</td>
</tr>
<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; widt h: 600px;">
<ul>
<li>Cara kerjany a sederhana saja, tombol submit didisable selama data pada form
belum disi dengan benar</li>
<li>Ada tiga syarat yang harus dipenuhi us er:
<ol>
<li>Mengisi username minimal 5 karakter</li>
<li>Mengisi konfirmasi password sama dengan password</li>
<li>Mengisi email 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>
</body>
</html>
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
// 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
}
//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) {
//tampilkan logo penanda syarat telah dipenuhi unt uk kasus konfirmasi password
showLogo(1);
//memberikan nilai 1 pada elemen array syarat konfirmasi
//jika tidak sama
} else {
document.getElementById("pes an").innerHTML="Konfirmasi Password dan
Password harus sama";
//sembunyikan logo
hideLogo(1);
//memberikan nilai 0 pada elemen array syarat konfirmasi
}
ceksyarat();
}
//fungsi mengecek format email

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

F 33720 KPI 7 Java Script 2

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

F 33720 KPI 7 Java Script 2

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul 7

1.3 Alat dan Bahan

1.4 Prosedur Praktikum

<a HREF="javascript:void(0)" onclick="window.open('welcome.html')">

document.write("Hi " + nama + " Selamat menikmati pelajaran ini!");

document.write("Hasil penjumlahan a dan b adalah : " +c);

Menggunakan confirm bersama logika if

<A HREF="http://www.unsada.ac.id" onclick="aler t('Kembali ke Unsada')">Website

Looping pada javascript :

document.write("Janji mahasiswa: ");

Cont oh 2 : Array dan looping

Dimana mycode.js adalah file yang berisi kode javascript anda.

Nama file : validasi.html

Ketikkan juga program javascript berikut :

//fungsi untuk mengecek jumlah karakter username yang sudah diinput

//fungsi mengecek format email

//fungsi menampilkan dan menyembunyikan logo penanda syarat terpenuhi

//fungsi mengecek syarat secara keseluruhan

Anda mungkin juga menyukai