Mengetahui dan memahami bahasa Javasript dalam pemrograman web
LANDASAN TEORI
Javascript adalah bahasa yang berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML. bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan terhadap bahasa HTML.
ALAT DAN BAHAN
1. PC
2. Sistem Operasi Windows 7
3. Browser Mozilla Firefox/Chrome
4. Notepad++
5. Lembar kerja percobaan
Percobaan 1 (Javascript)
1. buka notepad
2. kemudia ketikan kode sebagai berikut
<!DOCTYPE HTML>
<head><body>
<script language="JavaScript">
alert("Hallo !");
</script>
</body>
</html>
3. simpan file dengan nama percobaan1.html
4. Buka file dengan browser
5. Hasil
Percobaan 2 (MouseOver)
1. siapkan 2 buah file gambar, dan beri nama gambar1.jpg dan gambar2.jpg
2. buka notepad
3. kemudia ketikan kode sebagai berikut
<!DOCTYPE HTML>
<head><body>
<a href="javascript:;"onMouseOver="document.img_1.src='gambar1.jpg';"
onMouseOver="document.img_1.src='gambar2.jpg';">
<img name="img_1" src='gambar2.jpg' height='100' width='100'></a>
</script>
</body>
</html>
4. simpan file dengan nama MouseOver.html
5. Buka file dengan browser
6. Arahkan pointer mouse ke gambar
7. Hasil
Percobaan 3 (Counter)
1. buka notepad
2. kemudia ketikan kode sebagai berikut
<!DOCTYPE HTML>
<head><title>counter</title><script>
function CountMax()
{
var wert,max;
max=100
wert = max-(document.form1.question.value.length);
if (wert < 0) {
alert("maaf, batas maximum pengisian adalah "+ max + "karakter !");
document.form1.question.value = document.form1.question.value.substring (0,max);
wert = max-(document.form1.question.value.length);
document.form1.rv_counter.value = wert;
}else{
document.form1.rv_counter.value = max- (document.form1.question.value.length);
}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
<textarea name="question" cols="60" rows="3" id="question" OnFocus="CountMax();"
OnClick="CountMax();" ONCHANGE="CountMax();"
OnKeyDown="CountMax();" OnKeyUp="CountMax();" wrap="virtual"></textarea>
<font face="Arial, Helvetica, Sans-serif, Bookman Old Style, Comic Sans MS" size="2">sisa
<input name="rv_counter" type="text" size="3" maxlength="3" value="100readonly">
</form></body>
</html>
3. simpan file dengan nama counter.html
4. Ketikan beberapa karakter ke textarea
5. Hasil
Percobaan 4 (KALKULATOR SEDERHANA)
1. buka notepad
2. kemudia ketikan kode sebagai berikut
<!DOCTYPE HTML>
<head><title>counter</title><body>
<script language="JavaScript">
function tambah()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
tambah=parseInt (nilaia)+parseInt (nilaib);
document.myform.hasil.value=tambah;
}
function kurang()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
kurang=nilaia-nilaib;
document.myform.hasil.value=kurang;
}
function kali()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
kali=nilaia*nilaib;
document.myform.hasil.value=kali;
}
function bagi()
{
nilaia=document.myform.a.value;
nilaib=document.myform.b.value;
bagi=nilaia/nilaib;
document.myform.hasil.value=bagi;
}
</script>
</head><body>
<form name="myform">
<h3>Kalkulator sederhana</h3><br>
Nilai A = <input type="text" name="a" size="5"><br>
Nilai B = <input type="text" name="b" size="5"><br><br>
<input type="button" name="aksi" value="+" onclick='tambah()'>
<input type="button" name="aksi" value="-" onclick='kurang()'>
<input type="button" name="aksi" value="*" onclick='kali()'>
<input type="button" name="aksi" value="/" onclick='bagi()'><br><br>
<b>Hasil = </b>
<input type="text" name="hasil" size="5"><br></form></body>
</html>
3. simpan file dengan nama kalkulator.html
4. Masukan nulai A dan B, dan klik salah satu tanda operasi
5. Hasil
TUGAS
1. Buatlah aplikasi pengambil keputusan sederhana menggunakan javascript yang menghitung nilai dengan ketentuan :
Jika nilai 0-20=E
Jika nilai 21-40=D
Jika nilai 41-60=C
Jika nilai 61-80=B
Jika nilai 81-100=A
untuk menampilkan tugas tersebut, tuliskan script dibawah ini
<!DOCTYPE HTML>
<head><title>counter</title>
<script language="JavaScript">
var nilai;
nilai=prompt("isi nilai","");
if ((nilai <= 20) && (nilai >= 0))
{
document.write("nilai E");
}
else if ((nilai <= 40) && (nilai >= 21))
{
document.write("nilai D");
}
else if ((nilai <= 60) && (nilai >= 41))
{
document.write("nilai C");
}
else if ((nilai <= 80) && (nilai >= 61))
{
document.write("nilai B");
}
else if ((nilai <= 100) && (nilai >= 81))
{
document.write("nilai A");
}
</script>
</html>
Hasil
