Project of simple website with mathematical calculator introduction

Project of simple website with mathematical calculator– introduction to Java. Script Radoslaw Jedynak, Ph. D Poland, Technical University of Radom Faculty of Teacher Training Department of Mathematics jedynakr@pr. radom. pl

What Is Java. Script? Java. Script is an interpreted object-oriented programming language, with roots in C/C++, that has been developed for use with other Web tools. It does not operate as a standalone language, but is designed to work together with HTML for creating interactive Web pages. Java. Script is not the same as Java, which is a compiled object -oriented language. Java. Script is used to write client side applications, which means that its code is sent to a user’s computer when a Web page is loaded. The code is then executed, basically line by line, by a Java. Script interpreter included as part of the user’s (client’s) Web browser.

Basic Structure of Document HTML contains Java. Script <html> <head> <title> … </title> … <!-- Optional script elements as needed. --> <script> … </script> </head> <body> … </body> </html>

First HTML/Java. Script Document <html> <head> <title>Hello, world!</title> <script language="javascript" type="text/javascript"> // These statements display text in a document. write("Hello, world!"); document. write(" It's a beautiful day!"); </script> </head> <body> </html>

Example of HTML/Java. Script Document <html> <head> <title>Calculate area of a circle. </title> <script> var radius=prompt("Give the radius of a circle: "); radius=parse. Float(radius); var area=Math. PI*radius; alert("The area of the circle with radius="+radius+" is "+area+". "); </script> </head> <body> </html>

The Java. Script Math Object 1/2 Property Description Math. E Math. LN 2 Base of the natural logarithm, e, 2. 71828 Natural logarithm of 2, 0. 693147 Math. LN 10 Natural logarithm of 10, 2. 302585 Math. LOG 2 E Log to the base 2 of e, 1. 442695 Math. LOG 10 E Log to the base 10 of e, 0. 434294 Math. PI π, 3. 1415927 Math. SQRTl 2 Square root of ½, 0. 7071067 Math. SQRT 2 Square root of 2, 1. 4142136

The Java. Script Math Object 2/2 Method Returns Math. abs(x) Absolute value of x Math. cos(x) Cosine of x, "1 Math. exp(x) e to the x power (ex) Math. log(x) Natural (base e) logarithm of x, x > 0 Math. max(x, y) Greater of x or y Math. min(x, y) Lesser of x or y Math. pow(x, y) x to the y power (xy) Math. random() Random real number in the range [0, 1] Square root of x Math. sqrt(x)

Form Fields in Java. Script 1/2 <html> <head> <script language=javascript> function silnia(n) { if(n==0) return 1; return n * silnia(n-1); } function calculate() { var n = eval(document. f 1. n. value); document. f 1. result. value = silnia(n); } </script> </head>

Form Fields in Java. Script 2/2 <body> <h 1 align=center>Factorial</h 1> <form name=f 1> <center> Give natural number: <input type=text size=10 name=n> <input type=button value=Oblicz on. Click=calculate()> Factorial: <input type=text size=20 name=result> </center> </form> </body> </html>

Using Java. Script to Change Values in Form Fields The following is a simple algebraic calculation that is easy to implement: For the quadratic equation ax 2 + bx + c = 0, find the real roots: r 1 = [ –b + (b 2 – 4 ac)1/2 ]/2 a r 2 = [–b – (b 2 – 4 ac)1/2 ]/2 a The “a” coefficient must not be 0. If the discriminant b 2 – 4 ac = 0, there is only one root. If b 2 – 4 ac is less than 0, there are no real roots.

