|
var str = "+7" document.write(eval(str))
However, it works fine when the sign is minus (–) rather than plus (+). Math ExamplesCreating a CurveAlthough JavaScript does not correspond very well with custom-created graphics, it is possible to create simple graphs, plots, and curves. In this section we shall plot a sine curve using JavaScript. First take a look at the script’s output: Now take a look at the script itself:
<HTML> <HEAD> <TITLE>Sine curve</TITLE> </HEAD> <BODY > <FONT COLOR="blue" SIZE=+4>JavaScript Sine Curve</FONT><BR><BR> <SCRIPT LANGUAGE="JavaScript"> <!-- function drawBlank(num) { // draw num blank dots for (var i = 0; i < num; ++i) { document.write("<IMG SRC='blank.gif' HEIGHT=6 WIDTH=6>") } } function drawDot() { document.write("<IMG SRC='dot.gif' HEIGHT=6 WIDTH=6>") } function getRadian(deg) { // return deg in radians return Math.PI * deg / 180 } function getSpot(deg) { // convert from degrees to radians var rad = getRadian(deg) // assign sine to variable var sine = Math.sin(rad) // return spot in graph return Math.round(sine * 30) } function get3DigitNum(num) { // convert num to string num += "" // assign number of digits in num to variable var length = num.length // add preceding zero digits to reach three digits for (var i = 0; i < 3 – length; i++) { num = "0" + num } // return four-digit number return num // do not parse number! } function printDeg(deg) { // print degree in green font document.write("<FONT COLOR='purple' SIZE=1>"+get3DigitNum(deg)+"</FONT>") } function drawLine(deg) { // assign spot (–30 to 30) var spot = getSpot(deg) // if sine is negative if (spot < 0) { // draw blank images up to spot, not inclusive drawBlank(30 + spot) // draw dot image drawDot() // draw remaining images until axis drawBlank(–spot – 1) // 30 – ((30 + spot) + 1) // print current degree printDeg(deg) } else // if sine is positive if (spot > 0) { // draw 30 blank images = left of axis drawBlank(30) // print current degree printDeg(deg) // draw blank images up to spot, not inclusive drawBlank(spot – 1) // draw dot image drawDot() } else { // draw 30 blank images = left of axis drawBlank(30) // print current degree printDeg(deg) } // move to next line document.write("<BR>") } function drawCurve(lastDeg, jump) { // loop through plot vertically for (var deg = 0; deg <= lastDeg; deg += jump) { drawLine(deg) } } drawCurve(720, 15) // --> </SCRIPT> </BODY> </HTML>
Example 15-1 (ex15-1.htm). A simple script to plot the sine curve. The script is intentionally divided into many short functions for better understanding by the reader. We shall analyze each function to see how it works. drawBlank(num)
function drawBlank(num) { // draw num blank dots for (var i = 0; i < num; ++i) { document.write("<IMG SRC='blank.gif' HEIGHT=6 WIDTH=6>") } }
This function uses a for loop to print the transparent image the number of times indicated by num. Note that the transparent (blank) image’s height and width are both equal to 6. drawDot()
function drawDot() { document.write("<IMG SRC='dot.gif' HEIGHT=6 WIDTH=6>") }
This function simply draws the dot image. getRadian(deg)
function getRadian(deg) { // return deg in radians return Math.PI * deg / 180 }
This function accepts a number (actually the size of an angle in degrees) and returns it in radians. The conversion is based on a simple linear equation. getSpot(deg)
function getSpot(deg) { // convert from degrees to radians var rad = getRadian(deg) // assign sine to variable var sine = Math.sin(rad) // return spot in graph return Math.round(sine * 30) }
This function accepts the size of an angle in degrees and returns its sine value multiplied by 30. At first, it assigns the radian measurement of the angle to the local variable rad. It then assigns the sine of that angle to the local variable sine. The function then multiplies the sine by 30 and returns the rounded-off value of that number. The reason for the multiplication by 30 is that the sine of any angle is a value between –1 and 1. The curve we are plotting generally consists of 30 images, transparent or not, at each side of the center axis. If you enlarge this number, the horizontal width of the curve becomes large. As you can see, 30 images looks good. By multiplying a value between –1 and 1 by 30, we receive a value between –30 and 30. By rounding it off using the Math.round() method, the function returns an integer between –30 and 30. Note that the plot acts like a 2D array, because it consists of rows of images. get3DigitNum(num)
function get3DigitNum(num) { // convert num to string num += "" // assign number of digits in num to variable var length = num.length // add preceding zero digits to reach three digits for (var i = 0; i < 3 – length; i++) { num = "0" + num } // return three-digit number return num // do not parse number! }
|
|||||||||||||||||||||||
With any suggestions or questions please feel free to contact us |