SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Web Programming JavaScript Learning JavaScript Basics - Math

Learning JavaScript Basics - Math

allsyntax.com JavaScript Sep 26, 2005

Learning JavaScript Basics - Math Math Object

The math object is a built in object which includes math constants and functions. Theres no need to create any math object, because it already exists automatically when using JavaScript.

There are four useful functions in JavaScript:

  • Math.random() - Will generate a random number between 0 and 1.
  • Math.ceil() - Will round your number up to the next integer.
  • Math.floor() - Rounds your number down to the previous integer.
  • Math.round() - Round your number to the nearest integer.

Make sure when using the math functions, be sure to capitalize the 'M' - Just to brief you more, here's what each function would do with the number 3.23:

Math.ceil(); would increase the number to 4.

Math.floor(); would decrease the number to 3.

Math.round(); would make the number 3. But say if the number was 3.5, the function rounds automatically to the nearest even integer.

Below is a line of code using Math.floor and Math.random that generates a number between 1 and 10.

num1 = Math.floor(Math.random()* 10) + 1;

Lets put the math.random to use on a large scale. From the code sample below, we're going to generate 7000 random numbers. We'll also keep a random total and calculate the average. And we'll use the Math.Round() to calculate the average to the thousandths place. Check it all out below:

total = 0;
for(num = 1; num <= 7000; num++)
{
num = Math.random();
total = total + num;
window.status = "generated "+i+" numbers";
}
avg = total / 7000;
avg = Math.round(avg * 1000) / 1000;
document.write("<h4>Average of our 7000 numbers is "+avg+" </h4>");

This is a perfect example why you should use loops. Imagine having a user input 7000 numbers, or even hand writing them yourself. Let alone finding the average!

If Statement

This is where you will use your conditions. You set a condition in the program and have it perform certain tasks according to the conditon.

Here is the syntax of an If statement in JavaScript:

if(<condition>) {
statement1
statement2
statement3
..so on...
}

*If you are only going to use one statement in JavaScript, then you will not need { and }. These are used for conditions with multiple statements. If you put multiple statements and do not use { and }, then only the statement executed will be the statement immediately following the condition.

Now here's a pratical example of using an if condition:

x = 23;
if(x != 24)
{
a = 12;
b = 21;
c = 22;
}

So what do you think will happen in that condition? Well, the condition is true: x is not equal to 24, so the values of a, b and c will equal what was assigned to them.

If/Else Statement

In the examples above, the condition was true. But what if it was not? Then what would happen? If you only had an If statement, nothing would happen. It would skip the statements between { and }, and proceed to execute the rest of the program. But what if you wanted something else to occur if it was not true? This is where you will use an If/Else statement.

Here is the syntax of an If/Else statement in JavaScript:

if (<condition>)
{ //used only for multiple condition circumstances statement1;
statement2;
} else { statement1; statement2; }

*Again, if you're only going to use one statement for if, and one for else- the { and } are not required.

Here is a pratical example with an If/Else condition:

x = 99;
y = 1;
z = 1;

if(x == 99)
{
y = y + 10;
z = z / 14;
} else {
y = y - 10;
z = z * 14;
}

So, what do you think happened here? x is = to 99, so the statements for true are executed. y = y + 10 and z = z / 14.

Inputting Data

You can input data directly into your JavaScript program from what is called the Window.prompt dialog box. This dialog box is displayed with a caption you specify, and two buttons (ok and cancel). Automatically, the information entered will be considered a string. So, if you want to change the value to a number, just use the parseInt statement. The argument of the statement, is the caption you put in the box. Like, "what is the answer?"

syntax of using window.prompt:

<a_string> = window.prompt(<the caption you want to appear>);

example of using it in a program:

a = 1 + 5;
b = window.prompt("what is the answer to 1 + 5?");
answer = parseInt(b);
if(a == answer)
{
document.write("you guessed right mon!");
} else {
document.write("incorrect!"+"<br>");
}

The if statement checks to see if the variables match, if they do- that means the person entered the correct answer. If not,they answered incorrectly or did not enter a numerical value. Technically, you could run another if statement to check if the results were = to "NaN" then if that was true, make them enter an actual numerical value.

Window.confirm

In addition to window.prompt, there is window.confirm(); The difference is that it will display two buttons, 'Ok' and 'Cancel' which can be used for an if statement for True or False results.

Check out the syntax:

OurVariable = window.confirm("Message you want displayed.");

Look at the code below to see exactly how it works:

spring = window.confirm("Do you like spring?");
if (spring == true)
document.write("<b>I like spring as well!</b>");
else
document.write("<b>Why dont you like spring?</b>");

The message "Do you like spring" is displayed in a dialog box that appears when the page is loaded. If the user selects 'Ok' then the program will print out, "I like spring as well." If the user selects 'Cancel' then the program will print out, "Why dont you like spring?" on the screen.

Now on to a simple program using a bit of what we covered.

Example Program 4

   
subscribe to newsletter