Download presentation
Presentation is loading. Please wait.
1
Project of simple website with mathematical calculator– introduction to JavaScript
Radoslaw Jedynak, PhD Poland, Technical University of Radom Faculty of Teacher Training Department of Mathematics
2
What Is JavaScript? JavaScript 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. JavaScript is not the same as Java, which is a compiled object-oriented language. JavaScript 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 JavaScript interpreter included as part of the user’s (client’s) Web browser.
3
Basic Structure of Document HTML contains JavaScript
<head> <title> … </title> … <!-- Optional script elements as needed. --> <script> … </script> </head> <body> </body> </html>
4
First HTML/JavaScript Document
<head> <title>Hello, world!</title> <script language="javascript" type="text/javascript"> // These statements display text in a document. document.write("Hello, world!"); document.write("<br />It's a beautiful day!"); </script> </head> <body> </body> </html>
5
Example of HTML/JavaScript Document
<head> <title>Calculate area of a circle.</title> <script> var radius=prompt("Give the radius of a circle: "); radius=parseFloat(radius); var area=Math.PI*radius*radius; alert("The area of the circle with radius="+radius+" is "+area+"."); </script> </head> <body> </body> </html>
6
The JavaScript Math Object 1/2
Property Description Math.E Base of the natural logarithm, e, Math.LN2 Natural logarithm of 2, Math.LN10 Natural logarithm of 10, Math.LOG2E Log to the base 2 of e, Math.LOG10E Log to the base 10 of e, Math.PI π, Math.SQRTl 2 Square root of ½, Math.SQRT2 Square root of 2,
7
The JavaScript 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] Math.sqrt(x) Square root of x
8
Form Fields in JavaScript 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.f1.n.value); document.f1.result.value = silnia(n); </script> </head>
9
Form Fields in JavaScript 2/2
<body> <h1 align=center>Factorial</h1> <form name=f1> <center> Give natural number: <br> <input type=text size=10 name=n> <br><br> <input type=button value=Oblicz onClick=calculate()> <br><br> Factorial: <br> <br> <input type=text size=20 name=result> </center> </form> </body> </html>
10
Using JavaScript to Change Values in Form Fields
The following is a simple algebraic calculation that is easy to implement: For the quadratic equation ax2 + bx + c = 0, find the real roots: r1 = [ –b + (b2 – 4ac)1/2 ]/2a r2 = [–b – (b2 – 4ac)1/2 ]/2a The “a” coefficient must not be 0. If the discriminant b2 – 4ac = 0, there is only one root. If b2 – 4ac is less than 0, there are no real roots.
11
Using JavaScript 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=parseFloat(f.a.value); var b=parseFloat(f.b.value); var c=parseFloat(f.c.value); var delta=b*b-4*a*c;
12
Using JavaScript to Change Values in Form Fields 2/5
if (delta<0){ f.x1.value = " "; f.x2.value = " "; return alert("There are no real roots"); } else{ if (delta==0){ f.x1.value = -b/(2*a); alert("There is only one real root");
13
Using JavaScript to Change Values in Form Fields 3/5
else{ f.x1.value = ((-b-Math.sqrt(delta))/(2*a)); f.x2.value = ((-b+Math.sqrt(delta))/(2*a)); alert("There are two real roots"); } </script> </head> <center> <h3>Quadratic equation </h3>
14
Using JavaScript to Change Values in Form Fields 4/5
Give the coefficients of quadratic equation <br /> 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=" " />
15
Using JavaScript to Change Values in Form Fields 5/5
input type="button" value="Solve quadratic equation" onclick="solve(form);"/> <h3>Solution of quadratic equation</h3> <br /> x<sub>1</sub> <input type="text" name="x1" size="20" maxlength="20" value=" " /> x<sub>2</sub> <input type="text" name="x2" size="20" maxlength="20" value=" " /> </form> </center> </body> </html>
16
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"> <br> </td> </tr>
17
Basic mathematical calculator code 2/5
<tr> <td> <input type="button" name= "one" value=" " onclick="input.value += '1'"> <input type="button" name="two" value=" " onclick="input.value += '2'"> <input type="button" name= " three" value=" " onclick="input.value += '3'"> <input type="button" name="plus" value=" " onclick="input.value += '+'"> <br/>
18
Basic mathematical calculator code 3/5
<input type="button" name=”four" value=" " onclick="input.value += '4'"> <input type="button" name=”five" value=" " onclick="input.value += '5'"> <input type="button" name=”six" value=" " onclick="input.value += '6'"> <input type="button" name="minus" value=" " onclick="input.value += '-'"> <br/>
19
Basic mathematical calculator code 4/5
<input type="button" name=" seven" value=" " onclick="input.value += '7'"> <input type="button" name=" eight" value=" " onclick="input.value += '8'"> <input type="button" name=" nine" value=" " onclick="input.value += '9'"> <input type="button" name= " times" value=" x " onclick="input.value += '*'"> <br/>
20
Basic mathematical calculator code 5/5
<input type="button" name= " clear" value=" C " onclick="input.value = ''"> <input type="button" name="zero" value=" " 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>
21
Basic loan calculator code 1/3
<html> <head> <title>Loan Calculator</title> <body bgcolor=”blue"> <script language="JavaScript" type="text/javascript"> function getPayment(P,r,n) { r=r/100./12.; var M=P*r/(1.-1./Math.pow(1.+r,n)); return M.toFixed(2) } </script> </head>
22
Basic loan calculator code 2/3
<h1>Loan Calculator</h1> <p> <form> Principal Amount: $: <input type="text" name="amount" size="9“ maxlength="9" value="0" /><br /> Annual rate: % <input type="text" name="rate" size="6“ maxlength="6" value="0" /> <br />
23
Basic loan calculator code 3/3
Number of Months: <input type="text" name="n" size="3” maxlength="3" value="0"/> <br /> <input type="button" value="Click here to get monthly payment." onclick= "monthly.value=getPayment(parseFloat(amount.value), parseFloat(rate.value),parseInt(n.value,10));" /> Monthly Payment: $ <input type="text" name="monthly" size="9” maxlength="9" /> </form> </body> </html>
24
Thank you for your attention
Similar presentations
