UAS Pemrograman Web 1
Nama : Johan Sanjaya
NIM : 181011401366
1.
Buatlah calculator sederhana
dengan menggunakan latar belakang foto anda masing- masing..
Jawaban :
<HTML>
<HEAD>
<title>Program kalkulator</title>
<meta
charset="utf-8">
<STYLE>
.KALK{MARGIN:0 40%;}
.KALK
.BUTT{MARGIN:2PX;WIDTH:48PX;HEIGHT:25PX;FONT-WEIGHT:BOLD;}
</STYLE>
</HEAD>
<BODY background="Foto Uas.jpg";>
<FORM NAME="KAL" class="KALK">
<TABLE BORDER=1; WIDTH=230;
HEIGHT=150; STYLE="BACKGROUND:#999;">
<TR>
<TD HEIGHT=30;
STYLE="BACKGROUND:#555;">
<INPUT TYPE="text"
NAME="Input" Size="23"> <SPAN
STYLE="COLOR:#FFF"> <I>Johan
Sanjaya</I></SPAN>
<br>
</TD>
</TR>
<TR>
<TD>
<INPUT CLASS="BUTT"
TYPE="button" NAME="seven" VALUE=" 7 "
OnClick="KAL.Input.value += '7'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="eight" VALUE=" 8 "
OnCLick="KAL.Input.value += '8'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="nine" VALUE=" 9 "
OnClick="KAL.Input.value += '9'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="plus" VALUE=" + "
OnClick="KAL.Input.value += ' + '">
<br>
<INPUT CLASS="BUTT"
TYPE="button" NAME="four" VALUE=" 4 "
OnClick="KAL.Input.value += '4'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="five" VALUE=" 5 "
OnCLick="KAL.Input.value += '5'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="six" VALUE=" 6 "
OnClick="KAL.Input.value += '6'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="minus" VALUE=" - "
OnClick="KAL.Input.value += ' - '">
<br>
<INPUT CLASS="BUTT"
TYPE="button" NAME="one" VALUE=" 1 "
OnClick="KAL.Input.value += '1'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="two" VALUE=" 2 "
OnCLick="KAL.Input.value += '2'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="three" VALUE=" 3 "
OnClick="KAL.Input.value += '3'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="times" VALUE=" x "
OnClick="KAL.Input.value += ' * '">
<br>
<INPUT CLASS="BUTT"
TYPE="button" NAME="clear" VALUE=" C "
OnClick="KAL.Input.value = ''">
<INPUT CLASS="BUTT"
TYPE="button" NAME="zero" VALUE=" 0 "
OnClick="KAL.Input.value += '0'">
<INPUT CLASS="BUTT"
TYPE="button" NAME="DoIt" VALUE=" = "
OnClick="KAL.Input.value = eval(KAL.Input.value)">
<INPUT CLASS="BUTT"
TYPE="button" NAME="div" VALUE=" / "
OnClick="KAL.Input.value += ' / '">
<br>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
2.
Buatlah script tanggal dan jam
real (jam dinding) seperti contoh gambar (bagian atas saja, kalender tidak
usah), yang mana selama kita akses halaman tersebut, angka penunjuk detik akan
terus berjalan. Tanggal dan jam yang digunakan ialah tanggal jam lokal komputer
kalian masing-masing.
Jawaban
:
<!DOCTYPE html>
<html>
<head>
<title>Jam (Aktif) With JavaScript</title>
</head>
<body>
<!-- Menampilkan Jam (Aktif) -->
<div id="clock"></div>
<script type="text/javascript">
<!--
function showTime() {
var a_p =
"";
var today = new
Date();
var curr_hour =
today.getHours();
var curr_minute
= today.getMinutes();
var curr_second
= today.getSeconds();
if (curr_hour
< 12) {
a_p =
"AM";
} else {
a_p =
"PM";
}
if (curr_hour
== 0) {
curr_hour =
12;
}
if (curr_hour
> 12) {
curr_hour =
curr_hour - 12;
}
curr_hour =
checkTime(curr_hour);
curr_minute =
checkTime(curr_minute);
curr_second =
checkTime(curr_second);
document.getElementById('clock').innerHTML=curr_hour
+ ":" + curr_minute + ":" + curr_second + " " +
a_p;
}
function checkTime(i) {
if (i < 10)
{
i =
"0" + i;
}
return i;
}
setInterval(showTime, 500);
//-->
</script>
<!-- Menampilkan Hari, Bulan dan Tahun -->
<br>
<script type='text/javascript'>
<!--
var months = ['Januari', 'Februari', 'Maret',
'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November',
'Desember'];
var myDays = ['Minggu', 'Senin', 'Selasa',
'Rabu', 'Kamis', 'Jum'at', 'Sabtu'];
var date = new Date();
var day = date.getDate();
var month = date.getMonth();
var thisDay = date.getDay(),
thisDay = myDays[thisDay];
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay + ', ' + day + ' ' +
months[month] + ' ' + year);
//-->
</script>
</body>
</html>
3.
Buatlah script untuk menghitung
argo taksi sederhana berdasarkan menit. Silahkan rancang variable yang
dibutuhkan. Misalkan:
JamReal, JamMulai, JamSelesai, LamaArgo (menit) =JamSelesai – JamMulai, TarifperMenit,
Tagihan(Rp.)=LamaArgo x Tarif. (Boleh digabung dengan nomor 2)
<HTML>
<HEAD><TITLE>TaksiKu</TITLE></HEAD>
<BODY>
<div id="clock"></div>
<script
type="text/javascript">
<!--
function
showTime() {
var a_p = "";
var today = new Date();
var curr_hour = today.getHours();
var curr_minute = today.getMinutes();
var curr_second = today.getSeconds();
if
(curr_hour < 12) {
a_p = "AM";
} else {
a_p = "PM";
}
if (curr_hour == 0) {
curr_hour = 12;
}
if (curr_hour > 12) {
curr_hour = curr_hour - 12;
}
curr_hour = checkTime(curr_hour);
curr_minute = checkTime(curr_minute);
curr_second = checkTime(curr_second);
document.getElementById('clock').innerHTML=curr_hour
+ ":" + curr_minute + ":" + curr_second + " " +
a_p;
}
function
checkTime(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
setInterval(showTime,
500);
//-->
</script>
<!--
Menampilkan Hari, Bulan dan Tahun -->
<br>
<script
type='text/javascript'>
<!--
var
months = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli',
'Agustus', 'September', 'Oktober', 'November', 'Desember'];
var
myDays = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jum'at',
'Sabtu'];
var
date = new Date();
var
day = date.getDate();
var
month = date.getMonth();
var
thisDay = date.getDay(),
thisDay = myDays[thisDay];
var
yy = date.getYear();
var
year = (yy < 1000) ? yy + 1900 : yy;
document.write(thisDay
+ ', ' + day + ' ' + months[month] + ' ' + year);
//-->
</script>
<SCRIPT language="JavaScript">
<!--
function hitungtotal()
{
var nama = (document.fform.inama.value);
var jamMulai = parseFloat(document.fform.ijammulai.value);
var jamSelesai = parseFloat(document.fform.ijamselesai.value);
var tagihan=0.0;
var lamaArgo=0.0;
lamaArgo=jamSelesai-jamMulai;
tagihan=lamaArgo*35000;
document.fform.olamaargo.value=lamaArgo;
document.fform.total.value=tagihan;
// gunakan untuk mengecek !!! alert (total);
}
//--></SCRIPT>
<FORM NAME ="fform">
<table border="1"
align="center"width="70%">
<tr>
<td width="100%" colspan="2"><H2
ALIGN="center">Argo TaksiKu tarif bawah 35.000 per jam</H2>
<H2 ALIGN="center">oleh Johan Sanjaya
181011401366</H2></td>
</tr>
<tr>
<td width="50%"><PRE>
Nama :<input type="text" size="20"
name="inama">
Jam Mulai :<input type="time" size="11"
name="ijammulai">
Jam Selesai :<input type="time" size="11"
name="ijamselesai">
</td></pre>
<td width="50%"><pre>
Lama Argo dalam jam <input type="text" size="10"
name="olamaargo">
Total Bayar :<input type="text" size="10" name="total"></td><pre>
</tr>
<tr>
<td width="100%" colspan="2">
<center>
<INPUT TYPE="button" value="Hitung"
onclick="hitungtotal()">
<INPUT TYPE="reset" value="Ulang">
</center></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>
Comments
Post a Comment