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

printUnit(num)

function printUnit(num) {
  // print number in specified font and size, inside a table cell
  document.write("<FONT SIZE=1 COLOR='purple'>" + num + "</FONT>")
}

This function accepts a numeric value, and prints it in the specified font color and size.

drawCurve()

function drawCurve() {
  for (var x = minX; x <= maxX; x += dif) {
 // print opening table attributes and cell to hold current unit
 document.write("<TABLE BORDER=0><TR><TD WIDTH=90>")

 // print current number on axis
 printUnit(x)

 // close table cell and open new one
 document.write("</TD><TD>")

 // assign Y value to variable
 var y = ar[x]

 // get y value as integer from 1 to 100
 var ySpot = (y – minY) / (maxY – minY) * 100

 // draw transparent images
 drawBlank(ySpot – 1)

 // draw dot on curve
 drawDot(x, y)

 // close cell, row, and table (new line is automatic)
 document.write("</TD></TR></TABLE>")
  }
}

This function does not accept any argument. It is responsible for printing the curve. To understand this function you must first understand how each row of the bitmap is printed. The entire row is placed inside an HTML table. The x value, or unit, is printed in the first cell of the table. This cell’s width is fixed in order to preserve uniformity across rows. The second, and last, cell of the table is located on the same row, and contains all the images, both the transparent ones as well as the dot one. The dot image is obviously the last image on the second cell of every row. Note that the left cell (the first in each table) is wide enough to hold almost any number.

The entire function is built of a single loop, which iterates through the points that are to be placed on the curve. See the explanation on the function makeArray() for information on the loop’s algorithm. At first, the function prints the opening <TABLE>, <TR>, and <TD> tags. The border of the table is set to zero, so it is not seen. The width of the cell is set to 90 pixels. The value in the first cell is printed by the printUnit() function. The current cell of the table is then closed, and a new one is opened. The y value of the current point, which is stored as a property in the global object ar, is assigned to the local variable y for the sake of convenience. The minimum and maximum y coordinates of the whole curve are already stored in the global variables minY and maxY, respectively. A simple linear equation is used to convert the current y coordinate to a value between 1 and 100, where the minimum y coordinate in the entire curve is 1, and the maximum is 100. This value is assigned to the local variable yspot. The following statement calls the function drawBlank() to print ySpot – 1 transparent images, which is equal to the number of images up to ySpot, the spot where the dot image is placed. The function drawDot() is called with the current coordinates to print the current dot, or bullet, on the imaginary curve. The current cell and row of the table are closed, and so is the table. When closing the table, a line break is automatically appended.

main()

The name of this function is an inspiration from the C++ language, where the function main() is executed automatically. In JavaScript you have to call main() to draw the graph.

At first, the function calls the startWizard() function to execute the wizard. The function getInput() is then executed. If it evaluates to false, meaning the user pressed Cancel when asked to enter a function, the function is terminated. Otherwise, execution continues. The function asks the user to enter additional information, including the minimum and maximum x coordinates and the difference between two consecutive ticks on the X axis. If the user selects Cancel on any of these requests, the function is terminated immediately, without executing any additional statements. After the user enters the values (and presses OK), the data is sent to the function replaceSpecialSequence from which a string is returned and converted to a number with the eval() function.

The following statement creates a global array-like object and assigns values by its constructor function, makeArray().

The function now needs to find the minimum and the maximum y coordinates of the curve. First, it assigns each variable, maxY and minY, an existing y coordinate. A for…in loop then iterates through the properties of the ar object, and if it finds a value less than the current minY or greater than the current maxY, it updates that value.

The last statement of the function draws the curve itself.

Global Statements

The only global statement is a call to the main() function.

Summary

In this chapter you learned about math usage in JavaScript. We have mostly discussed the Math object and its properties and methods. Among the methods discussed are the arithmetic and trigonometric ones. Arithmetic methods are found in almost every JavaScript script, whereas trigonometric methods are rather rare. You also grasped the basics of some built-in functions that are closely related to JavaScript. These functions are discussed later in depth, so do not worry if you do not understand them very well. To spice things up, we have also shown some interesting examples related to math, one involving curve plotting. If you understood all scripts, or at least the curve plotting one, you are surely on the right track. However, don’t worry if they seem very difficult at this stage, because knowledge comes by practice. In the following chapters we shall continue to learn about JavaScript’s unique object model, including built-in objects and browser objects.

Previous Table of Contents Next


With any suggestions or questions please feel free to contact us