Online Documentation Server
 ПОИСК
ods.com.ua Web
 КАТЕГОРИИ
Home
Programming
Net technology
Unixes
Security
RFC, HOWTO
Web technology
Data bases
Other docs

 


 ПОДПИСКА

 О КОПИРАЙТАХ
Вся предоставленная на этом сервере информация собрана нами из разных источников. Если Вам кажется, что публикация каких-то документов нарушает чьи-либо авторские права, сообщите нам об этом.




Previous Table of Contents Next

var str = "+7"
document.write(eval(str))

However, it works fine when the sign is minus (–) rather than plus (+).

Math Examples

Creating a Curve

Although 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:


Figure 15-1.  A sine curve.

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!
}

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us