Scribd
Unggah
97 tayangan

Javascript Calculator Code

Dokumen ini berisi soalan dan kod sumber untuk membangunkan laman web pendidikan bertema masakan dengan beberapa halaman termasuk halaman utama, resepi masakan, hubungi kami, maklum balas, dan pertanyaan.

Diunggah oleh

chazz
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
97 tayangan

Javascript Calculator Code

Dokumen ini berisi soalan dan kod sumber untuk membangunkan laman web pendidikan bertema masakan dengan beberapa halaman termasuk halaman utama, resepi masakan, hubungi kami, maklum balas, dan pertanyaan.

Diunggah oleh

chazz
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 14

CBWP 2203

Contents
Soalan 1 ................................................................................................................................ 3
Tugasan : Kalkulator ............................................................................................................. 3
Nama Fail : Q1.html .......................................................................................................... 3
Kod Sumber : .................................................................................................................... 5
Soalan 2 .............................................................................................................................. 10
Laman Web Pendidikan (Masakan) ..................................................................................... 10
Nama Fail : Q2.html ........................................................................................................ 10
Nama Fail : classic_dish.html .......................................................................................... 11
Kod Sumber : .................................................................................................................. 11
Nama Fail : contact_us.html ............................................................................................ 12
Kod Sumber : .................................................................................................................. 12
Nama Fail : work_in_progress.html ................................................................................. 13
Kod Sumber : .................................................................................................................. 13
Nama Fail : enquiries.html ............................................................................................... 14
Kod Sumber : .................................................................................................................. 14
RUJUKAN ......................................................................................................................... 15

CBWP 2203

Soalan 1
Tugasan : Kalkulator
Nama Fail : Q1.html
Gambarajah kalkulator adalah seperti berikut:

CBWP 2203

Contoh Pengiraan yang dimasukkan adalah seperti berikut : 9 x 9

Jawapan yang dipaparkan adalah seperti berikut : 81

CBWP 2203

Kod Sumber :
<!-MATRICULATION No.: 830223085519-002
SEMESTER : MAY 2016
LEARNING CENTRE : PETALING JAYA
QUESTION 1 : KALKULATOR
-->
<html>
<head>
<title>Question 1 : Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script language="javascript">
window.onload = function(){
//_I DECLARE MY VARIABLE TO GET ALL ELEMENT VALUE HERE
var buttons = document.getElementsByClassName("cls_input"),
result = document.getElementById("txt_display"),
clear = document.getElementById("btn_c");
//_SET TO ALL INPUT ELEMENT_ONCLICK
for(var i = 0; i < buttons.length; i++){
if(buttons[i].value === "="){
buttons[i].addEventListener("click", calculate(i));
} else {
buttons[i].addEventListener("click", addValue(i));
}
}
//_COMBINE ALL NUMBER + OPERATOR BEFORE DISPLAY ON SCREEN
function addValue(i) {
return function() {
result.value += buttons[i].value;
};
}

CBWP 2203

//_EXECUTE CALCULATION
function calculate(i){
return function() {
//_CHECK IF NO INPUT KEY-IN
if(result.value !== "") {
result.value = eval(result.value);
}
};
}
clear.onclick = function(){
result.value = "";
};
};
</script>
<style>
.cls_input{
width: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<form name="frm_calc" id="frm_calc" action="">
<table>
<tr>
<td colspan="4" style="text-align: left;">
830223085519002<br/>
CBWP2203 WEB PROGRAMMING<br/>
Soalan 1 : Kalkulator
</td>
</tr>

CBWP 2203

</table>
<table border="1" style="text-align: center; border: black solid 3px;">
<tr>
<td colspan="4">
<input type="text" name="txt_display" id="txt_display" style="text-align: right;"
readonly="readonly"/>
</td>
</tr>
<tr>
<td>
<input type="button" name="btn_7" id="btn_7" value="7" class="cls_input" />
</td>
<td>
<input type="button" name="btn_8" id="btn_8" value="8" class="cls_input" />
</td>
<td>
<input type="button" name="btn_9" id="btn_9" value="9" class="cls_input" />
</td>
<td>
<input type="button" name="btn_slash" id="btn_slash" value="/"
class="cls_input" style="background-color: paleturquoise;" />
</td>
</tr>
<tr>
<td>
<input type="button" name="btn_4" id="btn_4" value="4" class="cls_input" />
</td>
<td>
<input type="button" name="btn_5" id="btn_5" value="5" class="cls_input" />
</td>
<td>
<input type="button" name="btn_6" id="btn_6" value="6" class="cls_input" />
</td>

CBWP 2203

<td>
<input type="button" name="btn_asteriq" id="btn_asteriq" value="*"
class="cls_input" style="background-color: paleturquoise;" />
</td>
</tr>
<tr>
<td>
<input type="button" name="btn_1" id="btn_1" value="1" class="cls_input" />
</td>
<td>
<input type="button" name="btn_2" id="btn_2" value="2" class="cls_input" />
</td>
<td>
<input type="button" name="btn_3" id="btn_3" value="3" class="cls_input" />
</td>
<td>
<input type="button" name="btn_minus" id="btn_minus" value="-"
class="cls_input" style="background-color: paleturquoise;" />
</td>
</tr>
<tr>
<td>
<input type="button" name="btn_c" id="btn_c" value="c" class="cls_input"
style="background-color: mistyrose;" />
</td>
<td>
<input type="button" name="btn_0" id="btn_0" value="0" class="cls_input" />
</td>
<td>
<input type="button" name="btn_equal" id="btn_equal" value="="
class="cls_input" style="background-color: mistyrose;" />
</td>
<td>

CBWP 2203

<input type="button" name="btn_plus" id="btn_plus" value="+" class="cls_input"


style="background-color: paleturquoise;" />
</td>
</tr>
</table>
</form>
</body>
</html>

CBWP 2203

Soalan 2
Laman Web Pendidikan (Masakan)
Nama Fail : Q2.html
Gambarajah utama laman web pendidikan berkenaan masakan adalah seperti berikut:

10

CBWP 2203

Nama Fail : classic_dish.html


Gambarajah yang memaparkan kandungan resepi masakan adalah seperti berikut:

Kod Sumber :
Sila rujuk fail Q2.html

11

CBWP 2203

Nama Fail : contact_us.html


Gambarajah Contact Us untuk pengunjung web menghubungi pentadbir laman web
pendidikan berkenaan masakan adalah seperti berikut:

Kod Sumber :
Sila rujuk fail contact_us.html

12

CBWP 2203

Nama Fail : work_in_progress.html


Gambarajah ralat dan laman web dalam proses penambahbaikan jika berlaku sebarang
masalah kepada laman web pendidikan berkenaan masakan adalah seperti berikut:

Kod Sumber :
Sila rujuk fail work_in_progress.html

13

CBWP 2203

Nama Fail : enquiries.html


Gambarajah untuk pengunjung membuat sebarang pertanyaaan bagi laman web
pendidikan berkenaan masakan adalah seperti berikut:

Kod Sumber :
Sila rujuk fail enquiries.html

(678 patah perkataan)

14

CBWP 2203

APENDIKS

RUJUKAN
1. Mohd Juzaidin Abd Aziz, (2008), CBWP2203 Web Programming, Open
University Malaysia (OUM).

15

Anda mungkin juga menyukai