LAPORAN
PRAKTIKUM
PEMROGRAMAN
WEB
MODUL 7
Disusun oleh
:
NAMA : Fitria Dewi Probowati
NIM : L200120111
JURUSAN TEKNIK INFORMATIKA
FAKULTAS KOMUNIKASI DAN INFORMATIKA
UNIVERSITAS
MUHAMMADIYAH SURAKARTA
2014
A. TUJUAN
Mengetahui dan memahami bahasa
Javascript dalam pemrograman web.
B. LANDASAN TEORI
Javascript adalah bahasa yang
berbentuk kumpulan script yang pada fungsinya berjalan pada suatu dokumen HTML,
sepanjang sejarah internet bahasa ini adalah bahaa script pertama untuk web.
Bahasa ini adalah bahasa pemrograman untuk memberikan kemampuan tambahan
terhadap bahasa HTML dengan mengijinkan pengeksekusian perintah – perintah di
user, yang artinya di sisi browser bukan di sisi server web.
SEJARAH JAVASCRIPT
Sejarah JavaScript terdiri dari :
1.
Penulisan Script
<SCRIPT
language=”Javascript”>
letakkan
script disisi
</SCRIPT>
2.
Komentar di Javascript
<SCRIPT
language=”Javascript”>
<!--
letakkan
komentar di sisi
//-->
</SCRIPT>
C. ALAT DAN BAHAN
1. Satu Unit PC ( Personal Computer )
2. Sistem Operasi Windows XP
3. Notepad
4. Web Browser
5. Dua file image berekstensi.jpg
6. Lembar Kerja Percobaan
D. LANGKAH – LANGKAH PRAKTIKUM
Percobaan 1 (Javascript)
Langkah – langkahnya :
1. Buka Aplikasi Notepad
2. Ketikan script berikut :
</HEAD>
<BODY>
<SCRIPT
language="Javascript">
<!--
alert
("Hallo !");
// -->
</SCRIPT>
</BODY>
</HTML>
3. Simpan file dengan nama percobaan1.html
4. Buka file dengan menggunakan browser
5. Gambarlah hasilnya :
Percobaan 2 (MouseOver)
Langkah –
langkahnya
1. Letakkan 2 buah file image
berektensi .jpg dan beri nama kedua
filetersebut masing – masing dengan nama gambar1.jpg
dan gambar2.jpg
2. Buka Aplikasi Notepad
3. Ketikan script berikut ini :
<html>
<head>
<title>Mouse
Over</title>
</head>
<body>
<a
href="javascript:;"
onMouseOver="document.img_1.src='gambar1.jpg';"
onMouseOut="document.img_1.src='gambar2.jpg';">
<img
name="img_1" src='gambar2.jpg' height='100' width='100'>
</a>
</body>
</html>
4. Simpan file dengan nama mouseover.html
5. Buka file dengan menggunakan browser
6. Arahkan pointer mouse ke gambar,
amati yang terjadi
7. Gambarlah hasilnya :
Percobaan 3 (Character Counter)
Langkah –
langkahnya :
1. Buka Aplikasi Notepad
2. Ketikan script berikut ini :
<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 maksimum 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="100"readonly></form>
</body>
</html>
3. Simpan file dengan nama counter.html
4. Buka file dengan menggunakan browser
5. Ketikan karakter pada text area
sebanyak101 karakter, kemudian amati yang
terjadi
6. Gambarlah hasilnya :
Perconaan 4 (Kalkulator Sederhana)
Langkah –
langkahnya :
1. Buka Aplikasi Notepad
2. Ketikan script berikut ini :
<html>
<head>
<title>Kalkulator</title>
<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
= </br><input type='text' name='hasil' size='5'></br>
</form>
</body>
</html>
3. Simpan file dengan nama
kalkulator.html
4. Buka file dengan menggunakan browser
5. Masukkan nilai A dan B, kemudian
klik salah satu tanda operasi (+, -, *, /), amati hasilnya
6. Gambarlah hasilnya :
E. TUGAS
1. Buatlah aplikasi pengambilan
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
Tuliskan
scriptnya dan lampirkan hasil tampilan di browser.
Scriptnya :
<html>
<head>
<title>Javascript</title>
</head>
<body>
<p>
<center>
<script
type="text/javascript">
var
nilai=prompt ("Masukan
Nilai","");
if(nilai>=90)
{
document.write ("NILAI:
",nilai+", GRADE: A");
}
else
if(nilai<=85 && nilai >=80)
{
document.write ("NILAI: ",
nilai+", GRADE : B");
}
else
if(nilai<=75 && nilai >=70)
{
document.write ("NILAI : ",
nilai+", GRADE : C");
}
else
if(nilai<=65 && nilai >=60)
{
document.write ("NILAI : ", nilai+", GRADE : D");
}
else
if(nilai<=60)
{
document.write ("NILAI : ",nilai+", GRADE : E");
}
</script>
</center
</body>
</html>
Hasil Gambarnya :