Using Java. Script to Change Values in Form Fields 1/5 <html> <head> <title>Quadratic equation</title> <body bgcolor="gray"> <script language="javascript" type="text/javascript"> function solve(f) { var a=parse. Float(f. a. value); var b=parse. Float(f. b. value); var c=parse. Float(f. c. value); var delta=b*b-4*a*c;

Using Java. Script to Change Values in Form Fields 2/5 if (delta<0){ f. x 1. value = " "; f. x 2. value = " "; return alert("There are no real roots"); } else{ if (delta==0){ f. x 1. value = -b/(2*a); f. x 2. value = " "; alert("There is only one real root"); }

Using Java. Script to Change Values in Form Fields 3/5 else{ f. x 1. value = ((-b-Math. sqrt(delta))/(2*a)); f. x 2. value = ((-b+Math. sqrt(delta))/(2*a)); alert("There are two real roots"); } } } </script> </head> <center> <h 3>Quadratic equation </h 3>

Using Java. Script to Change Values in Form Fields 4/5 <p> <form> Give the coefficients of quadratic equation a: x<sup>2</sup> <input type="text" name="a" size="10" maxlength="10" value=" " /> b: x <input type="text" name="b" size="10" maxlength="10" value=" " /> c: <input type="text" name="c" size="10" maxlength="10" value=" " />

Using Java. Script to Change Values in Form Fields 5/5 input type="button" value="Solve quadratic equation" onclick="solve(form); "/> <h 3>Solution of quadratic equation</h 3> x<sub>1</sub> <input type="text" name="x 1" size="20" maxlength="20" value=" " /> x<sub>2</sub> <input type="text" name="x 2" size="20" maxlength="20" value=" " /> </form> </center> </body> </html>

Basic calculator mathematical code 1/5 <html> <head> <title>Calculator</title> </head> <form> <table border=8> <tr> <td> <input type="text" name="input" size="23"> </td> </tr>

Basic mathematical calculator code 2/5 <tr> <td> <input type="button" name= "one" value=" 1 " onclick="input. value += '1'"> <input type="button" name="two" value=" 2 " onclick="input. value += '2'"> <input type="button" name= " three" value=" 3 " onclick="input. value += '3'"> <input type="button" name="plus" value=" + " onclick="input. value += '+'"> <br/>

Basic mathematical calculator code 3/5 <input type="button" name=”four" value=" 4 " onclick="input. value += '4'"> <input type="button" name=”five" value=" 5 " onclick="input. value += '5'"> <input type="button" name=”six" value=" 6 " onclick="input. value += '6'"> <input type="button" name="minus" value=" - " onclick="input. value += '-'"> <br/>

Basic mathematical calculator code 4/5 <input type="button" name=" seven" value=" 7 " onclick="input. value += '7'"> <input type="button" name=" eight" value=" 8 " onclick="input. value += '8'"> <input type="button" name=" nine" value=" 9 " onclick="input. value += '9'"> <input type="button" name= " times" value=" x " onclick="input. value += '*'"> <br/>

Basic mathematical calculator code 5/5 <input type="button" name= " clear" value=" C " onclick="input. value = ''"> <input type="button" name="zero" value=" 0 " onclick="input. value += '0'"> <input type="button" name= " do" value=" = " onclick="input. value = eval(input. value)"> <input type="button" name= " div" value=" / " onclick="input. value += '/'"> <br/> </td> </tr> </table> </form>

Basic loan calculator code 1/3 <html> <head> <title>Loan Calculator</title> <body bgcolor=”blue"> <script language="Java. Script" type="text/javascript"> function get. Payment(P, r, n) { r=r/100. /12. ; var M=P*r/(1. -1. /Math. pow(1. +r, n)); return M. to. Fixed(2) } </script> </head>

Basic loan calculator code 2/3 <h 1>Loan Calculator</h 1> <p> <form> Principal Amount: $: <input type="text" name="amount" size="9“ maxlength="9" value="0" /> Annual rate: % <input type="text" name="rate" size="6“ maxlength="6" value="0" />

Basic loan calculator code 3/3 Number of Months: <input type="text" name="n" size="3” maxlength="3" value="0"/> <input type="button" value="Click here to get monthly payment. " onclick= "monthly. value=get. Payment(parse. Float(amount. value), parse. Float(rate. value), parse. Int(n. value, 10)); " /> Monthly Payment: $ <input type="text" name="monthly" size="9” maxlength="9" /> </form> </body> </html>

Thank you for your attention
- Slides: 24