Make a calculator with java script
Java Script is a user interface scripting language developed by Netscape for its Navigator and Communicator World Wide Web browsers. Microsoft has developed a compatible language, called J-Script, for its Internet Explorer browser.
While the syntax of the Java Script programming language resembles that of Java, the two languages are actually unrelated. Java Script source code is embedded in HTML documents, and is interpreted by a World Wide Web browser. Java source code is compiled into a bytecode, stored in a separate file, which the World Wide Web browser downloads and executes separately from an HTML page.
Lets make a simple calculator with java script!
First we must make a function result that processing value which input in the text field. The result depend on operator process, and the result will show in to the output text field. Second we make form, there are 3 text field for input and output number, combobox for operator (+,-,*,/), and button for process a result. Last we call function with onclick action in button.
Complete Source Code for simple calculator with java script :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Kalkulator</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">2: <!--
3:
4: function hasil() {5: var opr = document.form1.op.value;6: var a1 = parseInt(document.form1.angka1.value);7: var a2 = parseInt(document.form1.angka2.value);8: var rslt;9:
10: if (opr == "plus"){11: rslt = a1 + a2;
12: }
13: else if (opr == "min"){14: rslt = a1 - a2;
15: }
16: else if (opr == "cross"){17: rslt = a1 * a2;
18: }
19: else if (opr == "div"){20: rslt = a1 / a2;
21: }
22: document.form1.angka3.value = rslt;
23: }
24:
25: //--></script>
<form name=form1 action="#">
<input type="text" name="angka1"/>
<select name="op">
<option value="plus">+</option>
<option value="min">-</option>
<option value="cross">*</option>
<option value="div">/</option> </select>
<input type="text" name="angka2"/>
<input type="button" value="Submit" onclick="hasil()" />
<input type="text" name="angka3"/>
</form>
</body>
</html>
Thank’s for your attention, see you good bye…
0 komentar:
Posting Komentar